😎

Next.js（Vercel）のSSGのMarkdownブログをHono（Cloudflare Pages）へ移行

2024/06/30に公開

Next.js

こんにちは、今回は個人で作っているMarkdownブログをHono（Cloudflare Pages）へ移行しましたので、感想など書いていきます。

参考文献

やり方としては以下の記事を参考にさせていただきました。

移行の概要

コードとサイト

サイト: https://dl10yr.com/
リポジトリ: https://github.com/dl10yr/dl10yr-blog

移行前、移行後の環境

移行前: Next.js SSG （Vercelへデプロイ）
移行後: Hono SSG （Cloudflare Pagesへデプロイ）

動機

Honoをもっと使ってみたい
Next.jsを使うほどのサイトじゃない
シンプルなHonoを使って、フレームワークの裏側の仕組みをもっと知りたい
Vercelに縛られたくない、Cloudflare使ってみたい
(直接は関係ないけど) リファクタリングしたい
- tailwindやめたい。cssを思い出しておきたい
- react-markdownやめたい
  - markdown-it使えば十分

積み残しの問題とハマったポイント

ドキュメント読み込めてないだけの可能性高いけど、積み残しの問題をそのうち直したいので、忘れないように書いておきます。

画像などの置き場所と書き方

画像をpublic/imgに置いて、以下で定義している。

app.use('/public/*', serveStatic({ root: './' }))

Markdownファイルなどでは以下のように使っている

![hoge](/img/hoge/1.png 'hoge-1')

これでデプロイしたときは問題ないのだが、開発時はpublic/に置いているので表示されない。ちょっと考えてもどうすればよいのか分かってない。

ssgParamsで返す以外のパスもbuild時に生成しようとして、エラーが出る

bun run buildしたとき、ssgParams内で返しているリストの他に:year, :month, :slugという文字列でのパスも作ろうとしている。当然これに該当するmarkdownファイルがないのでエラーになる。
ひとまずif文で回避しているが、どうすればよいのか...

app.get('/blog/:year/:month/:slug', ssgParams(async () => {
  const blogPosts = getAllPosts(['title', 'date', 'slug', 'author', 'coverImage', 'excerpt'])
  return blogPosts.map(post => {
    const [year, month] = post.date.split('.')
    return { year, month, slug: post.slug }
  })
}), (c) => {
  const { year, month, slug } = c.req.param()
  if (year.includes(':') || month.includes(':') || slug.includes(':')) {
    return c.text('404', 404)
  }

これっぽいけどすでに直ってるっぽいから、違うのか...

404関係

無いパスにアクセスすると、/の内容が表示される？この辺の制御の仕組みわかってない

Cloudflare Pagesでのビルド時

問題: Bun使って、bun installでエラー出た

解決策: wrangler.tomlでBUN_VERSIONを指定する

wrangler.toml

[vars]
BUN_VERSION = "1.1.17"

DNS

Vercelからの移行で若干ハマったけど、以下に従ってできた

感想

HonoもCloudflare Pagesも、シンプルで使いやすい一方で、自分の頭で考えてカスタムのしがいがありそうな、いいフレームワーク/仕組みだと思いました