作成経緯

自分のHP的なのを作ろうとふと思う。
Amazon LightsailでWordPressを使って一度構築してみたけど、セキュリティとか色々やらなきゃならないことがあって常に更新が必要で、気まぐれで更新するスタイルを取りたい自分には合わないかも……。
よくよく考えると別にWordPress自体いらなくてもっと静的で簡単な構築でいいのでは……？と考えていたところ、https://dev.classmethod.jp/articles/cloudfront-and-s3-using-hugo-with-github-actions/ のサイトを見つけ、構成自体はシンプルで簡単そうなので、AWS/github Actionsの勉強がてらこちらでの構築を目指した。

記事の内容をまるまる真似ではなくて自分の環境に合わせて変更を加える。
例えばcloudformationはちょっと使いにくいのでterraformに変更する。
CloudFrontまで使うかな……？

まずはHUGOの環境構築から始める。

この記事はそのメモやまとめです。
すでに設定済みの項目がいくつかある。
試行錯誤しながらやったので、手順として不要かもしれない。あくまでメモ用。

環境

Windows10 WSL2 AlmaLinux 8.6 #基本的にVscode上でこのWSL2を操作します
Docker Desktop/Vscode/WSL2が連携済み
VscodeにDockerの拡張機能がインストール済み

最終形

最終的にはこのようなディレクトリ構成になった。
HUGO専用のgitリポジトリを作ってそこに格納している。

.
├── docker-compose.yml
├── hoge
│   ├── archetypes
│   ├── assets
│   ├── config.toml
│   ├── content
│   ├── data
│   ├── layouts
│   ├── public
│   ├── resources
│   ├── static
│   └── themes
└── README.md

docker-compose でHUGOを立ち上げる

まずはHUGOの実行環境を整えていく。
dockerのイメージがあるようなのでそれを活用していく。
参考：https://qiita.com/ub0t0/items/4ac2f2d8c3e8fbdfcfad

docker-compose.yml

version: '3'
services:
    hugo:
        image: klakegg/hugo:0.107.0-ubuntu
        volumes:
            - ".:/src"
        entrypoint: bash
        ports:
            - "1313:1313"
        tty: true
        working_dir: /src

保存して以下を実行してdockerを動かす。

docker-compose up -d

その後、vscode上のdocker拡張機能に移動し、Attach Shell

でコンテナがvscode上のターミナルで開かれるので、

hugo version

を実行してversionが帰ってくれば成功。ブラウザでhttp://localhost:1313/ にアクセスしてみる。
今段階ではなにもコンテンツがないのでERR_EMPTY_RESPONSEが帰ってきても想定内。

一時的なHPのコンテンツを作る

参考：https://zenn.dev/harachan/articles/a043e9a756cae4
themeについては https://themes.gohugo.io/ から自分にあったものを選ぶといい。
今回はお試しなので参考にした手順と同じthemeを利用した。

hugo new site hoge
cd hoge

# gitをインストール
apt-get update
apt-get install git

# themeを導入する
cd themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git

config.tomlを編集する

仮なので参考手順からコピペしてプロフィールなどだけ編集。
細かくいじる場合は https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tranquilpeak-configuration にマニュアルがあるのでこちらを参考にしながらいじるといい感じになりそう。

編集後、コンテナ上で

hugo server -D

を実行してブラウザからhttp://localhost:1313/にアクセスしてHPが表示されるか確認する。
確認できたらCtr + cでプロセスを止める。

記事を作る

hugo new posts/my-first-post.md

適当に記事を書く

---
title: "My First Post"
date: 2023-04-27T08:44:14Z
draft: true
---
## テスト投稿
こんにちは

保存後、

hugo server -D

を実行して新しい記事が作成されていれば成功

ハマったところとか

dockerのコンテナをvscode上からvscodeにアタッチして、コマンドを実行すると、
実行によって生成されたファイルなどのユーザーなどがすべてrootになっている。
気持ち悪いので自分のユーザーとグループに変更したがなにか解決方法はないものか……。

参考記事

https://zenn.dev/harachan/articles/a043e9a756cae4
https://qiita.com/ub0t0/items/4ac2f2d8c3e8fbdfcfad
https://dev.classmethod.jp/articles/cloudfront-and-s3-using-hugo-with-github-actions/

次にやること

必要なAWSのリソースをterraformで作成
HUGOでHPをいい感じに編集する
GitHub Actionsの設定