Hugo サイトを Azure Static Web Apps にデプロイする

[アーティクル]
01/10/2024

この記事では、Hugo Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法を説明します。最終結果は、アプリのビルドと発行の方法を制御できる GitHub Actions が関連付けられた新しい Azure Static Web App になります。

このチュートリアルでは、以下の内容を学習します。

Hugo アプリを作成する
Azure Static Web Apps をセットアップする
Hugo アプリを Azure にデプロイする

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
GitHub アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
Git のセットアップがインストールされていること。まだの場合は、Git をインストールできます。

Hugo アプリを作成する

Hugo コマンドラインインターフェイス (CLI) を使用して Hugo アプリを作成します。

お使いの OS での Hugo のインストールガイドに従ってください。
ターミナルを開きます
Hugo CLI を実行して新しいアプリを作成します。
```
hugo new site static-app
```
新しく作成されたアプリに移動します。
```
cd static-app
```
Git リポジトリを初期化します。
```
git init
```
ブランチ名が main であることを確認します。
```
git branch -M main
```
次に、git サブモジュールとしてテーマをインストールしてから、Hugo 構成ファイルでそれを指定することにより、サイトにテーマを追加します。
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

変更をコミットします。

git add -A
git commit -m "initial commit"

アプリケーションを GitHub にプッシュする

Azure Static Web Apps に接続するには、GitHub のリポジトリが必要です。次の手順では、サイトのリポジトリの作成方法を説明します。

https://github.com/new で hugo-static-app という名前で空の GitHub リポジトリを作成します (README は作成しないでください)。
GitHub リポジトリをリモートとしてローカルリポジトリに追加します。次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
ローカルリポジトリを GitHub にプッシュします。
```
git push --set-upstream origin main
```

Web アプリのデプロイ

次の手順では、新しい静的サイトアプリを作成し、運用環境にデプロイする方法について説明します。

アプリケーションを作成する

Azure portal に移動します
[リソースの作成] を選択します
[Static Web Apps] を探します
[Static Web Apps] を選択します。
[作成]

[基本] タブで、次の値を入力します。

プロパティ	値
サブスクリプション	Azure サブスクリプション名。
リソースグループ	my-hugo-group
名前	hugo-static-app
[プランの種類]	Free
Azure Functions API のリージョンとステージング環境	最も近いリージョンを選択します。
ソース	GitHub

[GitHub でサインイン] を選択し、GitHub で認証します。

次の GitHub 値を入力します。

プロパティ	値
組織	ご自分の希望する GitHub 組織を選択します。
リポジトリ	hugo-static-app を選択します。
ブランチ	[main](メイン) を選択します。

Note

リポジトリが表示されない場合、GitHub で Azure Static Web Apps を認可する必要がある可能性があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。

[Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) ドロップダウンから [Hugo] を選択し、既定値をそのままにします。

[Review and create] (確認および作成)

[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
リソース画面で、[URL] リンクを選択して、デプロイしたアプリケーションを開きます。 GitHub Actions が完了するまで 1、2 分かかることがあります。

カスタム Hugo バージョン

静的 Web アプリを生成すると、アプリケーションの発行構成設定を含むワークフローファイルが生成されます。 env セクション内に HUGO_VERSION の値を指定することにより、ワークフローファイル内に特定の Hugo バージョンを指定できます。次の構成例は、Hugo を特定のバージョンに設定する方法を示しています。

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Hugo アプリケーションで Git 情報機能を使用する

Hugo アプリケーションで Git 情報機能を使用する場合、静的な Web アプリ用に作成された既定のワークフローファイルでは、チェックアウト GitHub アクションを使用して、Git リポジトリの "浅い" バージョンをフェッチします (既定の深さは 1)。このシナリオで、Hugo ではすべてのコンテンツファイルが "1 回のコミット" からのものとして認識するため、それらは同じ作成者、最後の変更のタイムスタンプ、およびその他の .GitInfo 変数を持ちます。

ワークフローファイルを更新して Git の完全な履歴を取得するには、actions/checkout ステップの下に新しいパラメーターを追加して、fetch-depth を 0 に設定します (無制限)。

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

完全な履歴を取得すると、GitHub Actions ワークフローのビルド時間が長くなりますが、.Lastmod および .GitInfo 変数が正確になり、各コンテンツファイルで使用できるようになります。

リソースをクリーンアップする

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web App リソースを削除することができます。

Azure portal を開きます。
上部の検索バーで、前に指定した名前でアプリケーションを検索します。
アプリをクリックします。
[削除] ボタンをクリックします
[はい] をクリックして削除操作を確定します

次のステップ

カスタムドメインの追加