絶賛放置中のペラサイトをwordpressからhugoに変えました。
そもそもwordpressなんてオーバースペックもいいところだった、記事の少ないペラペラサイト。管理の手間と見合うような内容じゃなかったのですが、今更手打ちでhtml書きたくないし、自力でレスポンシブなcssが書けるほどの能力もないし。
そんなかんじで仕方なくwordpress使ってましたが、やはりしんどい。できるだけ制作の手間を省きつつ、管理も楽にしたい。というわけで静的サイトジェネレーターです。
wordpressからhugoへの移行手順
すでにhugoのインストールと新規サイトの作成、テーマの設定が終わっている前提です。
- hugoのインストール
- 新規サイトの作成（hugo new site~）
- 公式から好きなテーマを取得
- wordpressにプラグイン「WordPress to Hugo Exporter」をインストール
- 上記プラグインを使用して個別記事等をローカル環境にzipダウンロード
- 新サイトのフォルダに、解凍したデータを移動
- configファイル設定
- 個別記事の修正
- 必要ならばパス等の修正
- テンプレートファイルの作成
- ビルドしてローカルの仮想サーバーでテスト
- 完成したら、本番環境用にビルド
- サーバーへアップ
- テストして問題がなければ、サーバー上のwordpressのフォルダ一式削除
- データベースからwordpressのデータ削除
ざっとこんな流れです。
hugoのインストールからテーマ取得まで
hugoのインストールに関しては、他にいくらでも詳しい記事を書いている人がいるので割愛。
バージョン管理用にソフトを入れると手間が省けるのでしょうけれど、私の場合そのソフトの使い方を学ぶところからやらなきゃいけないので、windows10に直にhugoをインストールしてます。
hugoはテーマが必須です。自作するか、公式から適当によさそうなのを選びましょう。
wordpressにWordPress to Hugo Exporterをインストール
wordpressからの移転なら、プラグイン「WordPress to Hugo Exporter」を使うと個別記事と画像ファイルなどzipで出力してくれます。
公式のプラグインには登録されてないので、Githubの「WordPress to Hugo Exporter」のzipをダウンロードして、wordpressにログイン。
プラグイン＞新規追加＞プラグインのアップロード＞ZIP 形式のプラグインファイルをお持ちの場合、こちらからのボタンを押してzipファイルをアップロード。
「プラグインのインストールが完了しました。」が出たら、「プラグインを有効化」を押して有効化。
インストールして、メニューのツール＞Export to Hugoを選択すれば使えます。
Hugo-Export.zipを解凍して、中身確認
ダウンロードしたHugo-Export.zipの中身は、サイトによって違いがありました。
cssが入ってるサイトと入ってないサイトがあって、何の違いでそうなってるのかわかりませんでした。
必要なものが入ってなかったら、適宜wordpressから取り出す必要があります。
解凍した各ファイルは、それぞれhugoのディレクトリに置きます。
- wp-content：主に画像ファイルが入っているので、フォルダごとhugoのstaticフォルダへ
- posts：個別記事。フォルダごとhugoのcontentディレクトリへ
- privacyやprofile等：フォルダごとhugoのcontentディレクトリへ
要するにテキスト記事はcontentの下。画像ファイルはstaticの下です。
必要ならばパス等の修正
サイト構成を変える必要がないなら、フォルダごとコピーすればパスを変更する必要もなく、手間がありません。
「wordpressを使ってないのに、wp-contentなどというディレクトリが残るのは我慢できない」という場合は、ディレクトリ構成を変えてもいいですが、私個人としては作業の手間が増えるのでおすすめしません。
個別記事等の入ったmdファイルは、マークダウン記法で翻訳されています。htmlのタグはほぼ消えてる……のですが、一部翻訳しきれず残ってるものもあります。
念のためconfigファイルに、mdファイル内でhtmlタグが使えるように設定します。
unsafe = true
記事をチェックしていて、古い記事は削除するかどうか判断がつかないばあいは、とりあえず記事を下書きモードにして保存。
個別記事のFront Matter（記事上のタイトルとか書いてある箇所）で下書きパラメータを設定。yaml記法の場合は、下記の通り
これを設定した記事はビルドされません。
個別記事のサムネ画像がテーマのデフォルト画像のままになってたので修正。パスがFront Matterに設定されてますが、どうもテーマによって設定が異なるようです。
テンプレートファイルの作成
google adsenseを入れたいとか、グローバルメニューを作りたいとか、記事下に関連記事を出したいとか、テーマファイルで用意されてないコンテンツが欲しい場合は、テンプレートファイルを作成します。
テーマのlayoutのテンプレートファイルやショートコードは直にカスタマイズせずに、サイトのlayoutにコピーしてカスタマイズします。
wordpressでcssカスタマイズするときも、そんなかんじでしたね。
ビルドしてテスト
まずは「hugo server」コマンドで、仮想サーバーでテスト。
このときにビルドできずにエラーが出た場合は、粛々と修正していきます。
ビルドが通ればテスト。おかしな点が見つかれば修正。
本番用にビルドしてサーバーへアップ
「hugo」コマンドで本番用にビルドしたものは、publicの下に展開されます。
publicの下のファイルやディレクトリを一式まとめてサーバーにアップ。
パスを全く変更してない場合は、画像ファイルは全く同じディレクトリ構成（wp-content/upload下）で本番環境にあるので、アップする必要はありません。
この時点ではまだ本番環境のwordpressを触る必要はありません。削除しなくても特に設定していなければ、index.phpよりindex.htmlが優先されるようですからテストできます。
テストして問題がなければ、サーバー上のwordpressのフォルダ一式削除
本番環境で問題がなければ、wordpress用のデータは一式削除。
パスを一切変えてなければ、wp-content/upload/の下の各種画像ファイルだけは使用してますから、残しておくこと。あとDBのデータ削除。
個人的に一番時間がかかった点
まあどのくらいカスタマイズに凝るかによるのですが、テンプレートファイルの作成が一番時間がかかりました。
「とりあえず個別記事と、カテゴリとタグが使えればいいわ。ページネーションはテーマにおまかせ。」みたいに割り切れば、ほぼおまかせなんですが。