黒歴史ブログをMarkdownに一斉変換し、Docusaurusサイトにした話

「自分で書いたハウツー系ブログが検索妨害をしている」という状況に誰もが遭遇するだろう。…うん、遭遇することにしてくれ。

で、それを「誰でも編集できるようにして、情報を失うことなく検索妨害でなくする」方法として、「MarkdownにしてDocusaurusサイトに変換」 を提案する。なお、Docusaurusのレポジトリ内に記事を配置することになるから、あなたの記事はMITライセンスで配布せざるを得なくなることに注意。 Docusaurusとは Facebookがオープンソースで開発してるドキュメントサイト作成ツール。 詳細: https://docusaurus.io

ナポアンのマイクラをDocusaurusに変換した

何の予告もなく閉鎖してしまい、大変ご迷惑をお掛けしたが、「ナポアンのマイクラ」は大部分を「アソビノン」に移行した。

これと同じことをするには、

1. 画像をレンタルサーバーから何かしらのCDNに移行
2. もう一回サイトをWordPressに
3. 全部の記事をMarkdownに変換
4. GitHubかなんかに公開する」

必要があるんだが… 簡単に説明していこう。

手順

1. まずははてなブログにバックアップしよう

WordPressからMarkdownに変換する方法はいくらでもある。

が、変換する前に、 とりあえずはてなブログにバックアップする ことをおすすめする。なぜなら、はてなブログには手厚いMarkdownサポートが備わっており、万が一の時に変換したMarkdownをそのまま使えるからだ。

さらに、移行した画像が自動ではてなフォトライフ(おそらくS3)にコピーされ、順次srcが置換されるので、「どんなプラットフォームに記事を移しても、はてなをCDN代わりにして画像を配信できる」のである。なおフォトライフは別にはてなブログ専用ではないので、この使い方は全く利用規約の範囲内である。

2. はてなブログからエクスポートしてWordPressに

バックアップのはてなブログから、MovableType形式のテキストファイル(はてなフォトライフに変えたテキスト)をエクスポートする。

しかしこの1つのファイルから、バラバラのMarkdownを生成するライブラリが見つからなかった。ので、新しいWordPressをXAMPPかなんかで建てて、そこにはてなフォトライフに変えたテキストをインポートする。すると、どこにデプロイしても画像が表示できるWordPressサイトが出来上がる。

3. WordPressからMarkdownに

https://github.com/lonekorean/wordpress-export-to-markdown

で、WordPressからMarkdownを生成するライブラリがあるので、これで変換すればいい。

4. Docusaurusサイトを用意

https://docusaurus.io/

Docusaurusのインストールは省略する。必要なことは、生成したMarkdownをdocsに入れるだけ! 後はVercelなどにデプロイしよう。

俺が行った手順

実は「ナポアンのマイクラNEXT」という別サイトを運営しており、今回はここからMarkdownファイルを生成した。

「ナポアンのマイクラNEXT」はContentfulで動いており、react-markdownに無理やりHTMLを描画させるという手法で動いていた。

別にWordPressから生成してもよかったのだが、GCPで無理やり動かしており、REST-APIを呼びまくるのは不安だったのだ。

https://zenn.dev/sasigume/articles/991cde2ea63d19

「WordPressからContentful」の移行はこちらを参照してほしい。

次に、ContentfulからMarkdownファイルを生成しよう。

こちらはMadeByMike氏(足をプロフ画像にするな)のスクリプト。実際は、Markdownにするための処理を追加しないといけない。

https://github.com/sasigume/convert-contentful-to-asobinon

ということで、今回はTurndownというライブラリでMarkdownに変換した。一応完成品のレポジトリを載せておく。

まとめ

• 最初からMarkdownで書いとけば良かった