ブログをMediumからHugoに移行した

2020/09/24

きっかけ

今まで基本的にTwitterの140文字に収まらないような文章はすべてMediumに書いていた。

しかし、個人サイトについてという記事を読んで自分で書いたものを自分で制御できるというのは大事なことだなぁと思い直し、引っ越しをを考えた。

もともと、Mediumもそこまで気に入ってたわけではなく、不満点がいくつかあった。

じゃあ自前で管理すればこの不満点も解消されるじゃん！となって移行のやる気が上がり決意を固めた。

Hugoという静的サイトジェネレーターに移行した。

静的サイトジェネレーターというのは、あらかじめ全記事のファイルを生成しておいて、どこかのサーバーに乗せるだけで動くというやり方のツールで、記事を書いて載せるだけの個人ブログなんかには適している。

静的サイトジェネレーターにはたくさん種類があるけど、とりあえずHugoを選んだ。ここはかなりポイントで、単純なファイルとして管理できることが大事なのであって、どのジェネレーターを選ぶかは重要ではない。 多分Gatsbyでもjekyllでもほぼ同じことは実現できるので、好みでいいと思う。

生成したファイルを置くサーバーも特にこだわりはなく、よく使われるNetlifyを使った。

medium-2-md というツールを使ってMediumの記事をすべてmarkdownに変換して、Hugoに読み込ませた。

また、画像はすべてMediumのURLになったまま埋め込まれていた。Mediumが生きている間はいいがこれでは完全にMediumから移行したとはいえないのでなんとかしたい。

HugoではPage Bundlesという機能でmarkdownと同じ階層に画像を配置できる。したがって、MediumのURLになっている画像をダウンロードして、同じ階層に配置してパスも一括で置き換えてしまえばよいと考えた。

たとえばこのような画像埋め込みが
![](https://cdn-images-1.medium.com/max/800/0*ZW4V3eAqhls4zPKy)


このようになればOK
![](./0*ZW4V3eAqhls4zPKy.png)

一定の規則通りにダウンロードして配置してURLを変換していくだけなので、プログラムを書けば自動化できる。たとえばこんな感じで。

基本的な文字やリンクはきれいに変換できてたが、次のような要素がうまく変換できていなかった。

まぁ、埋め込みは過去の記事でもそこまで多用してないので、見つけ次第手で直していくでいいか・・となった。

上にあげたMediumの不満点はすべて解消された
- 最高！！！！！！！
記事データのportabilityが高まった
- ただのmarkdownと画像ファイルの集合なので、簡単にバックアップできるし、最悪Hugoやサーバーがなくても読める
自己紹介サイトと統合できた
- 静的サイトジェネレーターは自由度が高いので各種ページのデザインなども基本すべて自由にいじれる

Mediumの不満点が解消されて最高！！…ではあるが、もちろんデメリットもあった。

TwitterやYouTubeの埋め込みがMediumのようにきれいに表示できない
- Hugoの拡張機能を頑張って探せば可能そうだが、そうなるとまたHugo依存が激しくなりportabilityが落ちると思ったのでやらなかった
markdownを快適に書く環境を整えなければならない
- ちゃんとしたブログサービスのような管理画面は一切ない。ローカルで何かしら頑張ってmarkdownを書いて、git pushで公開する
Web系全般のさまざまな知識が必要
- 見た目を整えたかったらHTMLやCSSまたはHugo特有のカスタマイズを勉強が必要
- サーバーに設置するためにgitやホスティングサービスの勉強が必要

静的サイトジェネレーターは自由度は高いかわりにMediumのようなサービスがやってくれていた部分の多くを自分でやらないといけなくて大変。追加したい機能があるなら、自分でプラグインを探すなり、プログラムを書くなりして頑張ってねって感じ。

まぁこういうWebサイトをあちこちいじくり回すのが半分趣味みたいなもので、大変だけど楽しい…そう感じられる人にはおすすめしたい。逆に、そんなことやってられないわ！純粋に文章を外に発表したいだけなんだが！って考えの人ははてなブログやnote.comを使ったほうがいい。