さて、これまでWordpressでサイトを運営してきましたが、これがどうにも使いにくく、何か別な手段はないかと考えていました。 使いにくいと思ったポイントとしては、

• 記事作成をブラウザ上の独自エディタで行わなければならない
• 今時デファクトなMarkdownを使いたい(WPのエディタで使えないことはないが)
• 記事はDataBaseに内部的に保存されるため、公開しているものをファイルとして管理できない。バックアップも面倒。
• WP自体の設置・管理が結構面倒。

などなどです。そこで最近出てきているのが、Markdownなどで記事を作成し、サイト生成器を使ってHTML形式などに変換するという方法です。ソースコードをコンパイルするのに似ているかもしれません。この方法にすることで、サイト全体をファイルとして扱え、Gitなどで管理することも可能になります。また、管理画面がないことでセキュリティも向上すると言われています。生成物は静的なHTMLやCSSになるため、Webサーバもシンプルにできます。

作業手順

Hugoがインストールされていない場合はインストールを行います。 Ubuntu 18.04ならsnapを使って以下のようにインストールできます。

snap install hugo

まずはHugoサイトを新規作成します。

hugo new site my_site_name

この時点でGitリポジトリを作成し、コミットを行っておきます。

cd my_site_name
git init
git add --all
git commit -a

テーマをインストールします。テーマはGitのSubmodule機能を利用し管理するのがいいようです。これにより、テーマの開発元が更新を行った際に追随するのが容易になります。

cd themes
git submodule add https://github.com/Vimux/Mainroad.git

config.tomlにテーマ名を設定します。以下の行を追記します。

なお、サイト全体の設定やテーマ独自のカスタマイズは、このファイルを編集して行います。 テーマごとにどのような設定が可能かはテーマのリポジトリのreadmeに書いてあります。

theme = "Mainroad"

今度は、元のWordpressから記事をMarkdownとしてExportします。 Wordpressに、Export用のプラグインをインストールします。

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

この後、Wordpressにブラウザからログインし、プラグインを有効化します。 プラグインのページに移動すると、記事が全て固められたZipがダウンロードされます。 もし容量が大きすぎてブラウザからうまくDLできないようであれば、参考サイトに記載があるコマンドラインを用いた方法を試してみてください。

hugo-export.zipが得られたら、展開を行います。hugo-export/posts以下に記事のMarkdownファイルが、それ以外のディレクトリに静的コンテンツが入れられていると思います。

これらをHugoのディレクトリの所定の場所に入れます。記事のMarkdownファイルをcontent/post以下に、静的コンテンツをstatic以下にコピーします。

サイトディレクトリのトップに移動し、以下のコマンドでテストサーバーを立ち上げられます。

hugo server -D

ブラウザで以下のURLにアクセスすると、ビルドされたサイトを確認することができます。

http://localhost:1313

ローカルサーバでテストが完了したら、サイトディレクトリのトップで以下のコマンドを入力します。 public以下にHTMLが生成されます。

hugo

後はこれをサーバにアップロードすればサイトが公開できます。

参考記事

https://qiita.com/zak74702675/items/b84cd883c01d72720c35#create-a-new-site