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

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

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

Hugo アプリを作成する
Azure Static Web Apps のセットアップ
Hugo アプリを 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 という名前のから空の 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
プランの種類	無料
Azure Functions API のリージョンとステージング環境	最も近いリージョンを選択します。
ソース	GitHubの

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

次の GitHub 値を入力します。

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

注

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

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

確認と作成

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

カスタムヒューゴバージョン

静的 Web アプリを生成すると、アプリケーションの発行構成設定を含むワークフローファイルが生成されます。 HUGO_VERSION セクションでenvの値を指定することで、ワークフローファイルで特定の 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

SWA CLI を使用した代替デプロイ

GoLang モジュールなどの追加のセットアップを必要とする依存関係が Hugo アプリケーションにある場合は、Azure Static Web Apps CLI を使用して直接デプロイできます。 CLI をインストールしてアプリケーションをデプロイする GitHub Actions ワークフローの例を次に示します。

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

このワークフローは、Hugo サイトを構築し、Azure Static Web Apps CLI を使用してデプロイします。依存関係とモジュール構成を管理するために、 go.mod ファイルがプロジェクトのルートディレクトリにあることを前提としています。

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

Hugo アプリケーションで Git Info 機能を使用する場合、Static Web アプリ用に作成された既定のワークフローファイルでは、チェックアウト GitHub アクションを使用して、Git リポジトリの浅いバージョンをフェッチします。既定の深さは 1 です。このシナリオでは、Hugo はすべてのコンテンツファイルが 1 つのコミットから取得されたファイルと見なされるため、作成者、最終変更タイムスタンプ、およびその他の .GitInfo 変数が同じになります。

ステップの下に新しいパラメーターを追加して、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 を開きます。
上部の検索バーで、前に指定した名前でアプリケーションを検索します。
アプリをクリックします。
[削除] ボタンをクリックします
[はい] をクリックして削除操作を確定します

次のステップ

カスタムドメインの追加

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-09-29