Hugoでブログを作った話【前編】

WordPressからHugoに移行したのですが、その時の備忘録です.
前編はHugoの設定まで.

必要なもの

Githubのアカウント
セットアップ済みのWSL2
独自ドメイン(必要であれば)

HugoはGo言語で書かれていますが、Goの知識が一切ない私でも問題ありませんでした.
細かくカスタムしたいわけでなければ必要ないと思います.

Hugoのインストール

まずはHugoをUbuntuにインストール.

aptでインストールしても良いと思ったのですが, ここが罠ポイント.
最新のテーマの導入/更新について行けない(らしい)ので, Githubから最新のdebファイルを持ってきましょう.

ファイルは2通りあり, 標準版と拡張版があります.
今回はSCSSを使っているテーマに対応している, extended版をDLしてinstall.

$ wget https://github.com/gohugoio/hugo/releases/download/v0.121.1/hugo_extended_0.121.1_linux-arm64.deb
$ sudo apt install ./hugo_extended_0.121.1_linux-amd64.deb

インスコ出来ているかチェックしてみます.

$ hugo version

バージョンが出てきたら成功.

テーマ選び

https://themes.gohugo.io/からお気に入りのテーマを選びます.
WordPressと比べると, どうしても数やカスタマイズ性には劣ってしまいますが, 一般的なブログを作るには十分なものは揃っています.
個人的には一番時間がかかった工程でした^^;

サイト作成

テーマはgit submoduleというgitのサブコマンドで管理するのが定石のようです.
その他hugoコマンドの詳細は公式のドキュメントやコマンドのヘルプをご参照ください.

$ hugo new site hogehoge
$ cd hogehoge
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke # 適用したいテーマのgithubのURLとthemes/<テーマ名>
$ "theme = 'ananke'" >> hugo.toml # anankeの部分は自分のテーマ名
$ hugo server # 開発用サーバを開始

http://localhost:1313/にアクセスし, 選んだテーマが表示されていればOK

また, 上記コマンドで生成したディレクトリの構成はコチラ

コンテンツの追加

新しいページを追加します. 注意したいのが, サイトの構成.
slugやディレクトリ構成をどうするか考えておかないと, 一貫性が無かったり煩雑なURLやディレクトリになってしまいます.

私の場合は見やすさと拡張性を考えてcontentディレクトリを以下のように構成することにしました.

my-site/
┣━content
┃　┣━categories/
┃　┣━page/
┃　┣━post/
┃　┃　┣━0001_first-post
┃　┃　┃　┗━index.md
┃　┃　┗━0002_second_post
┃　┃　　　┣━index.md
┃　┃　　　┗━image01.png
︙ 　︙

これに従うと, コマンドは以下のようになります.

$ hugo new content post/0003_third-post/index.md

すると, 指定した場所にファイルが生成されるので, あとはFrontMatter部分と本文を書くだけです. なお, このFrontMatterのテンプレートは, archetypesディレクトリのdefault.mdを編集することで自由に設定できます.

サイトのカスタム

サイトの基本的な設定はhugo.tomlで行います. yamlの方がいい場合はhugo.yamlに変えれば勝手に読み込んでくれます.
昔はconfig.yamlだったようです.

テーマによって詳細は異なるようですが, 重要そうなところは以下のように設定しました.
ここらへんは公式やテーマのドキュメントを見たほうが良さそうです.
あとは好みの問題ですね.

baseurl: https://tsolsikke.jp
theme: ananke
languageCode: ja
︙
DefaultContentLanguage: ja
︙
permalinks:
    post: /p/:slug/
    page: /:slug/
︙
params:
    dateFormat:
        published: 2006年 1月 2日
        lastUpdated: 2006年 1月 2日
︙

ちなみにこれらの変更は, 先程のコマンドhugo serverでリアルタイムに確認できます.
記事のdraftがtrueになっている場合でも, hugo server -Dで見えるようになります. 便利!!

少し長くなったので, 続きは後編へ