Skip to Content
platform-guidesCloudflare Pages

Last Updated: 3/11/2026

Cloudflare Pages

Cloudflare Pages  is an edge platform for full-stack web applications, serving static files and dynamic content via Cloudflare Workers.

Setup

Create a new Cloudflare Pages project:

npm create hono@latest my-app

Select cloudflare-pages, then install dependencies:

cd my-app
npm install

Directory structure:

./
├── package.json
├── public
│   └── static
│       └── style.css
├── src
│   ├── index.tsx
│   └── renderer.tsx
├── tsconfig.json
└── vite.config.ts

Hello World

Edit src/index.tsx:

import { Hono } from 'hono'
import { renderer } from './renderer'
 
const app = new Hono()
 
app.get('*', renderer)
 
app.get('/', (c) => {
  return c.render(<h1>Hello, Cloudflare Pages!</h1>)
})
 
export default app

Run Locally

Start the Vite dev server:

npm run dev

Access http://localhost:5173 in your browser.

Deploy

Deploy to Cloudflare:

npm run deploy

Deploy via GitHub

  1. Log in to Cloudflare dashboard 
  2. Go to Workers & Pages > Create application > Pages > Connect to Git
  3. Configure:
    • Production branch: main
    • Build command: npm run build
    • Build directory: dist

Bindings

Use Cloudflare Bindings (Variables, KV, D1):

Create wrangler.toml

[vars]
MY_NAME = "Hono"
 
[[kv_namespaces]]
binding = "MY_KV"
id = "your-kv-id"

Use in Application

type Bindings = {
  MY_NAME: string
  MY_KV: KVNamespace
}
 
const app = new Hono<{ Bindings: Bindings }>()
 
app.get('/', async (c) => {
  await c.env.MY_KV.put('name', c.env.MY_NAME)
  const name = await c.env.MY_KV.get('name')
  return c.render(<h1>Hello! {name}</h1>)
})

Client-Side Scripts

Import client scripts using Vite:

app.get('/', (c) => {
  return c.html(
    <html>
      <head>
        {import.meta.env.PROD ? (
          <script type='module' src='/static/client.js'></script>
        ) : (
          <script type='module' src='/src/client.ts'></script>
        )}
      </head>
      <body>
        <h1>Hello</h1>
      </body>
    </html>
  )
})

Cloudflare Pages Middleware

Use Hono middleware as Cloudflare Pages middleware:

// functions/_middleware.ts
import { handleMiddleware } from 'hono/cloudflare-pages'
import { basicAuth } from 'hono/basic-auth'
 
export const onRequest = handleMiddleware(
  basicAuth({
    username: 'admin',
    password: 'secret',
  })
)

Multiple middleware:

export const onRequest = [
  handleMiddleware(middleware1),
  handleMiddleware(middleware2),
]
NetlifyAws Lambda