HugoとNetlifyでブログ開始

ブログのビルドとホスティング

以前 Sphinx を使ってブログを書いていたのだが、Sphinxはやはりドキュメンテーションツールであってブログ向きではないと思うことが多く、最近Goを触り始めたのもあり人気のあるHugoを利用することにした。

ドメインもGoogle Domainsで気に入ったものが取れたので、今後はこちらで運用していこうと思う。

Hugoで静的サイトを作るのは良いのだが、ホスティングはどこで行うか、ビルドとの連携はどのように行うか、を考えたとき、思いついたパターンは以下の通りだった。

Githubに保存、Netlifyでビルドとデプロイ
GCP案: Cloud Source Repositorisに保存、CloudBuildでビルド、GCE or GCSでホスティング
AWS案: CodeCommitに保存、CodeBuildでビルド、CodeDeployでデプロイ、EC2 or S3でホスティング

2,3は自分の勉強には良いが、AWSもGCPも多少費用が掛かってしまうためあまり長く続けるにはメリットが無いかなと。ということで定番の1案で行くことにした。

2,3の案であれば多少費用はかかるが日本のリージョンに選んで置くことができるので、多少アクセスは早いかな？

Github+Netlifyでブログを作る

まずGithubにHugoのファイル＋ブログ記事のファイルを配置する空のリポジトリを作っておくこと。

文書書いてHugoでローカルビルドするところまではいろいろなサイトで解説されているし、公式サイトでも細かく手順が記載されているのでそちらを参考に。

Netlifyでビルドするときに使うconfigファイルである netlify.toml をHugoで作られたディレクトリのトップに配置する。

netlify.tomlの中身に記載すべき内容は以下のhugoの公式ページに記載されているのでそちらを確認すべし。

configure-hugo-version-in-netlify

netlify.tomlのHUGO_VERSIONは自分が使っているhugoのバージョンに合わせましょう。

Hugoで作成されたディレクトリ配下をgitで管理する。ただしpublicディレクトリは .gitignore ファイルで無視するようにしておく（ローカルでビルドしたものまでコミットされてしまうので）

.gitignoreに以下の1行を記載しておく。

public/

public以外はgitで管理してリポジトリにコミットするようにする。

git init
git remote add origin ブログのデータを置くリポジトリ
git add .
git commit -m"first commit"

次にNetlifyアカウントを作成する（Githubアカウントでログイン可能なので、Githubアカウント連携で良いと思う）

ログインしたら、

「New site from Git」-> 「Github」-> コミットしたリポジトリ・ブランチを選ぶ->ビルドの設定が必要なら設定する->「Deploy site」

以上で上手く行けばビルドされてデプロイまで行くはず。

デフォルトのままではランダム文字列.netlify.comのサブドメインで公開される。それで問題なければそのままでも良いが、独自ドメインを使いたい、かつSSL設定をする場合はもうひと手間必要になる。

Netlifyで独自ドメイン設定

Netlifyの設定を変更していく。

作ったサイトの「Settings」-> 「Domain management」を選択。「Domains」の欄でカスタムドメインを設定できる。

DOCUMENTATIONに書いてあるが、カスタムドメインを使う場合はSEO的にはnetlify割当のサブドメインから自分のドメインに転送したほうがよい、とのことなので、Hugoのstaticディレクトリに転送命令を書いた _redirects ファイルを追加する。内容は自分のNetlifyページを参考に記載すべし。

うちの場合は以下の通り。

https://zono.netlify.com/* https://www.zono.dev/:splat 301!

※ zono.netlify.com のように、netlifyがランダムに割り当てたサブドメインの文字列を変更することはDomainsの欄で可能なので、気に入らなければ好きな文字列にしておくとよい。

ついでにSSL/TLS対応をする。素晴らしいことにWebポチすれば Let’s Encrypt で無料で暗号化してくれる。

「Domains」メニューの下に SSL/TLS certificate 欄があるので、そこの設定を読めばいけます。（投げ…）

なお設定してもすぐにはSSL化されないので、しばらく待とう。

以上で完成。