さしぐめのブログ

Web / Meme / 海外アニメコミュニティ等の雑記。IDがモンテネグロドメインを内包してるって最高。

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

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

で、それを「誰でも編集できるようにして、情報を失うことなく検索妨害でなくする」方法として、「MarkdownにしてDocusaurusサイトに変換」 を提案する。なお、Docusaurusのレポジトリ内に記事を配置することになるから、あなたの記事はMITライセンスで配布せざるを得なくなることに注意。

Docusaurusとは Facebookがオープンソースで開発してるドキュメントサイト作成ツール。 詳細: https://docusaurus.io

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

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

asobinon.org

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

  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に

github.com

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

4. Docusaurusサイトを用意

docusaurus.io

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

俺が行った手順

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

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

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

zenn.dev

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

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

gist.github.com

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

github.com

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


まとめ

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

Copyright © 2021 Ryo Ando. Built w/ Love & Hatena Blog.