f:id:vtryo:20180716113506p:plain

WordpressからHUGOへ

~~本ブログもHUGOを利用してジェネレートしました。~~*1

Wordpressユーザだった方はコンテンツを引き継ぐ場合は移行をしなければなりません。
私はHUGOへの移行の際に、HUGOの公式にも記載されているwordpress-to-hugo-exporterを使用しました。

多くの人がこちらで移行していますが、中々一筋縄では行かないときもあるので、色々な記事を参考にしてみてください。

流れ

プラグインでWordpressコンテンツをMarkdownに変換
content配下に記事のmdを配置
static/img配下に画像を配置
画像URLなど必要な修正

私の場合、予めサイトを構築したあとにWordpressコンテンツをインポートする流れにしています。
hugo-exportしたコンテンツを新規サイトにする流れもあるようです。

プラグインのインストール

WordpressのコンテンツをHUGO用に変換するプラグインをインストールします。
管理画面からインストールしたいところですが、この方法だと検索に引っかからないためコマンドでインストールします。

cd $WORDPRESS_HOME/wp-content/plugins/

git clone https://github.com/SchumacherFM/wordpress-to-hugo-exporter.git

エクスポートする

git cloneした場所からさらに移動。

cd wordpress-to-hugo-exporter

移動した先で以下コマンドを打ちます。
このコマンドで変換したファイルがzipにまとめられます。

/tmp/wp-hugo.zipが表示されればOK

php hugo-export-cli.php

This is your file!
/tmp/wp-hugo.zip

zipファイルを解凍してみる

サーバ上からローカルへダウンロードします。

scp -r vtryo@vtryo.me:/tmp/wp-hugo.zip /User/vtryo/

解凍

unzip wp-hugo.zip

するとこんな感じになるはず。
ちなみにwho-am-iとcontactはWordpressで固定ページとして扱っていた部分です。

pwd
/Users/vtryo/hugo-export
 % ls
config.yaml contact     posts       who-am-i    wp-content

wp-content/wpの中にはbackwpupで取得していたログやデータが格納。
年数のディレクトリ内にはメディアにあたるデータ（写真など）が格納されています。

% ls wp-content/wp
2017                 backwpup-bfd3e6-logs backwpup-bfd3e6-temp

また、posts内には記事が格納されています。

データを配置する

HUGOのサイトの適切な場所へ配置していきます。
content/post配下に記事が配置されるため、このWordpressもそこへコピーします。

cp -r hugo-export/post/* your-hugo-site/content/post/

さらに画像データも配置します。
hugoの画像はstatic/imgに置くようにしていますので、今回はstatic/img/wpを作成してそこに格納していきます。

mkdir your-hugo-site/static/img/wp

cp -r hugo-export/wp-content/wp/your-data your-hugo-site/static/img/wp

Front matterのパラメータを修正する

プラグインを利用してMarkdownに変換するまではよいものの、自身が使っているテーマと同じパラメータで変換してくれるとは限りません。

例えば変換後のFront matterは以下です。

---
title: '[Qiita:再掲]bash on windowsってすごーい！powerlineとTmuxを駆使してMa のターミナルっぽくする'
author: RYO
type: post
date: 2017-07-27T05:10:20+00:00
url: /infra-engneering/bash-on-windows-tmux
featured_image: https://blog.vtryo.me/wp-content/uploads/2017/07/スクリーンショット-2017-07-27-1.36.30-600x250.jpg
categories:
  - Infra Engneering
tags:
  - bashOnwindows
  - cmder
  - powerline
  - tmux
---

そしてこちらが私の使用しているテーマのFront matter

---
title: "WordpressからHUGOへ移行する方法"
date: 2018-01-31T12:21:51+09:00
draft: true
image: "img/post/wordpress-to-hugo/catch.png"
categories:
  - hugo

tags:
  - hugo
  - wordpress
  - replace
---

titleやauthorは良いとして、featured_imageとそのURLは私の使用しているテーマには合ってないので修正する必要がありました。

他にも以下の箇所は変換していきます。（ご自分のテーマに合わせてください）

+00:00　→　+09:00
featured_image →　image
https://blog.vtryo.me/wp-content/uploads　→　/img/wp

また、個人的に変更したい項目があったので以下も変換します。

categoriesのInfra Engneering　→　wordpress
RYO →　VTRyo

（Infra Engneeringのスペルが誤字ってたのでようやく直せる……！）

ということで変換するコマンドを叩きましょう。

("\"はエスケープシーケンスです)

カレントディレクトリにあるファイルの+00:00を+09:00に変換する

grep -l '+00:00' ./* | xargs sed -i -e 's/+00:00/+09:00/g'

カレントディレクトリにあるファイルのfeatured_imageをimageに変換する

（私のWordPressで使っていたサムネイル画像があまりにもひどい画質だったので、本ブログではあえてWordPress時代の記事にはサムネイル画像の設定を外しています。以下のコマンドは実行しても問題ないです）

grep -l 'featured_image' ./* | xargs sed -i -e 's/featured_image/image/g'

カレントディレクトリにあるファイルのhttps://blog.vtryo.me/wp-content/uploadsという文字列を/img/wpに変換する

（※1 "/img/wp"の最初の/を忘れないようにしてください！！詳しくはクリック！）

grep -l 'https://blog.vtryo.me/wp-content/uploads/' ./* | xargs sed -i -e 's/https:\/\/blog.vtryo.me\/wp-content\/uploads/\/img\/wp/g'

カレントディレクトリにあるファイルのcategoriesのInfra Engneeringをwordpressに変換する

grep -l 'Infra\ Engneering' ./* | xargs sed -i -e 's/Infra\ Engneering/wordpress/g'

カレントディレクトリにあるファイルのRYOをVTRyoに変換する

grep -l 'https://blog.vtryo.me/wp-content/uploads/' ./* | xargs sed -i -e 's/RYO/VTRyo/g'

localhost:1313で確認

ここまで実施すると、内部の記述がHUGOに最適化されたと思います。あとはhugo server -Dで確認してみましょう。

hugo server -D

http://localhost:1313

Tips

サマリが大きくなりすぎる場合の設定

config.tomlにhasCJKLanguage = trueを追加すると、日本語の単語数をカウントしてサマリを適切に短くしてくれます。

moreタグを入れなくて済むのでおすすめです。

baseurl         = "https://tech.vtryo.me"
theme           = "casper-two"
languageCode    = "ja"
paginate        = 6
#SectionPagesMenu = "main"
canonifyurls    = true
hasCJKLanguage = true