今までブログを書くのにはてなブログを利用していたが、 せっかく独自ドメインをとったし何か自前のブログを持ってみたいと思った。

WordPressはDB必須でデプロイが面倒そうだったので、 静的サイトジェネレータでは割と有名なHugoを使ってみる。

準備

hugoコマンドのインストール

Hugoはhugoという単一のコマンドを使って記事の追加・ビルド等を行う。 よってまずはhugoコマンドをインストールする必要がある。

参考: Quick Start | Hugo

ArchLinuxの場合、hugoは公式リポジトリに存在する。

1sudo pacman -S hugo

サイトの作成

1hugo new site myblog

これでmyblogディレクトリに必要なファイルが準備される。

Clarityのセットアップ

この後、Quick Startガイドに従うと、gitのsubmoduleとしてテーマをインストールするのだが、 テーマによっては全く別のインストール方法を用いる必要がある場合がある。

今回用いる「Clarity」というテーマは、Hugo modules(go moduleを活用した方式)を使ってのインストールが推奨されている。

参考: Getting up and running | chipzoller/hugo-clarity

goのインストール

Hugo modules(hugo mod)を用いる場合、golangのインストールが必須となる。

1sudo pacman -S go

設定ファイル・雛形の取込み

ClarityではexampleSiteの設定の取込みが必須となっている。 (最初、設定を取り込まずにセットアップしてしまったのだが、Code Blockの表示に不具合が生じた。)

1cd myblog
2hugo mod init myblog
3wget -O - https://github.com/chipzoller/hugo-clarity/archive/master.tar.gz | tar xz && cp -a hugo-clarity-master/exampleSite/* . && rm -rf hugo-clarity-master && rm -f config.toml

なお、これにより、config.tomlがconfig/_default以下に移動するので注意。

テーマのインポート

themeの参照先をローカルでなくGithubに設定する。

config/_default/config.tomlで以下のように設定。

1# theme = 'hugo-clarity'
2theme = ["github.com/chipzoller/hugo-clarity"]

その他設定の変更

config.toml

baseurl, copyright, 言語を変更する。

 1# set `baseurl` to your root domain
 2# if you set it to "/" share icons won't work properly on production
 3baseurl = "https://blog.grainrigi.net/"  # Include trailing slash
 4# title = "Clarity"  # Edit directly from config/_default/languages.toml # alternatively, uncomment this and remove `title` entry from the aforemention file.
 5copyright = "Copyright © 2022, grainrigi; all rights reserved."
 6
 7# (中略)
 8
 9DefaultContentLanguage = "ja"
10
11# (略)

language.toml

en -> jaに変更、ptを削除

1[ja]
2  title = "Arch使いの日記"
3  languagename = "japanese"
4  weight = 1

menus

menu_en.tomlをmenu_ja.tomlに移動する。 menu_pt.tomlは削除。

ロゴ

static/logos/logo.pngを置き換えるか、削除する。 削除した場合は、titleに設定した文字列が代わりに表示される。 (ただ、これはimgのaltが表示されているだけなので何かしらタイトル画像を作成することを推奨)

記事の作成

準備が終わったので記事を作ってみる。 まずはhugo newコマンドで空の記事を作成する。

※ Clarityの場合、postsではなくpostを使用する。

1hugo new post/my-first-post.md

すると、以下のようなファイルが作成される。

1---
2title: "My First Post"
3date: 2022-11-12T19:19:11+09:00
4draft: true
5---

---で囲まれた部分はメタデータなので、その下にMarkdownで記事を記述すれば良い。

作成した記事のプレビュー (Hugo Server)

hugo serverをコマンドを使うことで、ローカル環境でサイトを見ることができる。

1hugo server -D

-Dをつけるとdraft: trueの記事も一覧に表示されるようになる。 逆に、draft: trueの記事はproduction buildだと一覧には表示されない。

その他のメタデータ(タグ、カテゴリ等)

Clarityは記事にタグやカテゴリをつける機能がある。

1---
2title: "My First Post"
3date: 2022-11-12T19:19:11+09:00
4categories:
5  - 備忘録
6tags:
7  - hugo
8---

カスタムCSS

assets/sass/_custom.sassにカスタムCSSを書くことが可能。

コードブロックの直後に見出しをおいた場合に隙間が狭く感じたので今回はそれを修正してみる。

以下のようにオフサイドルールを用いたsassを記述する。

1.highlight_wrap
2  &+h1, &+h2, &+h3, &+h4, &+h5
3    margin-top: 30px

デプロイ

hugoコマンドを実行すると静的ファイルが生成される。

 1$ hugo
 2Start building sites … 
 3hugo v0.105.0+extended linux/amd64 BuildDate=unknown
 4
 5                   | JA  
 6-------------------+-----
 7  Pages            | 25  
 8  Paginator pages  |  0  
 9  Non-page files   |  0  
10  Static files     | 62  
11  Processed images |  0  
12  Aliases          | 17  
13  Sitemaps         |  1  
14  Cleaned          |  0  

あとは./public/以下のファイルを適切に公開すればデプロイ完了となる。

まとめ

今回はHugoを使ってブログを作成してみた。

Hugo用のテーマはブログテーマであってもシンプルで機能の少ないものが多いのだが、 Clarityはタグやカテゴリ等の機能が充実しているのでブログを作るのにはかなり便利に感じた。