このブログを放置して早3年半くらいの月日が経ってしまいました。
元々このブログの構成はさくらのレンタルサーバーにWordPressを乗せてというシンプルなものでした。しかし、脆弱性が生まれないようにWordPressを更新していくのが面倒になってきました。 そのため、静的サイトジェネレーターのHugoに移行することにしました。
Hugoのインストール
Hugoは静的サイトジェネレーターのため、執筆する端末にHugoをインストールします。
Installation
Macの場合は上記公式サイトを参考にHomebrewで一発です。またDocker Imageもあります。
WindowsでもChocolatey対応なので楽にすみます。（最近ちょっとずつChocolatey対応が増えてきているので嬉しい限りです）
またGitも使うためインストールされていない場合はインストールしておきます。
Hugoの設定
Quick start
上記公式のクイックスタートを写経します。 動けば環境は問題ないので写経したものを削除して新たにカスタマイズします。
まず重要なのがテーマ決めです。WordPressと同じく、1枚LPからブログ、プロフィール用などさまざまなテーマがあるためHugo公式のテーマ一覧やネットの海から捜索します。
Complete List
テーマはGitのサブモジュールとして追加します。
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
各種テーマ毎に設定ファイルはありますが、その設定を超えてデザインを変更したい場合があると思います。
例として、
themes/sample-theme/layouts/partials/header.html
のデータを編集したい場合はプロジェクト直下に同じパスでファイルを作成します。
layouts/partials/header.html
これでビルドの際に変更後のデータで上書きされます。
Hugoテーマ「Salt」
今回ブログテーマを検討した結果「Salt」を使用することにしました。
Hugoブログテーマ「Salt」
採用理由として
- これまで利用していたWordPressと似たようなデザイン
- 日本人に馴染みのあるデザイン
- ドキュメントが豊富
が理由です。
この「Salt」テーマはGitHub上で公開されており、製作者のサイトでもドキュメントが書かれています。 さらにZennにて有料で製作者がHugoをはじめて扱う人でも分かりやすい導入方法を纏めて下さっています。
シンプルなHugoブログテーマ「Salt」をつくりました
この方式は、製作者への寄付と導入コストの低減を両立できるため、非常に効果的だと感じました。
したがって本記事では「Salt」テーマの導入方法は割愛します。
WordPressデータの書き出し
WordPress時代でもMarkDownで記事は書いていたので、GitHub上には記事のソースが残っていましたが、 そこからさらにWordPress上で微調整をしていたため完成データとしてWordPressから出力することにしました。
今回参考にしたのが下記サイトです。
WordPressの記事をMarkdown形式に一括出力する方法
こちらの方法でWordPressのデータを書き出すと、MarkDown形式で記事が出力されます。 そのため同じくMarkDownで記載するHugo用として使いやすい状態でDLできて大変便利です。
またリンクしてある添付画像も根こそぎDLしてくれ、/images配下に配置してくれます。
ただしこのツールを使ってもそのままHugoにインポートはできません。Hugoでは記事先頭にメタデータとしてYMLがくっついているためです。
そのYMLデータもPythonなりで少しコードを書けば自動付与する事は容易だと思いますが、今回は記事数があまり無かったので手作業の温かみを持って対応しました。
これはカテゴリやタグを再調整する良い機会にもなりました。
ビルド
Hugoコマンドを入力することでビルドが走ります。
ビルドが完了すれば、結果として得られる静的データは任意のストレージにアップロードするだけで利用可能となり、非常に扱いやすくなります。
まとめ
今回はWordPressからHugoへの移行を行いました。これで本ブログをいくら放置してもセキュリティリスクはほぼ無くなりました。
そのためHugoに移行してから安心してこの記事を書くまで3か月間放置することができました。
さてこのままでは記事の執筆、ビルド、デプロイが手動のままですので次回はCloudflareを利用して自動化を行いたいと思います。
