カテゴリー: Linux

HugoからWordPressに戻しました。

さて、1年半ほど前に当ブログを静的サイトジェネレータのHugoを使用したものに移行させたのですが、今回Wordpressに戻すことにしました。

Hugoは.mdで書いたものを変換することで、HTML+CSSのシンプルなページを生成してくれるというプログラムです。当時はwpだと記事や画像をファイルとしてローカルに残せないあたりが気になっていました。このため、静的サイトジェネレータを試してみることにし、その中でも有名らしいHugoを選んで移行させました。

しかし、いいことばかりではなく、次のようなデメリットがありました。

  • WordPressのように、PCに依存せずブラウザで編集するということができない。
    • UNIX系環境で、Hugoがインストールされていて、SSHのアクセスもセットアップされていないとアップロードはできない。
  • 画像を貼るのがめんどくさい。
    • 専用のタグでパスを書いたり、あらかじめ縮小などを行っておく必要がある。
    • WPならブラウザにドラッグ＆ドロップするだけ。
  • 記事名、パーマリンク、カテゴリなどもテキストで書かなければならず、めんどくさい。
  • アクセス解析も、勝手にはやってくれないのでめんどくさい。
  • 思ってた以上に、「Markdownで記事を書く」以上に周辺でやらなければいけないことが多い。
    • Githubを使ったCI/CDなどまでやる気にはならなかった。

とまあ、ほとんどがめんどくさいという感じで、めんどくさがりな私には合わなかったという結論だったようです。自分の場合、あまりサイト運用には時間をかけたくないと思っていたこともあります。

静的サイトジェネレータは、合う人と合わない人がいると思うので、趣味の自宅サーバ勢は気をつけるようにしましょう。

Hugo移行

さて、これまで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