メインコンテンツまでスキップ

ブログを移行した

· 約2分

ブログをはてなブログからDocusaurusによるセルフホストに移行したのでそのことについて書く。

業務で新しいドキュメント生成ツールを探していた時にDocusaurusを見つけ、試しに触ってみたところとても手触りが良くて感動した。 感動したのでそのまま勢いで小さなバグ修正のPRを投げてコントリビュート[1]したり、このブログを移行したりしている。

ホスティング

雑に自鯖にデプロイしても良かったが、せっかくなのでCloudflare Pagesでホスティングすることにした。

デプロイ自体はCloudflareのドキュメントなどを参考にすることですんなりとデプロイできた。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-docusaurus-site/
Loading...
developers.cloudflare.com

リンクカード

Docusaurusには標準でリンクカードのような外部リンクをリッチに表示する仕組みが存在しない。 ブログを書く上でリンクを貼る機会は多いし、ぜひとも欲しいので自作することにした。

DocusaurusのMDXはReactコンポーネントを埋め込めるので、LinkCardコンポーネントを作成して記事中に

<LinkCard url="https://example.com" />

みたいな感じで記載することで本文中にあるようなリンクカードを埋め込めるようにした。

リンクカードに表示する情報の取得は、ビルド時に毎回取得するのはちょっとしんどい上にビルドしないとリンク先の更新に追従できなくなってしまう。 かといって閲覧時にクライアントサイドで毎回取得するのも効率が悪い。GitHubのようにOGP画像の取得に対するレートリミットが厳しいと、連続で取得する際に画像が取得できなくなってしまう可能性もある。

そこで、今回はCloudflare Pages FunctionsとWorkers KVを利用してリンク情報を取得してキャッシュするAPIを作成し、閲覧時にクライアントから問い合わせるようにした。 この辺の実装については

https://blog.s2n.tech/posts/cloudflare-ogp-api/
Loading...
blog.s2n.tech

の記事の内容が非常に参考になった。

移行してみて

そもそもここ最近は全然ブログ記事を書けていない[2]ので、ブログを移行したからといってどんどん記事を書くようになるかというと怪しい。 ただ、今後は真っ白な編集画面に目を焼かれたり、なかなか更新されないプレビュー表示にイライラしたりして書きかけの記事を放置しなくなると思うので多少更新頻度は増えるような気がする。たぶん。

何より新しい技術に触れるきっかけとして個人ブログというのはちょうどいい[3]ので、今後も記事を書きながら色々と細かいところをカスタマイズしつつ楽しんでいきたいと思う。

Footnotes

  1. こうした規模の大きいOSSとしてはかなりの速さでPRがトリアージされてさらに感動した。
    ちゃんとメンテされているOSSって良いですね。

  2. どれぐらい書いていないか確認してみたら、最終更新が3年半前でひっくり返った。

  3. 実際今回のブログ構築をきっかけに「RspackとかBunとか速いらしいからとりあえず使ってみよう!」みたいなノリで導入したり、リンクカードの実装を通してWorkers KVとImage Transformationを初めて触って「便利~」と感動したりした。