Hugo で作ったブログをどこにデプロイしようかと思って調べてたら、Netlify が良さげだったので使ってみることにしました。

Netlify とは

ビルド・デプロイまで行ってくれるホスティングサービスです。Hugo はビルドする必要があるので、一つのサービスで完結するというのは非常に楽です。

GitHub Pages だとビルドしたファイルをコミットしないといけないし、Amazon S3 だと TravisCI のようなサービスでビルドしてアップロードしないと手間がかかります。

もちろん GitHub,GitLab,Bitbucket と連携できます。

Netlify を選んだ最大の決め手は、無料で独自ドメインが使えてSSLにすることもできるからです。下のスクショを見てもらうとわかるように無料とは思えないくらい機能が豊富です。

Referenced from Netlify Site.

サインアップからデプロイの流れ

基本的に Hugo の公式サイトに載っている方法でいけるハズです。

英語を読みたくない人のためにざっくり紹介します。

サインアップ

GitHub,GitLab,Bitbucket,Email のいずれかを使ってサインアップすることが可能です。ここは自身が使っているサービスを使ってサインアップするのが良いでしょう。

僕は GitHub を使っているのでその例を挙げます。

サイトの作成

Referenced from Netlify Site.

右上にある New site from Git というボタンを押して、デプロイしたいリポジトリを選択します。

リポジトリを選択したら、ビルドの設定を行います。今回は Hugo を使ってビルドするのでBuild Commandhugoで、publish directorypublicにします。

Referenced from Netlify Site.

ビルドの詳細設定

先ほどのビルドの設定だけではバージョンの不一致などでうまくビルドできないことがあります。僕の場合はそうでした。 netlify.tomlという名前で下記の設定を行います。特にHUGO_VERSIONで指定するバージョンはローカルのマシンと一致させないと意図した表示にならないことがあるかもしれません。

[build]
publish = "public"
command = "hugo"

[context.production.environment]
HUGO_VERSION = "0.38.2"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.38.2"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.38.2"

[context.branch-deploy]
command = "hugo -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.38.2"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

デプロイ

git push したら自動でビルドしてデプロイしてくれます。 独自のドメインを指定していない場合は Netlify が自動で URL を生成してくれます。

僕の場合は https://practical-clarke-add60d.netlify.com/ という URL になりました。

ビルドに失敗している場合は、ビルドログを見て解決していく必要があります。

まとめ

Hugo で作ったブログを Netlify で動かす方法を紹介しました。Hugo のような静的サイトジェネレータだとホスティングサービスの選択の幅が広くていいですね。気に入らなくなったら他のサービスに乗り換えても良いわけだし。

しばらく Hugo on Netlify でいきたいと思います。

同じカテゴリの記事