WordPressからHugoに移行しました

   · ☕ 5 min read

WordPressの心理的ハードルが高い

と最近感じるようになりました。

ログインが面倒

PCの台数が片手で数えられる方やスマホに強い方はWordPress.comのクライアンヨを使うのが良いと思います。

生活スタイルの変化が原因

私の闇歴史ブログ歴は結構長く、小学生の時にヤプログ!に某MMORPGの画面キャプチャを貼り付けたり、その後FC2ブログに某FPSのリザルトを記録したり、大学に入ってからはWordPressによくわからない記事を公開したりしていました。

その頃は暇だったので画像をバンバン貼り付けて、WYSIWYGエディタで飾り付けをがんばっていたので、腰を据えて作業をはじめるための儀式としてのログインをひそかに楽しんでいました。

最近は、思いついたことをメモして、気が向いたときに少しずつ書いていくスタイルをとることが多いです。そのたびにWordPressにログインして下書きを編集するよりは、メモをクラウドストレージで同期する方が楽です。
そうすると、記事を公開したくなったときに以下の事務作業が発生しますが、これがとっっってもだるいです。

  1. WordPressにログイン
  2. エディタからWordPressにコピペ
  3. 画像をアップロード
  4. 見た目を調整
  5. 公開ボタンを押す

この状況から、ログイン(とその後の一連の作業)が面倒だと感じるようになりました。

追記:
Q. APIで投稿
A. もっとだるいじゃん

運用が面倒

WordPress.comを使うのが良いと思います。

考慮すべき事項が多い

自宅サーバは、パッと思いつくだけで、ホスティングサービスには無い楽しみがたくさんあるので、時間とやる気がある方にはおすすめです。

  • マシンの管理とか冗長化とか
  • ハイパーバイザの管理とかパッチとか
  • LBやリバースプロキシの(略)
  • VMやコンテナの(略)
  • WordPressの脆弱性との戦い
  • 一般のご家庭は固定IPじゃないと思うのでDDNSも必要

社畜の時間は貴重なので、運用も面倒と感じるようになりました。

なので、やめることにした

いろいろ勉強になりました。いままでありがとうWordPress。

Hugoでいこう

ついでに今までの黒歴史を消し去ります😇

CMSじゃなくてもいいじゃん

利用者は私一人で、普段はエディタとターミナルで生活しているので、WYSIWYGエディタなどCMSの恩恵をあまり受けていません。どちらかといえばMarkdownで書いて git push で更新できた方が嬉しいです。

静的サイトジェネレータ

いくつか検討しましたが、Hugoがよさげでした。ブログっぽいテーマが多いです。そして何よりGoで書かれています。

Gatsby

Reactで作られた強そうなやつです。サンプルがオサレウェブサイトばかりなのでパス😇

Jekyll

GitHub Pagesで使えるアレです。

Hugo

Goのパッケージでみんなお世話になっているspf13さんが作ったやつです。テーマ一覧にワクワクするやつが多かったので採用😊

VuePress

Vue.jsの作者が作ったやつです。私のサークルのホームページはこれで作りました。

Netlifyでホスティング

GitHub Pagesは公開リポジトリ限定ですが、ブログを公開リポジトリにするのは恥ずかしいので非公開リポジトリでも使えるNetlifyにしました。本番環境やプレビュー環境など、環境を分けるのが楽でとても使いやすいです。このような誰も読まない個人ブログなら、無料プランで十分やっていけます。

移行は結構苦労した

WordPressからの移行を阻む壁がいくつかありましたが、まあなんとかなっています。

コメント機能

コメント機能の無いブログは寂しいですよね。

CMSじゃないとコメントが使えないと思っていましたが、調べてみると、静的サイトにコメント機能を追加するサービスがいっぱいありました。メジャーっぽいのはTwitterやFacebookでログインできるDisqusで、GitHubのIssuesを利用したGitalkやGitmentもよさげです。ひとまずはGitalkを入れましたが、本当は匿名(というかログインなし)で投稿できるものがほしいです。

作るか?🤔

画像関連

WordPressと違って、ドラッグ&ドロップでアップロードできなくて、
サムネイルの自動作成もありません。プラグイン一つで導入できるLightboxも結構大変1でした。

サムネイル作成や画像のリサイズは、ImageMagickを使って一括で行うコードを書きました。以下の処理をします。

  • サムネイルを作成する
  • 大きいファイルはリサイズする
  • HEIFはJPEGに変換する
  • EXIFの情報を削除する

BMPとPNGは今のところ手作業…。

Lightboxは、イメージギャラリーのやり方を検討しているこちらの記事Hugo Image Galleryが参考になります。これを参考に、それっぽいshortcodeを書きました。

テンプレート

デザインに手を加えるつもりなら避けられません。Goの html/template をベースにしているので、Goを触ったことがあればなじみやすいです。

記事の移行

移行する記事が少ない上、WordPressをMarkdownで書いていたので、コピペで移行しています。画像も wp-content/uploads から1個ずつ持ってきています。

HugoにエスクポートするためのWordPressプラグインもあるようなので、記事が多い場合は使ってみると良いかもです。

ブログのモチベがちょっと上がった

エディタとGitだけで更新できて、サーバの運用も不要なので、記事に集中できます。困ったときに良い感じに対応できる人にはおすすめです。


追記:
Q. WordPress.comかホスティングでWordPressやれば?
A. 静的サイトをホスティングするのと比べて、他人任せな感じがすごくない?


  1. JavaScriptを読み込むだけかと思いきや、テーマと競合してうまく動かなかった…。 ↩︎