Hugo + GitHub Pages で新ブログを開設した話

2016-11-23 (updated: 2017-04-11)  #お知らせ  #Hugo 

告知です.

筆者は長らくはてなブログ上で『0番染色体』というブログを運営してきましたが,この度新しく本『ラング・ラグー』というブログを開設し,今後はこちらをメインブログとして活動していくことにしました.旧ブログ『0番染色体』は削除こそしませんが,今後新たな記事を更新することはもうないと思います.というわけで,これからは新ブログ『ラング・ラグー』をよろしくお願いします.

以上です.

……と,ここで記事を終えても良かったのですが,今回新たに構築した独自のブログシステムがなかなか便利だったので,以下その話についてグダグダと語ってみることにします.

動機

元々使っていたはてなブログなのですが,機能(できること)的にはまず文句がありませんでした.しかし,執筆環境として最高だったかというと,少し不満な部分があったことは否定できません.そのうちいくつか代表的な例を挙げるとすれば

  1. プレビューや投稿を行うには Web システムを経由する必要がある1
  2. markdown 記法はあるが,記法が独特(特に MathJax 関連がつらい)
  3. 課金しない限り広告やキーワードリンクを除去することができない

あたりでしょうか.特に,1. の制約のためすべてをコマンドラインで完結することができないのに,2. にあるように最も一般的なマークアップ手法である markdown を利用してもなお記法が独特なので,オフラインでは本番環境でのレンダリングを再現することが困難であるという問題が大きかったです.

さらに,個人的には「はてなアカウント」は一度登録すると二度と変更できない点も不満でしたし,生物系の内容よりも某言語に関する記事の方が多く,筆者の興味も分子生物学から某言語処理に移行しているのに,いつまでも『0番染色体』という名前のブログを更新し続ける違和感というのもありました.

そういうわけで,はてなブログ外に新しいブログ環境を用意しようという発想に至りました.

静的サイトジェネレータ Hugo

日本で技術系のブログを書くのに適したブログサービスといえばまず「はてなブログの独壇場である」という認識だったので,新ブログは既存のサービスを利用せず独自に構築する必要があることは最初から感じているところでした.

その方針で最近の便利なフレームワークを調査してみると,ここ1, 2年は Hugo という名の Go 言語製の静的サイトジェネレータが一世を風靡しているということがわかりました.相当に流行っているようで,解説記事が乱立して玉石混淆となっていますが,個人的には以下の記事が比較的よく情報がまとまっていてわかりやすかったかなと思います.

上記を見ながら色々とセットアップをしつつ,それでもわからない細かい情報は公式サイトから入手するという形でブログを構築したところ,骨組みは1時間とかからずに用意できてしまいました.

その上で,少し独自のカスタマイズも実施しました.具体的には

  1. シンプルで使いやすそうに見えた Angel’s Ladder というテーマを導入
  2. highlight.js2MathJax を自分で設定し,レイアウトもちょっといじる
  3. Google アナリティクスTwitter カード の設定を追加

ということをしました.いずれも公式のリファレンスが充実していましたし,他にも文献が豊富にあるのでそれほど困ることはなかったです.

Hugo の強みとして「(Go 言語製なので)生成速度がそれまでの競合プロダクトよりも早い」ということが盛んに歌われていましたが,そもそも静的サイトジェネレータを初めて使用した私にとっての感動ポイントはむしろ以下のような点でした:

  • ローカルで完璧に本番環境を再現できる
  • 特にhugo server-wオプションをつければ変更をリアルタイムに反映できて便利
  • レイアウト等は何でも自由に設定できる(唯一の制約は静的コンテンツということ)
  • 記事生成時のテンプレートやポスト先 URL も柔軟に変更可能

これで初めに挙げたはてなブログでの不満点はすべて解消した上,記事生成時の作業一切を自動化できました.なおかつ,これらの設定かかる時間がすべて合わせても数時間に収まったので本当に最高でした.

GitHub Pages でホスト

さて,コンテンツが用意できたので,次なる検討項目はホストサーバです.最初は筆者が個人的に利用している VPS でホストすることも考えたのですが

  • サーバが安定している
  • 圧倒的に文献が多い
  • 更新管理が簡単

という理由で,今回は GitHub Pages を採用することにしました.この件についても解説記事が乱立していますが,GitHub Pages 自体を使ったことがない私にとっては,状況が完全一致している以下の記事におんぶに抱っこという体で必要な設定を行うのが大変楽でよかったです.

そして,最後に独自ドメインを導入しました.ここは少々厄介でした.というのは

  • 常時 SSL 化
  • サブドメインだけ GitHub Pages にマップ

というちょっと特殊なことをやろうとしたからです.いずれかの条件を緩められるのであれば話は簡単だったと思います.とりあえず,GitHub Pages で HTTPS を使う日本語文献があまりないですが,以下を参考に色々頑張ったら何とか思い通りに設定できました.

さらなる作業の効率化

Hugo + GitHub Pages というだけでかなり作業は効率化されているのですが,例えば

  1. 新規記事作成
  2. プレビュー
  3. 新規記事投稿
  4. 記事の更新

において叩くコマンドは決まっています.なので,これらの操作をシェルスクリプトでまとめておくとさらに作業を効率化することができます.すべてをコマンドラインでこなせることの最大の強みはここにあると言っていいでしょう.私は以下のような zsh の関数を雑に実装して利用しています(恐らく使っているうちに随時更新することになります).

おわりに

最初の投稿にしていきなり自分ではほとんど具体的な解説を書かずに,参考 URL ばかり書き並べてしまいましたが,とりあえずやったことは概ねすべて網羅しました.

とにかく,いま私はとても幸せです.はてなブログから乗り換えて,本当に良かったと思っています.今後も必要に応じて随時利便性を向上させていくつもりです.

新しく便利で機能豊富なブログ環境ができたので,今度は執筆意欲も湧いてきました.これからもニッチで誰の役に立つのかわからないが,とりあえずココにしかないというような情報をたくさん提供していけたらなと考えています.

ということで,新ブログ『ラング・ラグー』をどうぞ何卒よろしくお願いします.


  1. 一応はてなブログ AtomPub という API が存在するのですが,機能が少なく,私には実用できる代物とは思えませんでした. ↩︎

  2. Angel’s Ladder には highlight.js が元々組み込まれていましたが,そのままでは使用可能な言語が少なかったので(特にアレ言語のシンタックスがないのは致命的)独自で高機能版を設定し直しました. ↩︎