Hugo + Netlifyではじめるエンジニアブログ
About Hugo
Hugo is the world’s fastest framework for building websites. It is written in Go.
Hugoは静的サイトジェネレータの1つです。今やたくさんの静的サイトジェネレータが存在していますが、HugoはGo言語で書かれていること、そして動作が高速なことが特徴です。
Hugoの他にはJekyll, Hexo, Gatsbyなどの静的サイトジェネレータがあります。
参考) 静的サイトジェネレータの世界 (2) : 種類と解説
Showcase
静的サイトジェレネータにより構築された静的サイトはよく技術ブログをはじめとしたブログで使用されることが多いですが、今では様々なプロダクトの公式サイトとしても使われています。
Hugoで作成されたサイトも数多く存在します。1 Password, Let’s Encrypt、最近ではKubernetesもHugoで作成されています。
Quick Start
公式サイトのドキュメントQuick Startを参照し、Hugoのインストール、サイトの作成、テーマの設定を行います。ローカルでの動作であれば本当にQuickにStart可能です。
ローカルで動作が確認できたらテーマを変更します。Hugoはテーマが豊富にあることも特徴の一つです。またテーマの変更も非常に簡単です。
テーマを変更する
好きなテーマを選びテーマを変更します。基本的にはテーマをgit cloneしconfigを変更するのみですが、テーマごとに設定可能な項目があるため、テーマごとのインストール手順を参照することをお勧めします。
テーマKieraをインストールする場合
$ cd themes
$ git clone https://github.com/funkydan2/hugo-kiera.git kieraconfigも忘れずに変更します。
theme = "kiera"テーマを変更することができました。
サイトを公開する
ここまででHugoをローカルで動作できるようになりました。次はサイトを外部に公開します。
Github Pagesを使えば簡単に無料でサイトを公開することができます。更にGithub Actionsを使用することでpushするだけでデプロイまで可能となりました。
しかし、やはり記事を追加してgit addしてcommitしてpushする必要はあるわけです。
もう少しブログライクに記事を投稿したい。そこで使用するのがNetlifyです。
Netlifyでホスティング
Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.
Netlifyを使えば、こちらも無料で静的サイトをホスティングすることができます。更にNetlify CMSを使用することで静的サイトをCMS化することができます。これにより多少使いずらいですが、スマホからの記事投稿も可能です。
Netlifyはあらゆる静的サイトジェネレータに対応しています。もちろんHugoにも。難しい設定は必要ありません。画面から操作するだけで設定は完了します。何かを参考にしたいときはHugo+Netlifyの組み合わせに関する記事がたくさんあります。
独自ドメインとSSL
Netlify設定画面から独自ドメインの設定が行えます。ご自身がお持ちの独自ドメインを設定し、ドメインにNetlifyのネームサーバを設定するだけです。
ドメインが使用できるようになれば、同じく設定画面からLet’s Encryptを使用しSSL化も行えます。
テーマを置き換える
Netlifyの機能を使用して自動的にHugoを設定した場合、サンプルサイトが構築されています。資材はGitで管理されています。ここではGithubを使用しているため資材はGithubにあります。
Githubにリポジトリが作成されているためcloneします。
siteの下が最初に作成したHugoと同じような構成となっています。Netlifyと連携する前にHugoでコンテンツを作成していたり、テーマを変更している場合は、siteの下にコピーするだけで変更することができます。
staticディレクトリに注意
Netlifyではstaticの下にadminというディレクトリがあります。Netlify CMSに必要なディレクトリのためマージする際は消さないように注意してください。
add-the-netlify-identity-widget
add-the-netlify-identity-widget
同じくNetlify CMSのためにテーマを編集する必要があります。上記のドキュメントを参考にテーマ内でhttps://identity.netlify.com/v1/netlify-identity-widget.jsを読み込みます。
後はgit commitしpushするだけで変更を反映させることができます。
Netlify CMS
設定したドメインの後ろに/adminを打つと管理画面に入ることができます。管理画面に入るためにはログインIDとパスワードが必要です。
ログインIDとパスワード
Netlify(CMSではない)の管理画面から/identityを開きます。ユーザを選択し、[Send reset password email]をクリックします。ユーザのメールアドレスに届いたメールを確認しパスワードを設定するとNetlify CMSにログインが可能となります。
Git Gateway
Netlifyの管理画面から/settings/identity#servicesを開きます。GitHub API access tokenを設定し、Netlify CMSからGithubを操作できるようにします。
これでNetlify CMSから記事を作成し公開することができるようになりました。
カスタマイズ
Netlify CMSの[new post]の項目
記事を作成する際設定可能な項目を変更することができます。変更する場合はソースコードからsite/static/admin/config.ymlを修正します。
post -> posts
Netlify CMSで作成されたコンテンツはデフォルトでpost直下に作成されます。posts直下にコンテンツを作成していた場合は、postからpostsに変更します。
site/static/admin/config.yml
folder: "site/content/posts"
日本時間のタイムゾーン設定
タイムゾーンの設定はNetlifyの管理画面から行えます。/settings/deploys#environmentを開きます。Environment variablesの設定でkey:TZ, Value:Asia/Tokyoを設定します。
記事のURLを変更する
Netlify CMSで作成されたコンテンツはデフォルトで記事のタイトルがファイル名となり、URLとなります。日本語の記事の場合、日本語のURLとなるためURLを貼り付ける際などにURLエンコードされてしまうと長いURLになってしまいます。
Netlifyではタイトルを変更せずに作成するファイル名のみを変更することができます。
site/static/admin/config.yml
slug: "{{year}}-{{month}}-{{day}}_{{slug}}"
参考) slug
記事のURLを日付区切りにする
slugでファイル名を変更した場合、記事のURLを日付にすることはできますが、slugでは日付を’/‘で区切ることはできません。
https://sitename/posts/2019_11_09_slug
↓
https://sitename/posts/2019/11/09/slug
Hugoの設定で上記のような日付区切りのURLにすることができます。
site/config.toml
[permalinks]
posts = "/:year/:month/:day/:filename"