WordPressからhugoへ

WordPressから静的ジェネレータへ

動機

WordPress2サイトと、その他スクリプトを動かしているEC2の料金を削減するため、Webサイトは静的生成し、サービスはAPI化していくことを決定。これが2022年11月頃。

技術選定

まずは仕事で使っていた vue.js の流れで、nuxt/contentを採用。がんばってプラグイン作成などもやってみたが、完全な静的生成や出力されるHTMLのコントロールが私には難しかったので使用を断念してhugoに変更。hugoは敷居低く、慣れるのに数日でよかった。

WordPressからmarkdownへの書き出し方

1. wp-load.phpを読み込んでWP_Queryで全記事をループさせる
2. ファイル上部のFront Matter Variablesにtitle, date, draftを入れる
3. 本文はthephpleague/html-to-markdownでHTMLからMarkdownに変換する。完全でない部分はオプションや置換でなんとかする。なんとかならなかった部分は手動で修正

Hugoの特徴だとおもうところ

生成が爆速

HTML書き出しの速度が速い。nuxt/contentとの比較になってしまうが、ちゃんと処理したのか疑問に思うほど一瞬で生成が終わる。

テーマの作り方

扱う感覚としてはWordPressのテーマと同様。かなり柔軟。インデックス用や個別ページ用、ループ用、ヘッダー用などにコードを分割してもよい。HTMLはほぼ完全にテーマ側で制御できる。テンプレートの文法もわかりやすい方だと思う。

バージョンアップの頻度

精力的に開発されていて、月に数回の機能追加やバク修正が行われている。一年前にリリースされた未更新のテーマが、今のhugoのバージョンでは動かないこともあるくらいには活発

Hugoでやったこと

独自のファイル名でmarkdownを作成するスクリプトを書く

WordPressの頃から、日付などを元にしたハッシュ値から10文字取ってパーマリンクにしていたので、そのあたりを自動化した。

最終更新日をgitのコミット日時とする

更新日を表示したいが、ファイル修正のたびに手動で日時を記入するのは億劫なのでgitのコミット日時を最終更新日にする設定にした。

感謝: Hugoで更新日時の管理

SASSからの変換とCSSへのフィンガープリント付与

cssの内容を更新した時に、変更点が確実に読み込まれるようにcssファイルにハッシュ値を追加。

感謝: Sass (SASS/SCSS) スタイルシートを使用する

GTMタグの設置

AdSenseとAnalyticsのタグをまとめて追加。

感謝: Hugo と GitHub Pages で技術ブログ【Google Analytics V4 対応】

Amazonリンクのショートコード作成

ASINのショートコードをmarkdown内に記述すると、HTMLに変換するテンプレートを追加。

感謝: Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする

自動デプロイ

Githubにプッシュしたら、Github Actions経由でS3にアップロードするようにした。

感謝: GitHub Actions + Hugo + AWS S3 + CloudFrontでホームページをリニューアルしました