Hugo + Netlify + Netlify CMS でのサイト運用

はじめに

このサイトはなるべく

• 運用は楽に
• お金はかけずに

を目指しています。
今回はサイト構築をする際に利用したサービスやツールを紹介します。

サイト作成ツール: Hugo

Hugo

まずはサイト作成ツールです。
今回は Hugo というツールを使いました。
これは静的サイトジェネレータと呼ばれるものの一つで、MarkDown 形式などで書かれたファイルをもとにHTMLを生成してくれるツールです。
ブログなどでよく使われている WordPress と比較するとデータベースが必要無く、生成されたファイルをどこかネット上に置いておくだけでいいので運用が割と楽です。
Hugo のほかにも Gatsby や Hexo 、 Jekyll 　などがありますので気になる方はぜひ調べてみてください。

私は以前 WordPress を使用していたことがあるのですが、サーバーの準備やら定期的に通知がくる脆弱性対応のためのアップデートなど「気楽に運用するには若干面倒だなぁ…」と考えていたので、このサイトを構築するにあたり最近評判を聞く静的サイトジェネレータを使う方針で作業を進めていきました。
いろいろ調べた結果、静的サイトジェネレータの中でもそこそこ評判が良く、軽く触った感じ割と使いやすかった Hugo を使うことにしました。
(ジェネレータの細かい比較などはまた別記事で書いてみようと思います)

サイトのテーマ: Academic

Academic

作成ツールを決めたところで、ブログにもよくあるテーマをどれにしようかと選び始め、今回は Hugo テーマで大人気の Academic というテーマを使うことにしました。
Hugo のテーマは ここ に集まっています。眺めているだけでも結構楽しいです。
いろいろとデモページを触っていたのですが、なんだかんだ一番人気のテーマの方が情報も多くて詰まりどころも少なそう、ということで Academic を選定しました。見た目もそこそこ落ち着いていて使いやすそうだし。

サイト公開場所: Netlify

Netlify

サイト作成方法について何を使うか決まったところで、次は公開先を決めました。
今回は静的サイトジェネレータを使っているので、基本的に生成された html ファイル群を公開できる場所に配置できればいい訳です。
そこで今回は Netlify を使うことにしました。
記事のソースコード自体は Github で管理しているので、Github のリポジトリに紐づけてサイトを公開する Github Pages という仕組みを使ってもよかったのですが、調査していくうちによく比較として挙げられている Netlify を使ってみたい感が強くなってきたのでこちらを使っています。他にも Firebase の Hosting 機能を使うとか、 AWS S3 に置く、といった方法も検討しました。
(こちらも比較記事を別途書こうと思います。こうして書くネタがたまっていくのか…)

運用している現在の感想としては、設定も簡単で非常に使いやすく、 無料で使用できる枠 も非常に大きいのでオススメです。
最近だと、東京都が Github で公開した新型コロナウイルスの対策サイトの配置先にも使われているようです。
東京都 新型コロナウイルス感染症対策サイト の Github リポジトリ

サイト運用: Netlify CMS

Netlify CMS

最後はサイトの運用、主に記事更新についてです。
現在は Netlify CMS という便利なものを導入しました。Netlify スゲェってなりました。

Netrlify CMSを導入前の記事を更新する手順は以下のようになっていました。

1. Github　からサイトのソースコードを自分のPCにコピーしてくる（git clone）
2. 自分のPCで記事のもととなる MarkDown ファイルを編集する
3. 編集したファイルの変更を保存して Github にアップロードする（git commit/push）
4. Netlify が Github の変更を検知してサイトを最新状態に更新 <= これは自動でやってくれます

さらに複数人で編集している関係で、Git のブランチを分けて作業する、 ブランチをプッシュしたら master ブランチにマージするなど、「Git」「マージ」という慣れていない人にとってはもはや呪文にしか聞こえない単語を理解しつつ作業をやる必要があったりします。
(サイト公開初期に頑張って理解して更新してくれた他のメンバーには感謝です！)

とはいえ、このままでは面倒だ、更新に気合いが必要だ、ということでなんとかならないかと調べていくうちに Netlify CMS というものがあることを知りました。
これを使うと、Github と Netlify という構成でも Web ブラウザ上でブログの編集画面のようなもので記事を編集して保存 => 記事公開という、よくあるブログサービスのように記事を更新できるようになります。

編集画面はこんな感じ

これでだいぶ使いやすくなりました。

まとめ

今回はこのサイトを構築する上で使用した各種ツールやサービスを紹介しました。
かかった費用はドメイン取得費用くらいなので ¥1,000 前後くらいです。だいぶお気軽にできるのでぜひチャレンジしてみてください。

それぞれの詳細な使用方法や使ってみての感想などは改めて記事を追加していきたいと思います。