Hugoで生成した静的ファイルをホスティングサーバにアップして公開作業をします。今回はGitHub連携もできるNetlifyにデプロイしました。

Hugoのインストールについては下記でまとめました。

Netlifyとは

静的なHTML/CSS/JavaScript/画像をホスティングサービスです。

公式サイトからいくつか抜粋すると、

• グローバルなCDNで日本拠点もある
• オートスケールに対応
• 独自ドメイン適応可能
• ワンクリックでSSL、HTTP/2に対応
• スナップショットでバージョン管理
• アクセスコントロール（Basic認証など、ただし有料プラン）
• CLI使ってのデプロイできる
• GitなどWebhookを利用しての連携
• Hugoなど自動ビルドに対応

と、高機能なのに、アクセスコントロール以外は無料でホスティングしてくれます。 Github Pagesはソースが公開されてしまう、Firebase、Amazon S3とかでもBasic認証をかけて非公開とかがちょっと難しいので、管理画面で設定できるのはお手軽すぎる。

GitHubにHugoのコードをデプロイする

ローカルでgit管理下においていたブログを、GitHubにアップします。 Bitbucket/GitLabにも対応しているので、普段使ってるリモートリポジトリサービスでも大丈夫です。

gitignoreを作成

.gitignoreファイルを作成

/public

publicフォルダ以下はNetlifyがビルドしてくれるので、ローカルからはコミットしないように除外します。

リモートリポジトリ設定

作成したリモートリポジトリへPushする

$ git add -A
$ git git commit -m "first commit"
$ git remote add origin git@github.com:***.git
$ git push -u origin master

HugoとNetlifyを連携する

Netlifyにログイン後、「Create a new site」でサイト設定を行う。

リポジトリを選択後、設定する内容は下記のとおり

HugoのVersionを変数に与えてあげないとNetlify側のHugoのバージョンが合わなくてデプロイできないので注意。

これで公開できました。 ドメインは「https://****.netlify.com/」というサブドメインアドレスを仮当てしてくれます。

ドメイン

ドメインは、SettingsのDomain managementの画面で独自ドメインの設定、SSLのインストール、HTTPSの適応がワンクリックで適応できます。

これであとは記事を書いて、Git pushするだけで自動デプロイされる環境が出来上がりました。 自動デプロイのフックもブランチを分けることができるので、productionブランチなど作ってステージングと切り分けるなどの運用もできそうです。

※今回作成したファイルは、Githubにアップしてあります。