Published on

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

Authors

TL;DR

unix/unix.bio から timlrx/tailwind-nextjs-starter-blog に乗り換えました。

モチベーション

  • 導入から 1 年ほど経ったのでリニューアルしたかった
  • mdx ファイル内に、import と export の記述を強制したくなかった
  • コンテンツを含んだ rss フィードを生成したかった

コンテンツをシンプルに保ちたい

unix.bio の場合、記事を https://raw.githubusercontent.com/unix/unix.bio/template/pages/posts/about.mdx のように書く必要があり、md でもかけるではなく、mdx でしか書けないようになっている。 ブログのリニューアルは年一くらいで行っているので、mdx を強制しないシンプルな形式で保持しておきたい。 また、mdx である必要性がある記事をここ 1 年書かなかったこともあり、md でも良いくらいだと思ってきた。

リニューアル先としては、md で書ければよく、mdx でも書けるくらいの感じで良さそう。

rss リーダーフレンドリーにしたい

RSS の生成は実装したけれど、RSS 内にタイトルしか入っておらずコンテンツを追加したかった。 しかし unix.bio の構造上コンテンツの情報は metadata.json にまとめて保持しており、rss は metadata.json から作る実装にしていた。 metadata.json 生成時にコンテンツも追加するか、各記事の meta に description をセットするかという感じでなかなかに厳しい。

RSS を追加した方法はブログサイトに RSS を追加しました 参照

metadata.json で一括管理するという方法ではなく、記事毎にオブジェクトで扱える構造になっているのが欲しい

移行先を探す

他の Next.js で作られたサイトはどうやって RSS ファイルを生成しているんだろうと探して、結構みんな苦戦している様子。 その中で見つけたのが記事が https://github.com/vercel/next.js/discussions/17931 がこちら。 これを読むと、MDX を HTML 化して content:encoded に追加するということをやっていて、そうそうやりたいことはこれだよと。

このディスカッションから blog.tailwindcss.com を fork すればやりたいことができるんじゃ？と思ったものの、repository はすでにアーカイブされている。 アーカイブされた理由は不明だがメンテナンスされていないものを使い続けるのは流石になぁと思い別のものを探してみる。

そんな中 https://github.com/timlrx/tailwind-nextjs-starter-blog を発見。 早速ダウンロードして検証してみたところ、特に問題はなさそう。

検証後に気付いたんだけど、contentlayer ブランチが開発中バージョンで master ブランチが安定版ということだった。 master ブランチの generate-rss.js では post オブジェクトにアクセスできるものの meta しか入っていないので content の追加は厳しい感じ。

tailwind-nextjs-starter-blog の安定版を使うか、α 版を使うか悩ましいんだけど、α 版でできることは分かっているので RSS よりは移行を優先し安定版を採用することにした。

移行作業

https://github.com/timlrx/tailwind-nextjs-starter-blog#quick-start-guide の手順を進めるだけでローカルで自分のブログサイトが立ち上がる。すごい、よくできている。

ただし、ロゴやアバター画像などは必要なので、新規にブログを作る場合は少し時間が掛かるかもしれない。

記事コンテンツの移行。エディタの一括置換でガッとやり、ちょこちょこ手動で微調整した。

記事に書く frontmatter の最小限は次になる。

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
tags: []
summary:
---

summary は optional と書いてあるけど、rss で summary 部分が undefined になる（バグ？)ので、空で追加しておいた。

前のサイトの URL は /post/xxx にしてたが、tailwind-nextjs-starter-blog では /blog/xxx になる。 サーチエンジンから辿れなくなってしまうのは嫌なので、リダイレクトで回避する方法はないかなと探してみるとズバリのものが Next.js のマニュアルにありました。 https://nextjs.org/docs/api-reference/next.config.js/redirects

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

リダイレクトも無事に完了。 ブログ記事以外にも少しコンテンツあるんだけど、そっちは諦めました。

ローカルでは動くようになったので、vercel コマンドでデプロイしてみる。 何個かエラーが出るものの、記事の一括置換漏れなどによるエラーで、エラーメッセージを読みながら一つずつ潰して解決できました。 移行確認は yarn dev で行っていましたが、yarn build だとエラーになったので、確認には build を使うべきだったようです。

無事にデプロイが完了し、一応 Google Search Console から sitemap.xml の更新もリクエストして無事に移行完了です。

tailwind-nextjs-starter-blog 以外に関するこのブログの実装は このブログの実装 2021 年版 に書いています。

Discuss on Twitter • View on GitHub