ここ最近、Honoを使ったデモアプリを作ることが多いのですが、静的サイトビルド機能はまださわれていなかったので、触ってみました。

Hono(v4)でアプリをセットアップする

まずはアプリをセットアップします。CIやローカル環境でHTMLをビルドする想定なので、nodejsテンプレートでセットアップしてみました。

% npm create hono@latest  hono-ssg
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-hono version 0.5.0
✔ Using target directory … hono-ssg
✔ Which template do you want to use? › nodejs
cloned honojs/starter#main to /Users/okamotohidetaka/sandbox/hono-ssg
✔ Do you want to install project dependencies? … yes
✔ Which package manager do you want to use? › npm
✔ Installed project dependencies
✔ Copied project files
Get started with: cd hono-ssg

Node.jsテンプレートをSSG対応にする

テンプレートからJSXで実装したWebページを生成できるようにしてみましょう。

まずはsrc/index.tsでappをexportします。

import { Hono } from 'hono'

export const app = new Hono()

その後、src/index.tsにあったサーバーを立ち上げる処理を、src/dev.tsに移しましょう。toSSG関数を実行するファイルとは別の場所に配置することで、ビルドコマンドを実行した際にサーバーが立ち上がってしまわないようにします。src/dev.tsは開発時のページの動作確認などに使う想定としています。

import { serve } from '@hono/node-server'
import { app } from './index'

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})

続いてsrc/ssg.tsファイルを作成して、ビルド用の処理を追加します。

import { app } from './index'
import { toSSG } from 'hono/ssg'
import fs from 'fs/promises'

toSSG(app, fs)

最後にpackage.jsonのビルドコマンドを更新しましょう。src/ssg.tsを実行することで、静的ファイルを生成できます。

  "scripts": {
    "dev": "tsx watch src/dev.ts",
    "build": "tsx src/ssg.ts "
  },

デバッグログを残す方法

src/ssg.tsでafterGenerateHook追加すると、ビルド時のログが残せます。

import { app } from './app'
import { toSSG } from 'hono/ssg'
import fs from 'fs/promises'

toSSG(app, fs, {
    afterGenerateHook: (result) => {
      if (result.files) {
        result.files.forEach((file) => console.log(file))
      }
    }
})

上のサンプルでは、どんなHTMLファイルを出力したかをログに残してくれます。

% npm run  build
$ tsx src/ssg.ts 
static/about.html
static/index.html
✨  Done in 0.47s.

実際に使うには

ここまでで生成処理をテンプレートに追加できました。あとは複数回ビルドをする際を想定して、staticディレクトリの中身を先に削除するか、差分ビルドできるような仕組みなどを用意すれば、実践投入できる・・・かなと思います。

参考にした記事

• https://hono.dev/helpers/ssg