HugoとNetlifyを連携して静的ブログを公開する

HugoとNetlifyを連携して静的ブログを公開する

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

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

静的ジェネレーター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」でサイト設定を行う。

Create a new site

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

Netlifyの設定

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

管理画面トップページ

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

ドメイン

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

ドメインの設定

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

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

https://github.com/raym-design/example-hugo-blog
Categories
Tags
Yuji Tsukaguchi

塚口 祐司 / Yuji Tsukaguchi

1987年生まれ。Webデザイナー/エンジニア。DTP、動画配信・リッチコンテンツ制作、Web制作会社共同創業を経て、フリーランスとして独立。デザインからフロントエンドの実装、WordPressやMovableTypeなどのCMS構築まで一貫した制作を行う。著書にMdN社から発売の「Webサイトこれからどうなるの? キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。