SvelteKit 部署到 Cloudflare Pages 全紀錄

為什麼選 Cloudflare

服務	成本
Pages	$0
Workers	$0
D1	$0
R2	接近 $0

個人博客的流量規模下，這套組合完全免費，而且延遲極低（Edge 渲染）。

關鍵設定

1. 換掉 adapter-auto

pnpm add -D @sveltejs/adapter-cloudflare

// vite.config.ts
import adapter from '@sveltejs/adapter-cloudflare';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				config: 'wrangler.toml',
				platformProxy: {
					configPath: 'wrangler.toml',
					persist: true
				}
			})
		})
	]
});

platformProxy 讓 pnpm dev 也能讀到 D1 / R2 binding — 本地開發不需要另外起服務。

2. wrangler.toml

name = "kirikirin-blog"
compatibility_date = "2026-08-20"
pages_build_output_dir = ".svelte/cloudflare"

[[d1_databases]]
binding = "DB"
database_name = "kirikirin-blog"
database_id = "<從 wrangler d1 create 取得>"

⚠️ 注意：ASSETS 是 Pages 的保留 binding 名稱，R2 綁定不能叫這個名字。

3. 類型聲明

// src/app.d.ts
import type { D1Database, R2Bucket } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface Platform {
			env: {
				DB: D1Database;
				BUCKET: R2Bucket;
			};
		}
	}
}

部署

推上 GitHub、在 Cloudflare Pages 連接 repo，完事。Build 指令 pnpm build，輸出目錄 .svelte/cloudflare。