ブログをリニューアルした

たいして記事もないブログをノリでリニューアルするやつをやってしまった。 前回は Gatsby + Nelify で構築していたが、今回は Next.js + Vercel を使った。 使ったと言っても、いい感じのテンプレートが見つかったのでそれを元にカスタマイズをしたという感じ。

前回作った Gatsby 製のブログではいくつか微妙だなーと思っていた点があった。 スタイリングを自分で実装したので、特定のマークダウン記法を用いると若干違和感のある表示になったり、画面幅にうまくおさまらないみたいな不具合が存在していた。 記事を書いていると気になるところがでてくるのが精神衛生上よくなかったのでベースはもう出来上がっているものを使う方がよいなーと思っていた（気合がないとそういうのはなかなか直す気にならないし）。 また、新しいブログということで気合が入っていて、サムネイル画像を必須で設定しないといけないなどリッチな仕様にしていたため、日記や作業ログみたいな気軽に書きたいものが書きづらくなってしまっていた。

これらの気になる点を解消できるようシンプルでカスタマイズが簡単なテンプレートを探して、よさそうなのが見つかったので移行した。

今回使ったのは Tailwind Nextjs Starter Blog というもの。これをベースに自分の使用用途に合わせてスタイルやページの構成を変更した。

新ブログの初期構築に関しては README 通りにメタデータをカスタマイズして、前回のブログ記事をちょっと変更して移行するくらいで済んだ。記事の数が少なかったので手動でやったが、主な変更点は画像のパスを変更するくらいで特に問題もなく移行できた。

デプロイも Vercel にお任せで、ドメインのネームサーバーを変更してあげるだけで見られるようになった。 しかも、前回のブログと記事の URL が変わってしまうので外部のアドベントカレンダーにリンクしてある記事はどうしようかなーと思っていたところ、これもリポジトリに vercel.json という簡単な設定ファイルを用意するだけで設定できたのでよかった。

{
  "redirects": [
    {
      "source": "/2020/12/keyboard-lube",
      "destination": "/blog/2020/keyboard-lube"
    }
  ]
}

あとは、見た目に関して初期設定だと文字がでかすぎて画面で一度にみれる情報が少ないなーと感じたので調整したり、使ってないコンポーネントを描画しない用にコメントアウトするなどしてシンプルにした。それだけでも自分が求めていた感じにかなり近い形になって満足している。