Host Hugo Site with AWS Amplify

2020-08-22 Infrastructure

Introduction

I created this site with Hugo and published it with AWS Amplify.

I keep the record here for future reference.

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

I used the theme bilberry-hugo-theme, but you can use any theme you like.

Do in your Terminal

Create a new hugo site repository with your favorite theme

If you clone the theme as as git repository, AWS Amplify’s build step will not work, so delete 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

Test your site
```
hugo server -D
```
Configure your site

vi config.toml

If you’ve already determined the site URL at this point, change baseURL(*1) to the URL.

*1 baseURL: URL of the site

Push to your GitHub

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

Do in AWS Web Console

Open AWS Amplify
Click アプリの作成
On Get started with the Amplify Console page of アプリの作成 wizard, set as follows and click Continue
- From your existing code
- GitHub
If you choose GitHub first time, GitHub authentication is required here, so do it
On リポジトリブランチの追加 page of アプリの作成 wizard, set as follows and click 次へ
- リポジトリ
- 接続したいリポジトリ
- ブランチ
- 接続したいブランチ
- Connecting a monorepo? Pick a folder.
- If your app is in a monorepo, you must check it
- If your app is in a monorepo, enter the root directory of your app (e.g. src/myapp)
On ビルド設定の構成 page of アプリの作成 wizard, set as follows and click Next
- ビルド設定の追加
- アプリの名前
  - Use the default app name (your repository name) or enter another name
- ビルドの設定
- don’t change here
```
version: 1
frontend:
phases:
  build:
    commands:
      - hugo
artifacts:
  baseDirectory: public
  files:
    - '**/*'
cache:
  paths: []
```
On 確認 page of アプリの作成 wizard, confirm the settings and click Next

Do in AWS Web Console (option)

If you use your custom domain, follow the steps in this block.

Open AWS Amplify
Expand the side menu
Open the your app page in the side menu
Expand アプリの設定 in the side menu
Click ドメイン管理 in the side menu
Click カスタムドメインの追加 at the right top
Set as follows and click ドメインの検索
- ドメイン
- {YOUR_CUSTOM_DOMAIN}
Configure the root domain and the subdomain as you like and click 保存

Then, AWS starts SSL configuration.

It can take up to 8 hours.

Do in your terminal

If you’ve already set the baseURL, skip the steps in this block.

Set your site URL to baseURL in config.toml

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

The URL can be confirmed on the app’s page in AWS Amplify web console after first build of the app.

Commit the change

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

Reference

Thanks to the following pages: