TOP

    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でホームページをリニューアルしました

    Written by addshlab