R.K.S. notes

Migrate R.K.S. website to hugo

5 min read

これまで RKS web (Mkdocs) というサイトと RKS blog (Pelican blog) というブログサイトを別々に作成していて， 用いるソフトウェアも異なるから管理が面倒だったので，Hugo という Static site generator (SSG，静的サイトジェネレーター) に移行した． PelicanやMkdocsに比べて自由度が高いがためにいくらか勉強＆試行錯誤が必要だったので，このサイトで行った設定なんかを書き留めておく．

Hugo がどのようなものかは，ウェブサイトなどで書かれているので省略．

目的＆条件としては，以下のようなことを考えていた．

  • Markdownで記事を書くことができる
  • 時系列的なブログと，内容に応じてカテゴリされるような静的ページを扱える
  • 見た目の良いテーマが存在する

なので，Hugoの特徴であるサイト構築のスピードなんかはあまり気にしていなかった．

テーマ（Theme）--- LoveIt

まずは，大まかにどのようなテーマが良いのかを ココ から探し，インストールする． このサイトでは，LoveIt というテーマを採用している．インストール方法は簡単なので省略．

カスタマイズ

テーマをインストールしてそのまま使おうとすると，いろいろと思い通りにならないので，ここから自分用にいくらかカスタマイズしたことを書いておく．

ディレクトリ構造

Hugoではcontent/ディレクトリ以下の階層に置かれた.mdファイルがそれぞれウェブページとして変換される． このサイトでは，以下のようなルールとした．

  • content/posts/： ブログポスト．各記事はposts/2022/01/12_hoge.mdのように年と月のディレクトリの中に保存した．
  • content/pages/： ブログ以外の静的な記事．これ以下はディレクトリ分けはせず，frontmatterの categories に分類を記入する．
  • content/about/： 自己紹介関連記事

各ページのレイアウト

Hugoでは，content/直下のディレクトリを「Section」と呼び，それより下にあるディレクトリとは区別する．また，.mdファイルを「Page」と呼ぶ． SectionやPageのレイアウトは，Hugoが指定した順番でレイアウトテンプレートファイルを探し出して，それを変換してHTMLファイルを生成する． LoveItテーマの場合，theme/LoveIt/layouts/以下にすべてのレイアウトテンプレートファイルが収められているので，それらをルートの layouts/ にコピーして必要なところを変更する．

  • ホームページに関しては何かを書き換えることはしておらず，config.tomlでカスタマイズできることのみ．
  • Blog postsのSectionに関してはデフォルトより多くのポストを一覧表示するため，config.toml内の[params.section]内の paginate と rss を 100 に設定した．

メニューバー

サイドバーからは，pages/about/about.mdへのリンクや，categories, tags, posts のリストへのリンクを置くため，config.toml内で以下のように記述した．

[menu]
  [[menu.main]]
    identifier = "about"
    pre = ""
    post = ""
    name = "About"
    url = "/about/about"
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "posts"
    pre = ""
    post = ""
    name = "Blog posts"
    url = "/posts/"
    title = ""
    weight = 3
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 10

カテゴリリストの align 設定

All Categoriesを表示するページのカテゴリリストの上下のalignだけは，layouts/ 内を変更するのでは対処できなかった（CSSを変更する必要がある）ため，theme/LoveIt/assets/css/_partial/_archive/_terms.scssを直接編集し， .categories-card 内の align-items: を center から top に変更した．

結論

Hugoは拡張性が高いために最初はとっつきにくいが，ちょっとドキュメントを読んで理解するとちょっとしたカスタマイズはまぁまぁ簡単にできる． テーマを作りたいとか言い出すと難しいかもしれないが，既存のテーマに少し手を加えてオリジナルのページを作るのには良いシステムだと思った．

Graph View