Hugoで快適な執筆環境を整える話。

経緯

自宅鯖がお釈迦になった話

3年くらい前、自宅鯖でブログやってた頃はWordPressを使ってブログを運営していた。

しかしある時バックアップに失敗(ddの引数をミスった)、記事が全て吹き飛んだことがある。

この事件より少し前にOSイメージごとバックアップをとっていたので、全ての記事が吹き飛んだわけではないが、 WordPressの都合上記事データはDB上で管理されているので復旧が面倒 →そのまま放置する流れに。

どういう風の吹き回しか今になってようやく一念発起して、今後の運用が楽になるよう、そもそもの構成を変更した。という経緯。

技術選定

今の所自分がブログに対してMustに感じる要素として、

  • 記事はMarkdownで書けること
  • GitHub上でバージョン管理できること(DBや画像等バイナリはのっけたくない)
  • 好きなエディタで書けること

があった。

Mustというほどでもないけど、

  • 無料枠に限りのあるサービスにできる限り依存したくない

という願望もあった。

以上を踏まえて、以下のような構成にした。

構成

  • hugo: go製の静的サイトジェネレータ
  • nginx: webサーバ
  • Github Actions: pushにフックしてbuild後、public/配下をラズパイにrsyncする
  • Raspberry Pi 3 Model B

蛇足だけど、 最近、半導体不足の影響でラズパイが全然手に入らないっぽい。そろそろラズパイ3の寿命も近いと思うので、 もう少しだけ頑張ってほしい

sequenceDiagram actor reader participant Local Device participant github participant Raspberry Pi Local Device->>github:push github->>github:hugo build alt build successed github->>Raspberry Pi: rsync `public/` folder reader->>Raspberry Pi: http request Raspberry Pi-->>reader: http response else build failed break github->>github: log error end end

neovimで記事を書いてpushするだけで勝手にデプロイしてくれるので、すごく快適。

SSGなので表示も速い。

問題点

利用しているHugoテーマhello-friendをスマホ実機(iOS)で確認したとき、 navbar右側のアイコンがPCと同様の表示になっていることに気づく。(本当はレスポンシブ対応していてほしい)

どうやら直近のcss→scss移行の際にデグレしてしまっていたらしい。

PRを送ったら、即日マージされたので解決。

テーマの追従が面倒

テーマはthemeディレクトリ配下にsubmoduleとして配置しているが、 本家リポジトリをforkして色々手を加えてしまっているので、本家のアップデートに追従するのが面倒。

一応本家masterマージをgithub actionsで日次で自動で行うワークアラウンドがあるらしいが、conflictしたら面倒なので没。

テーマに直接変更を加えず機能拡張がしたいけど、なにか良い方法はないものか。

これからやりたいこと

(すでに実装したものもあるが)これから徐々に機能を充実させていきたい

  • 記事のサマリーが巨大なのでなんとかする
  • RSSフィードをマシにする
  • パーマリンク設定(記事名じゃなくて、ハッシュにしたい)
  • SEO関連
  • UML使えるようにする
  • TeX記法で数式書けるようにする
  • 生成されるリンクをデフォルトで別タブに
  • コードブロックのファイル名表示&行ハイライト&差分表示ハイライト
  • ReadingTimeのロジック見直し
  • Tagsセクション作成
  • 記事の全文検索をできるように
  • Google AdSense登録
  • asciidoc対応
  • markdown内での単一改行が半角スペースになるのを回避したい
    • →goldmarkのオプションで実現できるので、Hugo側の実装を待つ
  • 追従する目次作る
  • 各種shortcodes作る
    • infoやwarning等の脚注
    • ブログカード
    • GitHubリポジトリのカード