HugoのサイトをAWS Amplifyでホスティングする

2020-08-22 Infrastructure

Introduction

このサイトはHugoで作成し、AWS Amplifyで公開している。

後学のために記録を残す。

Environment

OS
- macOS Mojave 10.14.6 (18G5033)
git
- git version 2.20.1 (Apple Git-117)
hugo
- Hugo Static Site Generator v0.74.3/extended darwin/amd64 BuildDate: unknown

Procedure

bilberry-hugo-themeを使っているが、他の好きなテーマを選んでよい。

Do in your Terminal

好きなテーマを使って、新しいHugoサイトを作る

テーマをgitリポジトリとして持っていると、Amplifyのビルドがうまくいかないので、theme/your-favorite-theme/.gitは削除する。

hugo new site your-site-name
cd your-site-name/themes/
git clone --depth=1 --branch=master https://github.com/Lednerb/bilberry-hugo-theme.git # change to your favorite theme
git rm -rf .git
cp -r bilberry-hugo-theme/exampleSite/* ../
cd ../
rm archetypes/default.md

サイトをローカルで立ち上げてテストする
```
hugo server -D
```
サイトのタイトルなどを設定する

vi config.toml

この時点でサイトのURLが決まっている場合は、URLをbaseURL(*1)に設定する。

*1 baseURL: サイトのURL

GitHubにpushする

git add config.toml
git commit -m "change the baseURL to the custom domain"
git push -u origin master

Do in AWS Web Console

AWS Amplifyを開く
アプリの作成をクリックする
アプリの作成ウィザードのGet started with the Amplify Consoleページで、以下のように設定してContinueをクリックする
- From your existing code
- GitHub
はじめてGitHubを選択する場合、認証が求められる
アプリの作成ウィザードのリポジトリブランチの追加ページで、以下のように設定して次へをクリックする
- リポジトリ
- 接続したいリポジトリ
- ブランチ
- 接続したいブランチ
- Connecting a monorepo? Pick a folder.
- リポジトリがmonorepoの場合、チェックする
- リポジトリがmonorepoの場合、対象のアプリのルートへのパスを入力する (例. src/myapp)
アプリの作成ウィザードのビルド設定の構成ページで、以下のように設定してNextをクリックする
- ビルド設定の追加
- アプリの名前
  - 規定値(リポジトリ名) or 任意の名前
- ビルドの設定
- 変更しない
```
version: 1
frontend:
phases:
  build:
    commands:
      - hugo
artifacts:
  baseDirectory: public
  files:
    - '**/*'
cache:
  paths: []
```
アプリの作成ウィザードの確認ページで、設定を確認してNextをクリックする

Do in AWS Web Console (option)

カスタムドメインを使う場合は、このブロックの手順を実施する。

AWS Amplifyを開く
サイドメニューを展開する
サイドメニューから、作成したアプリを選択する
サイドメニューのアプリの設定を展開する
サイドメニューのドメイン管理をクリックする
右上のカスタムドメインの追加をクリックする
以下のように入力してドメインの検索をクリックする
- ドメイン
- {YOUR_CUSTOM_DOMAIN}
任意のルートドメイン、サブドメインを設定して保存する

その後、AWSはSSLの設定を開始する。

SSLの設定は、最大で8時間かかる。

Do in your terminal

すでにbaseURLを設定している場合、このブロックの手順はスキップする。

config.tomlのbaseURLに、作成したアプリのURLを設定する

cd PATH/TO/YOUR/HUGO/SITE/REPOSITORY
vi config.toml

URLは、AWS Amplifyのアプリのページで確認できる。

変更をコミットする

git add config.toml
git commit -m 'update the baseURL'
git push -u origin master

Reference

以下のページを参考にさせていただいた。