WordPressからHUGOに移行した話

非エンジニアがWordPressからHUGOに移行してみた

WordPressは便利だけど、同じサイトでポートフォリオとブログを運営したり、日本語と英語で同じ記事を書いていたりする私にはちょっと扱いづらいところもある……。
あと、Slow WebやIndie Web系のサイトや記事を読んだ影響もあって、ちょっとマニアックなやり方に憧れていたりもする。
それから、私はMarkdown記法が大好きだ……！（ものすごく個人的な理由）
これで楽に記事を管理できるならそうしたい。

これは、そんな若干ギークなデジタルクリエイター（非エンジニア）が、主にエンジニア界隈で使われているらしい静的サイトジェネレーターや、メジャーなツールの代用を試してみた記録です。

したいこと

  • 多言語運営を楽にしたい。
  • 使いやすさを損なわずにページを軽くしたい。
  • 訪問者のプライバシーにも配慮したい。

WordPressでの多言語運営の面倒さについては後述しますが、他にも本体やプラグインの更新など、メンテナンスが微妙に面倒だなぁと感じていました。
いえ、WordPressは基本的には使いやすくてオススメなのです。
みんな使っているので、検索すれば情報もたくさんありますし。

ただ、いろいろなスクリプトを読み込んで、誰かが訪れるたびにページを表示させるためのコードを書き出すから、表示が遅くなるのは避けられません。
これが耐え難いなぁーと思っての乗り換えです。

プライバシーに関しては、「訪問者の使ってるプロバイダとか、趣味趣向とか、そんな細かいデータいらないから放っておいてあげて…！」と思っているくらいです。
とりあえずはどのページに興味があるのかが分かれば良いかなと。

乗り換えリスト

私の脱WordPress欲に火をつけたThe Plain Text Projectや、ブラウザからビジネスツールまでGoogleサービスの代替がずらっとリスト化されているNo More Googleなどを参考に、乗り換え先を考えてみました。

※私はアンチGoogleではなく、サービスを選んで適宜使えば良いと考えています。
YouTubeは言わずもがな、特に仕事ではデータの共有もしやすく便利ですし。
ただ、プライバシーが気になるのは確かなので、マップはApple派、検索はDuckDuckGo派です。
どちらも数年前はいまひとつだった使い勝手も、今ではかなり改善されていて便利です。

  • WordPress → HUGO

    • HUGOは無料でオープンソースの静的サイトジェネレーター。ターミナルで「hugo -D」のコマンドを実行するだけで、Markdownで書いた記事からHTMLページを生成してくれます。
    • データベースもコントロールパネルも使わないので、セキュリティーが高い。
    • デフォルトで多言語に対応しているので、プラグインいらず。
    • HTMLページだけでなく、言語ごとにRSSフィードも生成してくれます。
    • テーマが豊富。（ですが今回は自分でオリジナルテーマを作りました）
    • ノンエンジニアとしては、JekyllよりもHUGOの方がクイックスタートのドキュメントが解りやすかった印象。

  • Contact Form 7 (WP plugin) → JotForm

    • JotFormは無料（フリーミアム）のメールフォーム作成サービス。海外ではメジャーだそうで、サイトは日本語にも対応しています。
    • 見たまま作れるWSYWIGビルダーのおかげで、フォームはものの数分で作れてしまいます。
    • ですがフォームの姓名を並び替えることはできないようで（名・姓の順になってる）、姓名を分けた場合はCSSで強制的に並び変えるしかないよう。

  • Google Analytics → Matomo

    • Matomoはオープンソースのサイト解析ツールです。レンタルサーバーにアップロードして自前で運用可能。
    • プライバシーを大切にしていて、国・地域、訪れたページ、時刻など、解析に必要な情報以外は集めない仕様。どの記事が人気なのかを知るのには十分ですね。
    • とはいえ、訪問者の国や地域は実際の位置ではなく、ブラウザの言語設定で判定されるみたい。

Matomo analytics dashboard

WordPressの代わりにHUGOを使ってみた感想

エンジニアではないのでコマンドライン前提の説明はよく解らないけれど（Getting Startedでさえちょっと躓いた）、ターミナルはマシンのメンテナンスで時々使うから、ドキュメントを読んでいけば使いこなせるはず？
と思って、HUGOでサイトを作り直してみました。
中途半端なギークなのです。

ノンエンジニアが初めてHUGOを使う時の手順はこんな感じ。

  1. （Macの場合）ターミナルを開いて、Homebrewをインストール
  2. ターミナル上でHomebrewを起動し、HUGOをインストール
  3. ターミナル上でHUGOを起動し、新規サイト作成
  4. ターミナル上でテーマをインストールして変更、もしくはテーマファイルをダウンロード後にindex.toml（お好みで.yamlや.jsonでも）を直接書き換えて変更

…といった具合に、基本的に設定にはターミナルを使います。

テーマはHugo Themesのサイトからインストールすることもできますが、自分で作ることもできます。
作業してみた感じ、難易度はWordPressのテーマ作成とそう変わりませんでした。
記事の.mdファイルに直接HTMLを書けないので、リンクを別タブで開きたければ「リンク用コードのテンプレート（ショートコード）」を手動で作る必要があったり、一部SNSの記事を埋め込みたい時もそうだったりと、一部独特な手間はありますが。
基本的なコーディング技術があれば大丈夫でしょう。

私の場合、HUGOの挙動を理解するのに2日、テーマを作成するのに3日かかりました。
Bootstrapはデザインを手早く実装できて楽ですね。

ローカル環境（「hugo server -D」で立ち上がります）でデザインと機能をテストした後の公開作業も簡単で、

  1. コマンド「hugo -D」でサイト全体を静的HTMLに変換
  2. FTPソフトからpublicフォルダ内のファルを全てアップロード

したらおしまい。
アップロード後に何か修正するとしても、「修正→再生成（hugo -D）→新しいファイルをアップロード」すればOK。
個人的には、コントロールパネルにログインして項目を探したりと操作するよりもシンプルかなと思いました。

乗り換えたらサイトが軽くなった

HUGOに乗り換えたら、サイト全体がやはり明らかに軽くなったみたいです。
ほんのコンマ数秒の違いかもしれませんが、短い読み込み時間で心地よく感じてもらうには十分の差だと思います。
（ちなみにPage Speed Insightsのスコアを落としている原因は主にGoogleフォントAPIです。）

Score of Page Speed Insights by Google Search Console (PC)
Score of Page Speed Insights by Google Search Console (Mobile)

そしてもちろん、多言語でのサイト運営も格段に楽になりました。
WordPressで「Polylang」プラグインを使用していた頃は
「画像アップロード→画像URLをコピー→別言語の記事にペースト」
するという面倒なことをしていたわけですが（WPでは画像に言語情報が紐づけられるので、別言語の記事を編集する時はメディアライブラリから直接画像を追加できないのです）、HUGOに乗り換えてからはその必要もなくなりました。
『post-name/index.en.md』と『post-name/index.ja.md』双方に同じ相対パスを書くだけなので、とにかく簡単です。

Post directories with HUGO

HUGOは最初の敷居は高いけれど、シンプルさを求めるのなら一度試してみるのもいいかもしれません。