次の方法で共有


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

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

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

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

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

[前提条件]

Hugo アプリを作成する

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

  1. OS 上の Hugo の インストール ガイド に従います。

  2. ターミナルを開きます。

  3. Hugo CLI を実行して新しいアプリを作成します。

    hugo new site static-app
    
  4. 新しく作成したアプリに移動します。

    cd static-app
    
  5. Git リポジトリを初期化します。

    git init
    
  6. ブランチに main という名前が付けられていることを確認します。

    git branch -M main
    
  7. 次に、Git サブモジュールとしてテーマをインストールし、Hugo 構成ファイルで指定することで、テーマをサイトに追加します。

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
    echo 'theme = "ananke"' >> config.toml
    
  8. 変更をコミットします。

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

アプリケーションの GitHub へのプッシュ

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

  1. https://github.com/new という名前のから空の GitHub リポジトリを作成します (README を作成しないでください)。

  2. GitHub リポジトリをリモートとしてローカル リポジトリに追加します。 次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。

    git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
    
  3. ローカル リポジトリを GitHub にプッシュします。

    git push --set-upstream origin main
    

Web アプリのデプロイ

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

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

  1. Azure portal に移動します

  2. [リソースの作成] を選択します

  3. [Static Web Apps] を探します

  4. [Static Web Apps] を選択します。

  5. を選択し を作成する

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

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

  8. 次の GitHub 値を入力します。

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

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

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

確認と作成

  1. [確認および作成] を選択して、詳細がすべて正しいことを確認します。

  2. [作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。

  3. デプロイが完了したら、[リソースに移動] を選択します。

  4. リソース画面で、[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

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

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

ステップの下に新しいパラメーターを追加して、actions/checkoutfetch-depth (制限なし) に設定して、完全0するようにワークフロー ファイルを更新します。

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

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

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

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

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

次のステップ