Hugo + Github Pages で静的サイトを公開した
ちょっと事情があって必要になったため、 Hugo で静的サイトを生成して Github Pages を使って公開した。割とシュッとできたので手順をメモしておく。
Github Repository を作る
まずはサイトのコードを管理するためのリポジトリを作成します。あとで Github Pages を使って公開したかったため、リポジトリ名を username.github.io にしておきます。（私の場合は kojoma.github.io）
また、 Github Pages には User/Organization Site と Project Site の2種類あって、
・User/Organization Site: master ブランチを使って公開する
・Project Site: 任意のブランチ（master, gh-pages など）を使って公開する
という違いがあるので少し注意です。
私は自分のサイトにするつもりだったので User/Organization Site のほうになって master ブランチの内容を公開しています。
後で書くんですが、 master を公開用のブランチにする都合上、 Hugo のソースを管理するブランチを別のブランチにする必要があります。私の場合 sourse ブランチを作業用にして、デフォルトもこれにしました。
あと Free プランでは Github Pages 使えないみたいなので、 Pro プランにしました。
静的サイトを生成する
次に Hugo を使って公開するためのサイトを作ります。
・知り合いが使っていた
・気に入ったテーマがあった
くらいの理由で Hugo 選んだんですが、ドキュメント通りにやってみたらすぐ作れたのでよかったです。
1. https://gohugo.io/getting-started/quick-start/ を見ながら hugo new site hoge する
2. https://themes.gohugo.io/ で好きなテーマを探して git submodule add などする
3. comfig.toml を自分用に編集する
（サンプル用のファイルがあったので参考にしました https://github.com/koirand/pulp/blob/master/exampleSite/config.toml ）
4. hugo server -D するとローカルで動いて見た目を確認できる（ Live update も対応してる！）
という感じですぐできました。
あとから知ったのですが、 Github Pages が公式で Jekyll サポートしてるらしくこれでいいならもっと簡単そうです。
Github Pages を使って公開する
Hugo せ生成したサイトを Github Pages で公開するために index.html などのファイルに変換する必要があります。変換用のコマンドがあるのでローカルでやってもいいのですが、どうせなら Continuous Delivery したいと思い Github Actions を使ってやってみました。
Hugo って広く使われてるものなので、探したら便利なやつがあったのでこれ使いました。設定も README みながらやったら簡単でしたが、公式っぽい Github Actions がなくて、野良のどれを使うかを決めるのがちょっと手間でした。今回選んだものは Star 250くらいとそこそこついていて、ドキュメントも丁寧に書いてあって設定が簡単そうだと思って選びました。
ここまでやれば作ったサイトが https://username.github.io で見れるようになってるはずです。
独自ドメインを設定する
最後に独自ドメインを設定します。私はいつか自分のサイト作ろうと思って AWS Route 53 にドメインを持ってたのでそれを使いました。
1. AWS Management Console にログインして Route 53 のホストゾーンページに移動します
2. 「レコードセットを作成」をクリックして https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site に書いてある IP アドレスを登録して保存します
3. あとは Github の設定ページで Custom domain のところにドメインを書きます
4. 「Enforce HTTPS」にチェックを入れると https が有効になります（このとき反映されるのに30分くらいかかりました）
そうやって無事自分のサイトができました。中身は全然書いてないですが、これから少しずつちゃんとしていきたい。
この記事が気に入ったらサポートをしてみませんか？