2020年10月29日

英語ブログをはてなブログからNext.js+Netlifyに移行しました

技術・テクノロジー

気分で作った英語ブログをはてなブログから Next.js+Netlify に移行しました。

せっかくなので、簡単に移行手順を残しておきます 🙌

ブログのリポジトリはこちら

移行手順

やったことは以下の通りです 👇

はてなブログ記事のエクスポートと記事データの整形
Next.js でブログを作成する
Netlify にデプロイする

1. はてなブログ記事のエクスポートと記事データの整形

まずはブログの記事データをはてなブログからエクスポートします。

最初、はてなブログの記事のエクスポートを機能を使う想定でしたが、この機能だとエクスポート時に記事の URL を取得できないことが発覚しました。これだとブログの移行後に記事の URL を移行元と同じにしにくいので困ります 😭

そこで、今回は x-motemen/blogsync を利用して記事をエクスポートしました。こちらのツールを使うことで、記事のカスタム URL を Markdown のファイル名としてエクスポートできます ✨

これで記事をエクスポートすると、本文は HTML ではなく普段書いたそのままの形式になります。本文には一部はてな記法が混ざっていることから、雑にスクリプトを書いて画像を表示する時の書式などを変換しました。

2. Next.js でブログを作成する

自作ブログを作る際に使う技術としては以下が候補に上がりました。

この中から、今回は主に勉強目的で Next.js を選択しました（普段 Nuxt.js ばかり利用しているので）。

ブログの作成は主に Next.js を使った JAMstack なブログの始め方 | gotohayato.com を参考に進めていきました。

その他、RSS フィードやサイトマップの作成は Adding a statically-generated RSS feed to a Next.js 9.3+ Blog - DEV Community 👩‍💻👨‍💻 を参考にしました。

まともに Next.js を触ったのは久々でしたが、Nuxt.js を使っているときと比べると型まわりが整備されている印象で、開発体験が良かったです 👍

一方で、RSS フィードやサイトマップの作成に関しては、Nuxt.js であれば nuxt-community/feed-modulex や nuxt-community/sitemap-module があるので、少し面倒に感じました（Next.js でのサイトマップ生成に関しては IlusionDev/nextjs-sitemap-generator がありましたが、公式が提供するものでなかったのでなんとなく利用しませんでした。RSS フィードを生成するためのライブラリは見つけられなかったです）。

Next.js は、Nuxt.js に比べると良くも悪くも実装時にコードを自分で書くことになると思いました（それでも、普通に React をそのままを使うときよりは書く必要のあるコードはかなり少ないでしょうが）。