HUGO と AWS Amplify Console で静的サイトを構築する

Posts Published: 2019年12月21日

AWS Amplify Console は、Web アプリケーションや静的サイトをホスティングできる Web サービスです。
リポジトリの変更をトリガーにして、React や Vue.js などの SPA や、HUGO や Gatsby などの静的サイトジェネレータのビルド・デプロイ・ホスティングができます。

この記事では、次の内容について説明します。

HUGO で作った静的サイトを AWS Amplify Console を使って、ビルド・デプロイする方法
ログの確認
HUGO のバージョン固定
Pull Request 単位でのプレビュー URL 生成

動作を確認した環境

Hugo v0.58.2

AWS Amplify Console でサイトを構築する

HUGO でサイトを作る

ビルドするサイトを作成します。サイト作成の詳細は HUGO で静的サイトを構築するを参照のこと。
```
hugo new site amplify-console-sample
cd amplify-console-sample
```
テーマは、git submodule で追加します。 CodePipeline では submodule は利用できないとありますが、2019 年 12 月 21 日現在、submodule でのテーマ追加でもビルドできました。

Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn't initialize them Problem: CodePipeline does not support git submodules. CodePipeline relies on the archive link API from GitHub, which does not support submodules. Possible fixes: Consider cloning the GitHub repository directly as part of a separate script. For example, you could include a clone action in a Jenkins script.
参照元: Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn't initialize them

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

記事を作成します。「contents」の下にファイルが作成されます。
```
hugo new posts/my-first-post.md
```
contents/posts/my-first-post.md を開き、draft フラグを false にします。
```
---
title: "My First Post"
date: 2019-03-26
draft: false
```

GitHub でリポジトリを作成し、GitHub にプッシュします。

git remote add origin [email protected]:OWNER/REPOSITORY_NAME.git
git add .
git commit -m "first commit"
git push -u origin master

AWS Amplify Console の設定

AWS Amplify Console にアクセスします。
[GET STARTED] を選択します。
接続するリポジトリを選択します（ここでは GitHub を選択します）。
接続する GitHub アカウントに対し、AWS Amplify を認可します。
リポジトリとブランチを選択し、[次へ]をクリックします。
ビルド構成の設定画面で、[次へ]をクリックします。
確認画面で問題なければ、[保存してデプロイ]をクリックします。
デプロイが始まります。
「検証」ステータスまで成功すると、アクセス用の URL が生成されます。
URL にアクセスすると、サイトが生成されていることを確認できます。
```
https://BRANCH_NAME.RANDOM-LETTER.amplifyapp.com/
```