Lorem ipsum

ミニマリストなフリーランスエンジニアの雑記です。

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

技術・テクノロジー

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

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

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

移行手順

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

  1. はてなブログ記事のエクスポートと記事データの整形
  2. Next.js でブログを作成する
  3. 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 をそのままを使うときよりは書く必要のあるコードはかなり少ないでしょうが）。

3. Netlify にデプロイする

あとは作ったブログをデプロイするだけです。デプロイ先は、慣れている Netlify を選択しました。

設定はデプロイ時に next build && next export が走るようにするのと、Publish directory に out を指定するだけなので非常に簡単です。

最後に独自ドメインを利用していたので、CloudFront にてドメインの設定をして終了です。

おわりに

今回英語ブログを移行したのは、このメインブログの移行のための素振りでもあります。

長らくはてなブログ Pro を利用してきましたが、2 年契約プランが来年の 1 月あたりに切れるので、せっかくなら自作ブログに移行してみようかな、と思った次第ですね。

参考：2020年に使ったサブスクリプションのサービス

ただ、英語ブログの移行には Next.js+Netlify を利用しましたが、このブログの移行には Nuxt.js+Vercel を利用する想定です。

「そしたら英語ブログで移行の素振りした意味なくね？」って気がしなくもないですが、記事のエクスポート時に気をつけることは知ることができましたし、十分意味はあったかなと。

ただブログを自作ブログに移行するとなると、多くのことを考慮する必要があって大変だと改めて感じています 😅

以前、ブログサービスや自作ブログに何を求めるか？ という記事を書きました。一部重複しますが、このブログを移行する際は少なくとも以下の項目を見直す想定です。

  • カテゴリー
  • サムネイル
  • RSS フィード
  • サイトマップ
  • OGP
  • アクセス解析
  • 関連記事
  • 人気記事
  • 記事作成スクリプト
  • 下書き記事の扱い方
  • 画像圧縮
  • Amazon 商品ウィジェット
  • ダークモード対応

特に、はてなブログや WordPress では簡単に利用できる埋め込みコンテンツを自作するのが大変そうです。ここは通常のリンクを貼るだけでも一応体裁は整いますが、記事が味気なくなるので少し考え直したいところ。

まだまだやるべきことは多いですが、地道に移行を進めていきたいですね。