HUGOを使ったブログの構築

September 12, 2020

概要

HUGOを使ってブログサイトを構築します。
HUGOはGo言語で開発された静的なWebサイトを構築できる静的サイトジェネレータの一つです。
公式のQuick Startを参考にブログを構築していきます。

環境

Macbook Pro 13inch, 2016
macOS Catalina version 10.15.6
Homebrew 2.5.0
Hugo 0.74.3

hugoのインストール

パッケージ管理にHomebrewを使っているので、HomebrewからHUGOをインストールします。

$ brew install hugo

インストールされたものを確認します。

$ which hugo
/usr/local/bin/hugo
$ hugo version                                                                                                                                          develop
Hugo Static Site Generator v0.74.3/extended darwin/amd64 BuildDate: unknown

無事にインストールできました。

サイトの作成

ブログになるサイトを作成します。

$ hugo new site blog
Congratulations! Your new Hugo site is created in /Users/nkmlab/src/github.com/nkmlab/blog. 

Just a few more steps and you're ready to go: 

1. Download a theme into the same-named folder. 
   Choose a theme from https://themes.gohugo.io/ or 
   create your own with the "hugo new theme <THEMENAME>" command.        

2. Perhaps you want to add some content. You can add single files  
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

テーマの設定

HUGOには公式で数多くのテーマが公開されています。
ブログ用途のテーマも沢山あります。
自作することも可能ですが、僕は公式のQuick Startでも使用されているAnankeを選択しました。

Quick Startではテーマの適用にgit submoduleコマンドを使用していますが、Anankeの紹介ページではHugo Moduleを使うことが推奨されています。
折角だから推奨されている方法で設定することにしました。
ここですごくハマりました。

公式では以下のようにconfig.yamlに追加するように説明されています。

theme:
  - github.com/theNewDynamic/gohugo-theme-ananke

デフォルトで作成されたconfigはtoml形式なので、この方法を読み替える必要がありました。
まずHugo Moduleを初期化し、モジュールを追加します。

$ hugo mod init blog
$ hugo mod get -u github.com/theNewDynamic/gohugo-theme-ananke

ルートフォルダにgo.modとgo.sumファイルが生成され、gohugo-theme-anankeの情報が追加されました。
次にconfig.tomlでgohugo-theme-anankeのパスを通します。

[module]
[[module.imports]]
path = "github.com/theNewDynamic/gohugo-theme-ananke"

これでテーマが参照できるようになります。
大人しくgit submoduleでやった方が時間は掛かりませんでしたね。

ちなみにgit submoduleの方法ではconfig.tomlに以下のようにテーマを設定するのですが、hugo modで追加する場合は必要ありません。
逆にエラーになるのでご注意ください。

# hugo modの場合だとエラーになる
theme = "ananke"

コンテンツファイルの追加

ブログの記事となるコンテンツファイルを追加します。
hugo new <filename>で作成することが可能で、作成されたファイルは/content/ディレクトリに出力されます。

ファイル名は任意ですが、命名規則を予め考えておいた方がよいです。
僕はとりあえず年月日＋連番(YYYYMMDDnn)の10桁の数字にしました。
DNSゾーンファイルのバージョン管理で推奨されているシリアル番号のルールです。

$ hugo new post/2020091201.md

contentの下にpost/2020091201.mdが作成されました。
作成された記事です。

---
title: "2020091201"
date: 2020-09-12T22:49:03+09:00
draft: true
---

Front Matterというコンテンツファイルのメタ情報が自動生成されています。
/archetypes/default.mdを基準に作成されるので、追加したいメタ情報がある場合はdefault.mdを変更した上で、実行しましょう。
すでに作成済みの場合は対象になりませんので、個別で記事側に設定を追加してください。

ここにマークダウンで記事を書いていきます。とりあえずHello hugoを追加しました。

---
title: "2020091201"
date: 2020-09-12T22:49:03+09:00
draft: true
---

Hello hugo

ローカルサーバで記事の確認

作成した記事はローカルサーバを実行してブラウザで確認することができます。
コマンドを実行してローカルサーバを起動します。

$ hugo server -D

http://localhost:1313にブラウザでアクセスするとサイトが表示されます。

ローカルサーバを実行したまま記事を編集すると、ホットリロード機能で自動で更新されていきます。
CSSなども即時反映されますので、ローカルサーバを起動したまま作業するととても捗ります。

静的ページをビルドする

記事の作成が終わったらメタ情報のdraftをfalseに変更して、ビルドを実行します。 /public/配下に静的ページが生成されます。

hugo -D

これを本番環境にデプロイして外部公開します。

まとめ

HUGOを使用してブログサイトを構築しました。
とても簡単にサイトが作成できました。
記事の追加も簡単です。
これからこのサイトにバシバシ記事を追加していきます。
次の記事ではテーマをカスタマイズしていきます。

hugo