Hugoの導入とAzure Static Webappsへの連携

2025-02-10

※注意:以下は生成AIにて作成した記事になります。実際に行った手順は記載のとおりですが、一部実際と異なる可能性があることをご理解ください

感動のデプロイ!~エラー修正とHugoサイトコンテンツ作成ガイド~

はじめに

この度、Azure Static Web Apps へのデプロイに成功しました!
数々のエラーを乗り越え、技術と挑戦の結晶としてこの瞬間を迎えられた喜びは、言葉では表しきれません。
ここでは、デプロイ時に発生した以下の2つのエラーの修正方法と、Hugo を用いたサイトコンテンツの作成手順をご紹介します。


発生したエラーとその修正方法

エラー1: Hugo バージョンの不整合

エラーメッセージ例:

WARN Module "ananke" is not compatible with this Hugo version: Min 0.128.0; run "hugo mod graph" for more information.

原因:
Ananke テーマは Hugo のバージョン 0.128.0 以降を必要としますが、ビルド時に使用されていた Hugo バージョンが 0.124.1 だったため、この警告が発生しました。

解決策:
GitHub Actions のワークフローで Hugo のバージョンを上書きするため、環境変数 HUGO_VERSION を指定します。
以下のように、ワークフローの該当ジョブに環境変数を追加してください。

- name: Azure Static Web Apps Deploy
  uses: Azure/static-web-apps-deploy@v1
  env:
    HUGO_VERSION: '0.128.0'  # Hugo バージョンを指定
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    action: upload
    app_location: "/"          # プロジェクトルート(hugo.toml がある場所)
    output_location: "public"    # Hugo の出力ディレクトリ
    github_id_token: ${{ secrets.GITHUB_ID_TOKEN }}

また、ローカル環境でも Hugo をバージョン 0.128.0 以上にアップデートしてからビルドするようにしてください。

エラー2: Sass フィールドの評価エラー

エラーメッセージ例:

ERROR ...: can't evaluate field Sass in type interface {}

原因: Hugo の古いバージョンでは、Ananke テーマ内で Sass の処理を正しく評価できず、エラーが発生していました。

解決策: こちらも、上記と同様に Hugo のバージョンを 0.128.0 以上に更新することで解決できます。 ワークフロー内で HUGO_VERSION を指定するか、ローカルで Hugo のアップデートを行ってください。

感動のデプロイ成功! すべてのエラーを解消し、ついにデプロイに成功しました! この成功は、技術への挑戦と日々の努力の結晶です。 新たな可能性への一歩として、今後も革新と成長を続ける決意を胸に、次なる挑戦へ進んでいきます!