Hugo (tranquilpeak) + Github Pages + CircleCIで構築する静的ホームページ環境
gitで管理できるブログ環境を構築できたので備忘録がてら。
背景
ブログを書くだけならはてなブログ、アメブロ、忍者ブログ等々あるけれど、個人的にgitで管理したいというのが結構高い優先度で存在してた。 なので、なんだかんだ使ったことのなかったHugoを使ってやってみようかなと思った次第。
CI/CDを自分で試したことがあまりないのもあって、ビルドの自動化には勉強がてらCircleCIを使ってる。
こういう解説記事書くときはリポジトリごと公開してしまうのが手っ取り早いとは思うけれど、ソースをそのまま見せるのは抵抗感があるので、リポジトリはプライベート。 プライベートでもGitHub Pagesできるのかなり便利。
Hugo
有名なGo製の静的サイトジェネレータ。
レイアウトを設定してMarkdownで記事を書いたら、あとはコマンド一つでこのブログみたいなものを構築できる。正直すごい。
レイアウトは作らないといけないけど、有志のテーマが色々とあるのでそれを使える。このサイトもtranquilpeakっていうテーマを使ってる。
tranquilpeak
ここのサイトでランキング4位（2019/09/05現在）につけてる、シンプルなレスポンシブルデザインのテーマ。無駄な装飾がなくてとても好み。
投稿は全てcontent/postに貯めることを前提に組まれているので、そこを把握してないと記事が出てこなくて戸惑う。俺は戸惑った。
Hugoのことをあまり知らずにいきなりテーマ入れたせいなんだけど、Hugoの仕様なのかテーマの仕様なのかがよくわからくて結構時間を取られた。 結論としてはテーマの仕様のことが多いので、これからHugoを試す人は新しいテーマを入れるときはテーマのドキュメントにちゃんと目を通したほうがいい。
このテーマ、デフォルトだとサイドバーの文字は白固定なんだけど、このサイトでは黒にしてる。kakawait/hugo-tranquilpeak-theme#312を参考にした。
GitHub Pages
無料で静的サイトのホスティングできるのやばいと思う。
このサイトはgh-pagesブランチを切ってこのブランチを参照させてホスティングしてる。
空のブランチって切れなくね？と思ったんだけど、ちょっと調べたらgit checkout --orphan gh-pagesっていう方法が見つかった。
最近git checkoutがgit switchとgit restoreに分割されたって話題になったけど、この2つではどうなるんだろうね。多分git switchが担ってるんだろうけど調べてないから分からない。
CircleCI
自分で設定から始めて色々やったの初めてなのでおっかなびっくりで作業進めたけど、想像の4294967295倍くらい簡単だった。
新しくCircleCIを始める上でやることは、
- CIを導入するリポジトリに
.circleci/config.ymlを作って、適当に編集する - CircleCIのサイトに行ってGitHubアカウントでログインする
- サイドメニューの"ADD PROJECTS"からCIを導入するリポジトリを選び"Set Up Project”
- OSと言語を適当に選んで、“Start building"をクリックする
これだけで月1000分無料で使えるビルドサーバーもらえるのバグでしかない。
使わない利点が特にない気がするので、どんどん使っていいと思う。 むしろ使わない利点あったら教えて欲しい。
CircleCIの設定自体はほとんど下のサイトを参照した。
ただssh周りの話が雑なので補足すると、
- 特定リポジトリのためのRead/Write権限は、リポジトリの"Settings” > “Deploy Keys"で設定できる
- CircleCIはEd25519鍵に対応してないので、素直に鍵長の長いRSA鍵を使うなりしたほうがいい
ssh-keygen -t rsa -b 8192とか
- 公開鍵をリポジトリ側に置く
- 今回はgh-pagesブランチへのpushが発生するので、“Allow write access"にチェックを入れる必要がある
- 秘密鍵をCircleCI側に置く
- CircleCIの"JOBS"から、リポジトリと対応するプロジェクトの設定に行き、“SSH Permissions” > “Add SSH Key"で秘密鍵を置く
- このフィンガープリントは
.circleci/config.ymlで使う
これでだいたい問題なく出来ると思う。 UIが変わってたりしたら諦めて似たような設定を探して欲しい。
自分の.circleci/config.ymlはこんな感じ。
サブモジュールのチェックアウトはテーマをgit submoduleで管理してるから追記してる。
.circleci/deploy.shは上の参照先そのままなので割愛。
version: 2
jobs:
build:
branches:
only:
- master
docker:
- image: cibuilds/hugo:latest
steps:
- run:
name: Update environment
command: apk update && apk add git
- run:
name: Hugo version
command: echo "$(hugo version)"
- checkout
- run:
name: Checkout submodules
command: git submodule sync && git submodule update --init
- run:
name: Building blog pages
command: hugo -e production -v
- add_ssh_keys:
fingerprints:
- FI:NG:ER:PR:IN:T
- deploy:
name: Deploy to GitHub Pages
command: ./.circleci/deploy.sh
ここまでで一通りサイト公開は出来ると思う。
※ 2019/11/07 追記
cibuilds/hugoのベースイメージがAlpine LinuxからUbuntuに変更されていたため、このままでは動かない。 修正に関してはこの記事を参照。
※ 2020/07/22 追記