PelicanからHugoへ切替

なんだか頻繁にBlogの生成システムを切り替えているように思うのだが、前回「Python 3.7で使えればしばらく安心だろう。」とか書いておいて、実際運用を始めたら、Python+node.jsでの運用になってしまい、結構煩わしい状態になってしまった。あと私の運用が上手くなかったのか、Themeの運用で適当に直接設定しまくったら、Themeの更新がおっくうになったというのも今回の話の発端である。

前回の変更は2020年12月30日の記事に詳しいが、PythonでPelicanを使うと言う選択をしたのであった。当時は当時で結構考えて選定したつもりであるが、よく考えると・・・

  • Pythonは会社でお仕事に使っていることもあって、やっぱり精神衛生上気分が落ち着かない。
  • そもそもPythonが好きではない

と割と否定的だったところもあった。

それとは関係なく、最近Goに少し興味があり、ふと自宅のFreeBSD環境にGoを入れてみようと思い立ち、ちょっと調べたら処理系が簡単にインストールができたので、しばらく使ってみようという気になったのである。Go言語の公式Webサイトから処理系をダウンロードして展開すればうちの環境(FreeBSD 12.2-RELEASE)では特に何もすることなくコマンドにパス通せばそのまま使える。またその上で、処理系のソースを持ってきてビルドも行ってみたがこれも特に問題なくビルドできたので、今のところ難しい問題は無さそうである。

またSite Generatorを使うと言う路線は変わらず、処理系にGoを用いると言うことで、必然的にHUGOを選択することとなった。

今回の作業の要点は

  • HUGO自体は見た目は1つのコマンドなので、ビルドさえできればあまり気にせず使える。
  • Markdownで書いた記事の見直し
    • 複数のTagを付けている物の体裁を整える(括弧やクォートを付け直す。前回外したんですよね・・・)
      と言うところか・・・ テーマはいったんMainroadを使うことにする。

インストールの方はこんな感じである

まずHUGOのインストールから。HUGOの公式サイトHugo ReleaseにはFreeBSD版も置いてあるのだが、残念なことにextended版ではなくノーマル版のバイナリしか置いてない。テーマによってSass/SCSSを要求してくることがあり、extended版の方が使い勝手が良いので、ビルドする必要がある。うちのシェルはzshなので、こんな感じ。

% mkdir src
% cd src
% git clone https://github.com/gohugoio/hugo.git
% cd hugo
% CGO_LDFLAGS=-lm go install --tags extended

このように実行するとhugoコマンドが~/go/binにインストールされる。ここでCGO_LDFLAGSを設定したのはlibm関係のリンクが出来ず、リンクで落ちたため。まあ調べりゃ分かる物は適当にやりましょう。

ここからはBlogの生成作業環境の作成である。

% hugo new site blog
Congratulations! Your new Hugo site is created in /home/hogehoge/src/test.

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.
%

という感じで最低限の環境が生成される。実際のユーザー名や公開時のファイルの置き場は適当に読み替えること。処理の結果このようなTreeができあがる。

blog
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

新しくできあがったディレクトリに移動して、Themeをインストールする。Mainroadのサイトを見に行ってこんな感じで行えば良い。

% cd blog
% git init
% git clone https://github.com/vimux/mainroad.git themes/mainroad

contentディレクトリにBlog記事の元になるMarkdownファイルを入れ込めば良いので・・・ 実際にやるとこういう風になる。

ざっくり初期設定を行う。

baseurl = "https://example.org/"
title = "Blog title"
languageCode = "ja-jp"
hasCJKLanguage = true
summaryLength = 200
paginate = "10" # Number of posts per page
theme = "mainroad"

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      hardWraps = true

[Author]
  name = "This blog Auther"
  bio = "test"
  avatar = "asset/avatar.jpg"

[Params]
  description = "test"
  opengraph = true
  twitter_cards = true
  readmore = true
  authorbox = true
  pager = true
  post_meta = ["date", "categories"] # Order of post meta information
  mainSections = ["posts"]
  dateformat = "2006-01-02" # Change the format of dates
  mathjax = true # Enable MathJax
  mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path
  mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specif MathJax config

