チュートリアル:Hugo サイトを Azure Static Web Apps プレビューに発行するTutorial: Publish a Hugo site to Azure Static Web Apps Preview

この記事では、Hugo Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法を説明します。This article demonstrates how to create and deploy a Hugo web application to Azure Static Web Apps. 最終結果は、アプリのビルドと発行の方法を制御できる GitHub Actions が関連付けられた新しい Azure Static Web App になります。The final result is a new Azure Static Web App with associated GitHub Actions that give you control over how the app is built and published.

このチュートリアルでは、以下の内容を学習します。In this tutorial, you learn how to:

  • Hugo アプリを作成するCreate a Hugo app
  • Azure Static Web Apps をセットアップするSetup an Azure Static Web Apps
  • Hugo アプリを Azure にデプロイするDeploy the Hugo app to Azure

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

前提条件Prerequisites

Hugo アプリを作成するCreate a Hugo App

Hugo コマンド ライン インターフェイス (CLI) を使用して Hugo アプリを作成します。Create a Hugo app using the Hugo Command Line Interface (CLI):

  1. お使いの OS での Hugo のインストール ガイドに従ってください。Follow the installation guide for Hugo on your OS.

  2. ターミナルを開きますOpen a terminal

  3. Hugo CLI を実行して新しいアプリを作成します。Run the Hugo CLI to create a new app.

    hugo new site static-app
    
  4. 新しく作成されたアプリに移動します。Navigate to the newly created app.

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

     git init
    
  6. 次に、git サブモジュールとしてテーマをインストールしてから、Hugo 構成ファイルでそれを指定することにより、サイトにテーマを追加します。Next, add a theme to the site by installing a theme as a git submodule and then specifying it in the Hugo config file.

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

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

アプリケーションを GitHub にプッシュするPush your application to GitHub

Azure Static Web Apps に接続するには、GitHub のリポジトリが必要です。You need a repository on GitHub to connect to Azure Static Web Apps. 次の手順では、サイトのリポジトリの作成方法を説明します。The following steps show you how to create a repository for your site.

  1. https://github.com/newhugo-static-app という名前で空の GitHub リポジトリを作成します (README は作成しないでください)。Create a blank GitHub repo (don't create a README) from https://github.com/new named hugo-static-app.

  2. GitHub リポジトリをリモートとしてローカル リポジトリに追加します。Add the GitHub repository as a remote to your local repo. 次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。Make sure to add your GitHub username in place of the <YOUR_USER_NAME> placeholder in the following command.

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

    git push --set-upstream origin master
    

Web アプリのデプロイDeploy your web app

次の手順では、新しい静的サイト アプリを作成し、運用環境にデプロイする方法について説明します。The following steps show you how to create a new static site app and deploy it to a production environment.

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

  1. Azure Portal に移動しますNavigate to the Azure portal

  2. [リソースの作成] をクリックしますClick Create a Resource

  3. Static Web Apps を検索しますSearch for Static Web Apps

  4. [Static Web Apps (Preview)](Static Web Apps (プレビュー)) をクリックしますClick Static Web Apps (Preview)

  5. [作成] をクリックします。Click Create

    ポータルで Azure Static Web Apps リソースを作成する

  6. [サブスクリプション] で、リストされているサブスクリプションを受け入れるか、ドロップダウン リストから新しいサブスクリプションを選択します。For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. [リソース グループ] で、 [新規] を選択します。In Resource group, select New. "新しいリソース グループ名" として「hugo-static-app」と入力し、 [OK] を選択します。In New resource group name, enter hugo-static-app and select OK.

  8. 次に、 [名前] ボックスに対象のアプリの名前を入力します。Next, a name for your app in the Name box. 有効な文字には、a-zA-Z0-9、および - があります。Valid characters include a-z, A-Z, 0-9 and -.

  9. [リージョン] で、近くの使用可能なリージョンを選択します。For Region, select an available region close to you.

  10. [SKU] で、 [Free] を選択します。For SKU, select Free.

    ポータルで Azure Static Web Apps リソースを作成する

  11. [GitHub でサインイン] ボタンをクリックします。Click the Sign in with GitHub button.

  12. リポジトリを作成した [組織] を選択します。Select the Organization under which you created the repo.

  13. [リポジトリ] として hugo-static-app を選択します。Select the hugo-static-app as the Repository .

  14. [ブランチ] では、master を選択します。For the Branch select master.

    ポータルで Azure Static Web Apps リソースを作成する

BuildBuild

次に、ビルド プロセスがアプリのビルドに使用する構成設定を追加します。Next, you add configuration settings that the build process uses to build your app. 次の設定では、GitHub アクション ワークフロー ファイルが構成されます。The following settings configure the GitHub Action workflow file.

  1. [次へ:ビルド >] ボタンをクリックして、ビルド構成を編集します。Click the Next: Build > button to edit the build configuration

  2. [App location](アプリの場所) を「 / 」に設定します。Set App location to /.

  3. [App artifact location](アプリ成果物の場所) を「public」に設定します。Set App artifact location to public.

    この時点では API をデプロイしていないため [API location](アプリの場所) の値は必要ありません。A value for API location isn't necessary as you aren't deploying an API at the moment.

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

  1. [Review + Create](確認および作成) ボタンをクリックして、詳細がすべて正しいことを確認します。Click the Review + Create button to verify the details are all correct.

  2. [作成] をクリックして、Azure Static Web Apps の作成を開始し、デプロイのための GitHub アクションをプロビジョニングします。Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.

  3. GitHub アクションが完了するのを待ちます。Wait for the GitHub Action to complete.

  4. Azure portal で新しく作成された Azure Static Web Apps リソースの [概要] ウィンドウに移動し、 [URL] リンクをクリックして、デプロイしたアプリケーションを開きます。In the Azure portal's Overview window of newly created Azure Static Web Apps resource, click the URL link to open your deployed application.

    ポータルで Azure Static Web Apps リソースを作成する

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

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web App リソースを削除することができます。If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Azure portal を開きます。Open the Azure portal
  2. 上部の検索バーで、前に指定した名前でアプリケーションを検索します。In the top search bar, search for your application by the name you provided earlier
  3. アプリをクリックします。Click on the app
  4. [削除] ボタンをクリックしますClick on the Delete button
  5. [はい] をクリックして削除操作を確定します。Click Yes to confirm the delete action

次のステップNext steps