WordPressからHugoへ： Hugoの仕組みと、移行の道筋
Hugoの簡単な紹介と、WordPressブログを移行するために必要な道筋について。
以下では静的サイトジェネレーターHugoについて簡単な説明を行っていますが、WordPressブログを移行するのに必要な程度の最低限の解説しかしていません。Hugoについてより一般的な解説は本家サイトを御覧ください。
HugoはGo言語で書かれた静的サイトジェネレーターです。その特徴はなんといっても高速さで、小規模のサイトならば1秒以内、数百個の記事があるサイトでも数秒で構築ができます。
初心者でもわかりやすい柔軟なテンプレート機能を備えており、Netlifyからデプロイするのも簡単です。
まずはHugoのインストールの仕方と、これからWordPressを移行させるサイトを作成するところまでやってみましょう。
Hugo のインストールと、最初のサイトを作成する
macOSならば、HugoはHomebrewかMacPortsのパッケージになっていますので、インストールするのは簡単です。Homebrewなら：
brew install hugo
でインストールが完了します。次に、ホームディレクトリか、適当なディレクトリに移動して、サイトを作ってみましょう。
hugo new site sample-site
これで、sample-site というディレクトリが作成され、必要なファイルが展開されます。
これだけだと、Hugo はなにも表示してくれませんので、デフォルトのテーマをインストールしておくのが無難です。Ananke というテーマがよく例に使われますので、ダウンロードしてください。
ダウンロードしたzipファイルを展開して、ディレクトリの名前を ananke に変えた上で sample-site/themes の下にコピーします。
あとは、sample-site ディレクトリに存在する config.toml というファイルを編集します。
baseURL = "http://example.org/"
title = "mehori blog"
theme = "ananke"
languageCode = "ja"
hasCJKLanguage = "true"
この設定ファイルは TOML 形式という、直感的な書式で書かれていますが、まずは theme のところに ananke と書き込んでおきましょう。また、languageCode と hanCJKLanguage は、日本語で動かすためにあったほうがいいのでそのまま記入しておきます。
さて、これでトップページは表示されますので、早速見ておきます。Hugo にはサーバーの機能がありますので、コマンドラインから以下のように入力してみます。
hugo -D server
このとき、-D というオプションはドラフト状態の記事も表示するというオプションです。これで、このコマンドを Ctrl + C で止めるまでブラウザでサイトをローカルで確認できます。
http://localhost:1313
ブラウザでこのURLにアクセスすると、ananke テーマでレンダリングされたサイトが見えるはずです。
スマートフォンからの表示を確認したいという場合は、ローカルIPアドレスにバインドすることもできます。もし、hugo を動かしているマシンのローカルIPが 10.0.1.15 だったら：
hugo -D server --bind 10.0.1.15 --baseURL http://10.0.1.15:1313
で、hugo のサーバーを起動することで http://10.0.1.15:1313 でブラウザから見えるようになります。スマートフォンが同じWiFiのサブネットにいるなら、開いて見ることができるでしょう。
サンプルの記事を書いて、確認してみる
次に、サンプルの記事を書いてみましょう。hugo の記事は Markdown ファイルに過ぎませんのでゼロから作ってもいいのですが、デフォルトの情報や日付を入れるために、次のコマンドを使います。
hugo new posts/hoge.md
これで、content というディレクトリの下に posts というディレクトリが作成され、さらにその下に hoge.md というファイルができたはずです。この hoge.md を開いてみると次のようになっているはずです。
---
title: "Hoge"
date: 2020-04-29T20:56:11+09:00
draft: true
---
この最初の数行が Frontmatter と呼ばれている部分で、YAML 形式で題名、日付、ドラフトであるかどうか（true ならドラフト、false なら公開）といった情報が入っています。これを書き換えて、ついでにその下に本文をいれてみます。
---
title: テストページ
date: 2020-04-29T20:56:11+09:00
draft: true
---
ここは本文
サーバーが起動したままなら、このファイルをセーブした瞬間にブラウザの方に自動的に変化があるはずです。
おめでとうございます！ これで、最初の hugo の記事が書けたことになります。
Page Bundleを利用する
記事がテキストだけならばこれでもいいのですが、ブログの場合「記事本文」と「画像」を同じ場所にまとめておきたいというニーズがあります。
そうしたときに利用できるのが page bundle 機能です。たとえば content ディレクトリの中に、blog というディレクトリがあり、さらにその下に sample-post というディレクトリを作った場合に：
content/
│
└- blog/
│
└ sample-post/
├ index.md
└ image.jpg
このような構成になっていれば、sample-post というディレクトリのなかには index.md というファイルがありますので、このディレクトリ全体が一つの記事のように扱われます。
このままデプロイすれば http://example.org/blog/sample-post/ という URL でアクセスすることが可能ですし、パーマリンク機能を使えばディレクトリの構造はこのままにして http://example.org/blog/2020/04/sample-post/ としてアクセスできるようにも設定できます。
通常のブログにおける操作は、全部このフォルダに対する操作で実現できます。
ところで、content というディレクトリの直下に置かれている blog とか posts といったディレクトリは hugo では「セクション」と呼ばれる、特殊な扱いを受けます。この下に存在する Markdownファイルと、index.md を持つディレクトリは、すべて記事として扱われますので、ひとまとめに「blog という Section の下にある記事を列挙せよ」といったように、レンダリングの際に使うことができます。
Section ごとにレンダリングの仕方を変化させることも可能で、本ブログの「ブログ」部分と「めほり書店」の部分はそれぞれ「blog」と「books」という異なるセクションに別のテンプレートを割り当てることで実現しています。
Section はブログのカテゴリと似ていますが、カテゴリやタグはこれとはべつに存在する機能ですので、あくまで hugo におけるコンテンツの整理の仕組みだと理解してください。
Hugoの構成を把握しておく
これで、駆け足で hugo をインストールし、最初の記事を page bundle で作成するところまで理解できたと思います。ここで、WordPressブログをhugoに移行する上で最低限知っておくとよい、hugoのディレクトリ構成についてまとめておきます。
config.toml サイトの設定ファイル
archetypes/ デフォルトのMarkdownのFrontmatterなど
content/ コンテンツはすべてここ
themes/ テーマ
public/ レンダリングされた静的ファイルの置き場
layouts/ デフォルトのレイアウト（テーマを使用したほうがいい）
static/ cssやjsファイルなど（テーマを使用したほうがいい）
data/ その他データ置き場
resources/ キャッシュなど
最も大切なディレクトリとして、content があります。ここにすべての記事や画像を入れておくといいでしょう。また、見た目は themes 内に置かれたテーマで変えるようにします。
layouts、static のディレクトリは、デフォルトの見た目を設定するのに使いますが、ここは themes でやったほうがあとで見た目を切り替えたいときに便利です。実は themes/ananke 野中を見ると、同じように layouts、static が存在しているのがわかると思います。テーマが指定されているなら、そちらが優先して適用されるという仕組みです。
public は、最初は存在しないかもしれませんが、config.toml が存在するディレクトリで「hugo」とコマンドを入力することで、このディレクトリにすべての html ファイルが生成されます。このとき、css や js のような静的ファイルもここにコピーされ、http://example.org のような、デプロイ後の URL も html 内に記述されます。
public 内にあるファイルをすべてレンタルサーバーに移動すれば、サイトを公開できるというわけです。
WordPressからHugoに移行する道筋
というわけで、hugo がどのように動いているかの基本が理解できた処で、WordPress から hugo にサイトを移行するための道筋について把握しておきましょう。
基本的には、２段階で作業を行います。
- WordPressから記事と画像をすべてエクスポートして、hugo がレンダリングできる Markdown 形式に変換する
- 変換し終わった Markdown にテーマを適用して、見た目をブログっぽく仕上げる。
1 は、WordPressから一つ一つ記事をMarkdownのファイルにコピペしてもいいですが、あまりに作業が膨大ですので、Python スクリプトで一気に行う方法について今後の記事で解説します。
2 については、たとえばブログっぽい見た目にするための方法、記事がたくさんある場合のページ遷移の方法、カテゴリとタグの実現方法、固定ページ、といったものの実現の仕方について後半の記事で解説します。
今回の記事、およびこれ以降の記事ではSmashing Magazineの “Switching From WordPress To Hugo” を参考にしました。英語ですが、今回の作業の見通しを立てるのにとても役立ちましたので参考にしてください。
