Skip to Content
advanced-guidesSsg

Last Updated: 3/11/2026

Static Site Generation

Generate static sites from your Hono application using the SSG Helper.

Basic Usage

Node.js

Create your app:

// index.tsx
const app = new Hono()
 
app.get('/', (c) => c.html('Hello, World!'))
app.get('/about', (c) => c.html('<h1>About</h1>'))
 
export default app

Create build script:

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

Run the script:

node build.ts
ls ./static
# index.html  about.html

Deno

import { toSSG } from 'hono/deno'
 
toSSG(app)

Bun

import { toSSG } from 'hono/bun'
 
toSSG(app)

Options

toSSG(app, fs, {
  dir: './dist',           // Output directory (default: ./static)
  concurrency: 4,          // Concurrent file generation (default: 2)
  extensionMap: {          // Custom file extensions
    'application/x-html': 'html',
  },
})

Route to Filename Mapping

  • / → ./static/index.html
  • /path → ./static/path.html
  • /path/ → ./static/path/index.html

Middleware

ssgParams

Generate static params (like Next.js):

import { ssgParams } from 'hono/ssg'
 
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'))
    return c.html(<h1>{shop.name}</h1>)
  }
)

disableSSG

Exclude routes from generation:

import { disableSSG } from 'hono/ssg'
 
app.get('/api', disableSSG(), (c) => c.json({ data: 'api' }))

onlySSG

Generate static file but return 404 at runtime:

import { onlySSG } from 'hono/ssg'
 
app.get('/static-page', onlySSG(), (c) => c.html('<h1>Static</h1>'))

Plugins

Default Plugin

Skips non-200 responses:

import { toSSG, defaultPlugin } from 'hono/ssg'
 
toSSG(app, fs, {
  plugins: [defaultPlugin()],
})

Redirect Plugin

Generates HTML redirect pages:

import { redirectPlugin, defaultPlugin } from 'hono/ssg'
 
toSSG(app, fs, {
  plugins: [redirectPlugin(), defaultPlugin()],
})

Custom Plugin

const logFilesPlugin = {
  afterGenerateHook: (result) => {
    console.log('Generated files:', result.files)
  },
}
 
toSSG(app, fs, {
  plugins: [logFilesPlugin, defaultPlugin()],
})

Vite Plugin

Use @hono/vite-ssg for easier integration:

npm install @hono/vite-ssg

See documentation .

VercelJsx