Hugoでのサイト作成からデプロイまでの手順

本ブログは、Hugo で構築し、Netlify でホスティングしている。

Hugo × Netlify の組み合わせは非常に簡単に構築できるし、基本的には公式サイトを見れば良いが、備忘録として残しておく。

Hugo の導入

公式の Quick Start 通りに進めれば問題ない。

僕は macOS なのでHomebrewで入れたが、バイナリが配布されているので、別に macOS じゃなくても困ることはないはず。

Quick Start | Hugo

ちなみに執筆時点最新版は以下。

$ hugo version
Hugo Static Site Generator v0.51/extended darwin/amd64 Builddatetime: unknown

テーマによっては古いバージョンだとエラーで動かないことがあるので、特に理由がなければ常に最新版を入れておく。

記事の作成

./content/post/配下に記事を作成する¹。

ちゃんとしたテーマであれば、テーマ内にexampleSiteがあるので、基本的にはそこの構成をパクって作ればよい。

本サイトで利用しているacademicの構成を参考までに載せておく。

$ tree ./ -L 2
./
├── config
│   └── _default
├── content
│   ├── author
│   ├── home
│   ├── post
│   ├── privacy.md
│   ├── project
│   ├── publication
│   ├── slides
│   ├── talk
│   └── tutorial
└── static
    └── img

Netlify に Deploy して DNS を設定

Netlify 側で GUI 上で対象の repository を選択するだけ。独自ドメインにしたい場合は DNS を設定する。なお、SSL も無料で使えるので非常にありがたいし、ややこしい証明書周りを丸投げできるのは非常に楽。

僕は Route53 でドメインを取得、管理しているので、Route53 でよしなに設定した。

有効化されるまでしばらく時間がかかるが、まぁ小一時間も待てば浸透すると思う。

まとめ

WordPress なら非エンジニアでもワンクリックで構築できるが、Hugo を始めとした静的サイトジェネレータもワンクリック感覚でサイト公開までできる。