Qiita とはてなブログの記事を Hugo を使って一つに集約してみたのでやったことのメモ。

header

やったこと

エンジンの選定

静的サイトジェネレータといえば Hexo と Hugo のどちらかになりそうなところですが、今回は両方共試した上で、ビルド時間の早い Hugo を選択することにしました。

もう一つの選択としては Nuxt.js でセコセコ仕組みから準備をしていこうかとも考えましたが、時間もかかるしだるいので今回は採用を見送りました。

サーバーの選定

極力面倒なことはしたくなかったので Hugo と相性の良さそうな Netlify を採用しました。

テーマの準備

ブログの記事を移行する前に、まず良さそうなテーマを探すところからはじめました。結論から言うと下記のテーマを使わせていただいております。 もとは Hexo 向けに作成されたテーマですが Hugo 向けにポートされているようです。

なお、使用するにあたって幾つか PullRequest を送って機能を改善することを行っています。

はてなブログの記事を Markdown に変換

地味に効いたのがこれ。便利なはてなブログ専用のタグを結構使ってしまっていたので、記事をコピーして持ってくるのに加えて、ネイティブな Markdown に落とし込む作業が発生しました。とは言え、そんなに記事数もなかったですし、なんとかなりました。

Qiita の記事を Markdown に変換

こちらはほとんど素の Markdown で構成されているので基本的に記事のコピペですみました。Qiitaスライドみたいな便利機能も使っておらず、投稿数もそんなに多くないので(以下略)

結果どうなったのか?

得たものたち

  • SSL化、HTTP/2化
  • コンテンツの軽量化
  • 柔軟なカスタマイズ性
  • 好きなエディタを使って更新できる環境

静的サイトになり、HTTP/2 で通信するようになったので、基本的に表示速度は体感すごく早くなったと思います。多分。(コンテンツが間に合っているかはさておき。)

最初 CloudFlare を併用していましたが、 Netlify の公式ブログによると CDN を噛ませる必要はないということだったので一旦外して見ています。これにより Netlify 提供の Let's Encrypt が使えていい感じになりました。

あとは好きに JavaScript を書いたり CSS を書いたりできるのでプラットフォームの制約を受けることなくいろんな拡張ができるのではないかなと思っているところです。

失ったものたち

  • スマートデバイスからの更新機能
  • プラットフォームの提供する便利機能

一方でスマートフォンから更新できなくなったり、予約投稿機能がなくなったりしました。基本的にこれらは個人的には使っていないものだったので大した問題にはならないのですが、シェアボタンの種類が減ったりとか、リンクをカード風に表示する機能がなくなったりしたので見た目的になんとかしないとなぁというところは課題となりました。

これからの方針

はてなブログと Qiita の記事を移行しましたが、もとの投稿自体は消さずにそのまま置いておくことになるのかなと思います。とはいえせっかく移行したので、基本的にはこちらを更新して行こうかなと言う気持ちでいますが、Qiita に投稿したい気分とかもありそうなので、そこは柔軟にやっていこうかなと思っています。


関連リンク