今まではてなブログを利用していたのですが、こまめな保存がしづらいとかプレビューが見づらいとか、少し不満があったため、せっかくならということでGatsby + Vercelに乗り換えてみました。

GatsbyはReactベースのブログを作成できるライブラリで、有志の方が作成されているスターターを利用するとすぐにデプロイできる環境が構築できます。

VercelはNext.jsの開発元が運営している静的サイトホスティングサービスです。

僕が利用したテンプレートはこちらです。

gatsby-starter-bee

よかったところ

Gatsby

• 編集がしやすい。編集は基本的に開発と同じようにエディタでリポジトリ上にmdを作成し、できたらpushすると自動でデプロイしてくれます。

  • CLIで開発環境が立ち上げられるためプレビューは確認しやすくなりました。
  • 余談ですがNetlify CMS（ブラウザから投稿できるような画面）を導入しているテーマもありますが、簡易なものでそこまで便利ではありませんでした。

Vercel

• 色々な意味で爆速

  • まずサインアップ→GithubとのOauth連携→デプロイ みたいな感じで一瞬でできてhttps対応までされていました。
  • また本Blogを見ていただければと思うのですがCDNが日本にある？らしく読み込みがかなり早いです。

Vercel cs Netlify

実は最初ホスティングサービスは自分が知っていたNetlifyを選択していたのですが、下記の理由によりVercelに乗り換えました。

• ドメインの登録やHTTPS化がなぜかうまくいかなかった
• CIの動作時間など無料版では上限がある
• （Vercelに比べて）少し読み込みが遅い

はてなからの記事の移管について

はてなブログにはmd形式で一括インポートしてくれる機能があり、基本的にはそちらを利用しました。

ただしさすがに画像までは移管できませんでした。記事数も少ないこともあり、そこは温かみのある手作業で実施しました。

はまったこと

ローカル環境でhot reloadingが走りまくる

無限に読み込みして表示ができない状態です。

ブラウザのcacheが悪さをしていると思われるのでローカル環境は基本的にシークレットウィンドウで開くことをおすすめします。

おわりに

このような快適な環境が無料で利用できるのは本当に感謝です。

はてなブログも乗り換えとなりましたが今までお世話になりました。