これまでこのサイトはSvelteKitをCloudflare Pagesにホスティングし、ブログデータをhtml形式でmicrocmsから取得し、それをSSRでレンダリングするようになっていました。

今回の移行では、microcmsでのブログデータ管理を完全に辞め、mdファイルをMarkdocを利用してParseし、そのASTデータをPlanetScaleのMySQLに保存、Cloudflare PagesでSSRするように変更しました。

どうして移行が必要になったのか、移行によって何ができるようになったのか、それを今回はお話します！

なぜ作り直したのか

以前 こちらの投稿 で雑に紹介しましたが、主な理由を再度、簡潔に示すと以下のような理由になります。

• microcmsではiframeによるレンダリングが一部のサービスでしか利用できなかった。

  • そのため、Amazonアフィリエイトなどのiframeが埋め込めなかった

• ブログ投稿、 そもそも一人でしか行っていない のにCMSツールで管理するのはオーバーエンジニアリングだった

  • かなしいね

• コードのシンタックスハイライトができるようになりたかった

昔はこんな感じだったけど 今だとこんなふうにできるように どうしてシンタックスハイライトできなかったのかというのは 前の記事 を閲覧してください！

• 記事中にSvelteのコンポーネントをレンダリングしたかった

こんなかんじ。 ※出典： https://modelviewer.dev/

何ができるようになったか

• markdownに書いたhtmlを直接ブログに反映させることができるようになりました

iframeでアフィリンクを共有できるようになったり。

色々柔軟にできるようになりブログ記事内で表現できることが増えました！

移行にあたって大変だったこと

数日で移行は完了しましたが、それはそれとして色々困ったことがあったので書き残しておきます。

Markdoc x Svelteの連携

Markdocによるカスタムコンポーネントのレンダリングは、公式だとReactや、Webcomponentsくらいしか対応していません。

そうなってくるとMarkdocのAST->svelteのレンダリングは自分で書かないといけません。いくつか対応してるっぽいrepositoryはありましたが、メンテナンスされてなさそうなやつばかりでしたのでそういったものは使いませんでした。

困ったな…と思っていたら REPLにサンプルコード を載せていてくれた人がいましたので、そちらのプログラムを再利用することしました。

最初はCloudflare D1でブログデータを管理しようとしたけれど

public alphaの現状だと Cloudflare D1は100mbまでしかデータを載せられない ので、流石に制限がきつすぎるということでなしになりました。

困っていたところにplanetscaleとの連携が可能になったニュースが舞い込んできたのでこれは流行りに乗るしかねぇ！　となり、PlanetScaleでデータ管理をするように。

既存データの移行

microcmsでのデータをすべてマークダウンファイルに移動 -> markdocのASTに変換 -> MySQLにインサート これがすごい大変でした。途中からある程度は自動化しましたが出戻りが発生したりするとデータをまた変換し直さないといけないので…

最後に

ブログ記事のデータ管理は直接SQLにデータをインサートしたりする必要がありますが高頻度に更新するわけでもないのでGUIのクライアントツールで手動でポチポチするだけでも十分でした。これからはエンタメ製の高い記事を書いて皆さんを楽しめられたらなと思っています！

では！