本記事では、HugoとNetlifyでブログの運用方法について、紹介していきます。同様の記事もWeb上で見つかりますし、正直Hugo公式のWebサイトが結構親切に書いてあるので公式ソースを確認する方が良いですが、自分用の記録も兼ねてとしてここに残しておきます。
ちなみにHugoの公式ドキュメントは下記リンクを参照: https://gohugo.io/about/
Hugoとは
以下は公式サイトからの引用です。
Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.
-- HugoはGo言語で書かれた高速かつモダンな静的サイトジェネレーターで、ウェブサイト作成を再び楽しくするためにデザインされています。
from https://gohugo.io/about/what-is-hugo/
静的サイトジェネレーター(static site generator)は、その名の通り静的サイトを生成するWebsite Frameworkとなります。サイト訪問者のリクエストに応じて動的にページがビルドされず、事前にビルドしておくことでリクエスト時には生成されたページを返すだけのシンプルな構造になります。また、Wordpressの様なCMS(Content Management System）と異なり、ブラウザ上ではなく、Markdown形式で書くことが可能で、技術ブログ等の用途に適していいます。ターミナル等のCUIに触れる必要はあり、多少なりともソフトウェアの知識？が要求されることとなりますが、ドキュメントも豊富ですし、実装手順も非常に簡略化されています。
Hugoの他に静的サイトジェネレーターの代表例としては下記が挙げられます。
Hugoでウェブサイトを作成する
以下はMac上での実施方法になります。基本的にはHugo公式サイトのQuick Start Guideと一緒です: https://gohugo.io/getting-started/quick-start/
1. Homebrewを使ってHugoをインストール
ターミナルを開き、下記コマンドを実行します。しばらくhomebrewを使ってない様なら実行前に ＄brew update && brew upgrade しておきましょう。
brew install hugo
2. 新しいサイトを作成する
下記コマンドで新しいサイトが一通り作成されます（
hugo new site <FILE NAME>
3. テーマを適用する
作成された
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
上記ではanankeというテーマが適用されています。その他にもいくつかのテーマが提供されているの自分のプロジェクトに合わせて好きなものを適用することができます: https://themes.gohugo.io/
その後、テーマ名に応じてconfig.tomlを編集する必要があるので下記を実行
echo 'theme = "ananke"' >> config.toml
ここでは*theme = “ananke”という文字列をconfig.tomlに追加しています。もし、その他のテーマを適用した場合には“ananke”の部分を“
4. 記事を追加する
新しい記事は下記コマンドで追加できます。
hugo new posts/my-first-post.md
記事は上記コマンドを使わず、任意のディレクトリに作成することができますが、newコマンドを使うことで記事の雛形を少ない手間で作成してくれます。
5. Hugo Severを動かす
下記コマンドを実行することでdraft記事を含む全ての記事を*http://localhost:1313/*にブラウザ上でアクセスすることで動作を確認できます。
MacBook:blog user$ hugo -D server
| EN
-------------------+-----
Pages | 12
Paginator pages | 0
Non-page files | 0
Static files | 10
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 173 ms
Watching for changes in /Users/user/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/user/blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
6. Webサイトを公開する
以上でHugoでのWebサイト作成は一通り完了です。この後は、実際にWebサイトを公開していくわけですが、一番手軽なのはNetlifyとの連携です: https://www.netlify.com/pricing/
詳細なやり方はHugo公式サイト(https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)に譲りますが、GithubなどのGitサービスの特定のリポジトリをNetlifyから参照させることで、簡単にWebサイトを公開することができます。個人のブログ程度なら無料枠で十分対応可能なため、カスタムドメイン分しか費用は必要ないと思います。ただし、執筆した記事がデフォルトだとdrfat: trueになっているので、これを無効化しないとサイトを公開しても記事は見ることができないので注意が必要です。
おわりに
上記を一通りやると、とりあえずWebサイト公開まで辿り着くと思います。その後は、自分のニーズに合わせてコンテンツを追加するもよし、気に入ったテーマがなければ自作テーマを作るもよしという感じです。