[Params.style.vars]
  highlightColor = "#00007F"
  fontFamilyPrimary = "'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo'"
  fontFamilySecondary = "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"

[Params.logo]
  image = false # "img/placeholder.png" # Logo image. Path relative to "static"
  title = "Blog title"
  subtitle = "Test site" # Logo subtitle

[Params.sidebar]
  home = "right"   # Configure layout for home page
  list = "left"   # Configure layout for list pages
  single = false # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "social", "categories", "taglist"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  categories_counter = false # Enable counter for each category in "Categories" widge
  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

[Params.widgets.social]
  # Enable parts of social widget
  facebook = "username"
  twitter = "username"
  instagram = "username"
  linkedin = "username"
  telegram = "username"
  github = "username"
  gitlab = "username"
  bitbucket = "username"
  email = "e-mail address"

[menu]
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = -110
  [[menu.main]]
    identifier = "gallery"
    name = "Gallery"
    url = "/gallery/"
    weight = -100

[permalinks]
  posts = '/posts/:year/:month/:filename'

[module]
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/photos'
  target = 'static/photos'
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/gallery'
  target = 'static/gallery'
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/_posts'
  target = 'content/posts'
blog
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └ posts -> /home/hogehoge/src/dabesa/_posts
├── data
├── layouts
├── static
│   ├── gallery -> /home/hogehoge/src/dabesa/gallery
│   └── photos -> /home/hogehoge/src/dabesa/photos
└── themes
    └── mainroad
        ├(以下略)

こんな感じになる。うちの運用ではコンテンツの中身は別のgit repositoryなので、これまでのStatic Site Generatorではコンテンツ置き場に必要なディレクトリをstatic linkしていたのだが、HUGOではstatic linkを扱ってくれないみたいなので、config.tomlの

[module]
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/photos'
  target = 'static/photos'
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/gallery'
  target = 'static/gallery'
[[module.mounts]]
  source = '/home/hogehoge/src/dabesa/_posts'
  target = 'content/posts'

で設定している。これで上手く行くようだ。

次にテーマ関係。テーマのカスタマイズは同じ名前のファイルをこんな感じでコピーしてから行えば良い。

% cp themes/mainroad/layouts/partials/mathjax.html layouts/partials/mathjax.html

上位のディレクトリに同様の構造でコピーすればそちらを優先的に読む設定のようだ。(故に管理しやすい。) 今回はMathJax関係の設定でカスタマイズを行いたかったので、こんな感じに書いてみた。

{{ if and .IsPage (eq (.Param "mathjax") true) }}
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ["\\(","\\)"]],
      displayMath:[['$$','$$'],['\\[','\\]']],
      processEscapes:true,
    },

    TeX: {
      equationNumbers:{
        //autoNumber:"AMS",
      },
      //TagSide:"left",
      //TagIndent:"1em",
      Macros:{
        // discribe macros
      },
    },
  });
</script>
<script src="{{ .Param "mathjaxPath" | default "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" }}{{ with .Param "mathjaxConfig" | default "TeX-AMS-MML_HTMLorMML" }}?config={{ . }}{{ end }}" async></script>
{{ end }}

おおむね設定はこれでおしまいだが・・・Hugoのサブコマンドを覚えていられないし、面倒なので・・・

deploy用のシェルスクリプトとして、

#!/bin/sh
hugo && rsync -avzH --delete public/. /home/hogehoge/web/.

を準備。またhugo server用のシェルスクリプトとして

#!/bin/sh
hugo server --bind=192.168.0.2 -p 1313 --baseURL http://192.168.0.2

と言う風に書いておけば良さそうである。(ディレクトリやアドレスは適当に書き換えること。)

私が今使っている環境はローカルマシンではなくリモートマシンなので、hugo serverで状況を確認するにはIPアドレスを指定する必要がある。hugo serverを実行するときにアドレスのbindとそれに伴うbaseURLを書き換えるシェルスクリプトと、deployするために、記事を書いたらHTML等をGenerateしてWebサーバ上の見えるところにrsyncするスクリプトにしておいた。ちょっと転送に時間がかかるが複数のPCでサイト生成出来るようにするには、rsyncはssh経由の方が良いかもしれない。

いったんこんなところか・・・しばらくこれで運用することにする。