Skip to Content
helpersSsg

Last Updated: 3/7/2026

SSG Helper

SSG Helper generates a static site from your Hono application. It will retrieve the contents of registered routes and save them as static files.

Usage

Manual

If you have a simple Hono application like the following:

const app = new Hono()
 
app.get('/', (c) => c.html('Hello, World!'))
 
app.use('/about', async (c, next) => {
  c.setRenderer((content) => {
    return c.html(
      <html>
        <head />
        <body>
          <p>{content}</p>
        </body>
      </html>
    )
  })
  await next()
})
 
app.get('/about', (c) => {
  return c.render(
    <>
      <title>Hono SSG Page</title>Hello!
    </>
  )
})
 
export default app

For Node.js, create a build script like this:

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

By executing the script, the files will be output as follows:

ls ./static
about.html index.html

Vite Plugin

Using the @hono/vite-ssg Vite Plugin, you can easily handle the process.

For more details, see here: https://github.com/honojs/vite-plugins/tree/main/packages/ssg 

toSSG

toSSG is the main function for generating static sites, taking an application and a filesystem module as arguments.

Input

The arguments for toSSG are specified in ToSSGInterface.

export interface ToSSGInterface {
  (
    app: Hono,
    fsModule: FileSystemModule,
    options?: ToSSGOptions
  ): Promise<ToSSGResult>
}
  • app specifies new Hono() with registered routes.
  • fs specifies the filesystem module object.

Using adapters for Deno and Bun

If you want to use SSG on Deno or Bun, a toSSG function is provided for each file system.

For Deno:

import { toSSG } from 'hono/deno'
 
toSSG(app) // The second argument is an option typed `ToSSGOptions`.

For Bun:

import { toSSG } from 'hono/bun'
 
toSSG(app) // The second argument is an option typed `ToSSGOptions`.

Options

Options are specified in the ToSSGOptions interface.

  • dir is the output destination for Static files. The default value is ./static.
  • concurrency is the concurrent number of files to be generated at the same time. The default value is 2.
  • extensionMap is a map containing the Content-Type as a key and the string of the extension as a value.
  • plugins is an array of SSG plugins that extend the functionality of the static site generation process.

Middleware

Introducing built-in middleware that supports SSG.

ssgParams

You can use an API like generateStaticParams of Next.js.

app.get(
  '/shops/:id',
  ssgParams(async () => {
    const shops = await getShops()
    return shops.map((shop) => ({ id: shop.id }))
  }),
  async (c) => {
    const shop = await getShop(c.req.param('id'))
    if (!shop) {
      return c.notFound()
    }
    return c.render(
      <div>
        <h1>{shop.name}</h1>
      </div>
    )
  }
)

disableSSG

Routes with the disableSSG middleware set are excluded from static file generation by toSSG.

app.get('/api', disableSSG(), (c) => c.text('an-api'))

onlySSG

Routes with the onlySSG middleware set will be overridden by c.notFound() after toSSG execution.

app.get('/static-page', onlySSG(), (c) => c.html(<h1>Welcome to my site</h1>))
RpcTesting