Blogger から Hugo に移行した話

2020-02-19

Page content

これまで割と長い間このブログはBloggerで運営していましたが、この度Hugoを使って GitHub Papes に移行しました。移行の理由ですが、特に Blogger 側の状況が悪くなった訳ではないです。ご覧の通りここ暫くこのブログは更新していませんでしたが、一方でここ最近Emacsのorg-modeを使って自分のために文章を書いています。そこで org-mode で書いた文章を上手く公開できないかと思いましたが、どうにも org-mode と Blogger の噛み合わせが良くなさそうです。そこで別の方法で blog を書こうと思い、爆速で動くらしい Hugo を採用しました。

そもそも Hugo とは

The world’s fastest framework for building websites (https://gohugo.io/)

Hugoは静的サイトジェネレータで世界最速らしいです。静的サイトジェネレータなので元になる markdown 等から html を生成しますが、これがとても速いです。また速いだけではなくテーマもかなり色々あるので、ブログ以外にも色々な用途に使えそうです。

なぜ Netlify ではなく GitHub Pages なのか

巷ではNetlifyが人気のようなので、最初はNetlifyを使おうと思いました。Netlify は技術的には良いですが、独自ドメインを使うのが前提となっている様な感じがします(直接割り振られるドメインは可読性が低いです)。わざわざただの技術ブログを独自ドメインで管理する必要もないかなと思うので、とりあえず自分の GitHub ID がそのまま使えるGitHub Pagesを採用しました。ちなみに GitHub Pages へのデプロイはGitHub Actionsを使っています。

具体的にどういうことを行ったか

具体的にどの様にブログを構築したのかを以下に書いていきます。

テーマの選定

まず始めに Hugo のテーマを選ぶ必要があります。ブログ用のテーマはここに色々あります。深い理由はないですが、今回はMainroadを選んでみました。

Hugo ではデフォルトで共有するボタンがないみたいです。なくても問題はないですが、個人的には Twitter に blog 記事を共有するときにこういうボタンがあると嬉しいのでaddThisを使って共有ボタンを付けました。addThis の設定方法はこのページを見るとわかるので省略します。共有ボタンを普通に記事の上下に設置することも、Floating で設置することもできます。

Disqus

Hugo は静的サイトジェネレータでサーバーサイドがないので、コメントを自前で用意できないです (多分) 。そのためコメント機能が欲しいときは外部サービスが必要になります。例えばコメント機能を追加するための外部サービスとしてDisqusを使うことができます。基本的にはHugoが公式にDisqusに対応しているので、Discus にアカウント作成をした上で、Hugo の設定ファイル (toml ファイル等) に disqus の short name を設定すれば動きます。詳しい設定方法は例えばここに書いてあります。

ox-hugo

実は Hugo は markdown ではなく org-mode を読み込むこともできるみたいです (Content Formats | Hugo) が、今回はox-hugoを使って、org-mode から Hugo 用の markdown に変換しました。詳しい設定方法は Org-mode で記事を書いて Hugo 向け markdown を ox-hugo で自動生成する話に書いてあるので省きますが、無事に単一ファイルから複数のブログ記事を生成できますし、書いている途中の記事はTODOにすることで draft にすることもできます。