Skip to content

feat: Cloudflare Pages support for hosting #2570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArthurDanjou wants to merge 1 commit into
base: main
Choose a base branch
from
+81 −3
Open

feat: Cloudflare Pages support for hosting #2570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/guide/hosting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,40 @@ Create `vercel.json` in your project root with the following content:

Then go to your [Vercel dashboard](https://vercel.com/) and create a new site with the repository.

### Cloudflare Pages

Slidev automatically detects when you are deploying to [Cloudflare Pages](https://pages.cloudflare.com/) by looking for a `wrangler.toml` or `wrangler.json` file in your project root.

When detected, Slidev generates the necessary `_redirects` and `_headers` files for optimal SPA hosting.
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This paragraph implies _redirects generation is conditional on Cloudflare Pages detection, but _redirects is generated unconditionally during slidev build (only skipped if the file already exists). Consider rephrasing to say that detection adds _headers generation, while _redirects is generated for SPA hosting in general.

Suggested change
When detected, Slidev generates the necessary `_redirects` and `_headers` files for optimal SPA hosting.
For SPA hosting, Slidev generates the necessary `_redirects` file during `slidev build` (unless it already exists). When Cloudflare Pages is detected, Slidev also generates the `_headers` file for optimal deployment.

Copilot uses AI. Check for mistakes.

Create a `wrangler.toml` in your project root:

::: details wrangler.toml

```toml
name = "my-slidev"
compatibility_date = "2026-04-29"
```

:::

Then build and deploy:

```bash
$ slidev build
$ npx wrangler pages deploy dist
```

#### Preview locally with Wrangler

You can test the Cloudflare Pages build locally using [Wrangler](https://developers.cloudflare.com/workers/wrangler/):

```bash
$ npx wrangler pages dev dist
```

The `_headers` file generated by Slidev sets long-term caching for hashed assets, ensuring optimal performance.

### Zephyr Cloud {#zephyr-cloud}

To deploy your Slidev deck on [Zephyr Cloud](https://zephyr-cloud.io/), you can add Zephyr support to an existing Slidev project with:
Expand Down
22 changes: 19 additions & 3 deletions packages/slidev/node/commands/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,26 @@ export async function build(

// copy index.html to 404.html for GitHub Pages
await fs.copyFile(resolve(outDir, 'index.html'), resolve(outDir, '404.html'))
// _redirects for SPA

// _redirects for SPA (supported by Netlify and Cloudflare Pages)
const redirectsPath = resolve(outDir, '_redirects')
if (!existsSync(redirectsPath))
await fs.writeFile(redirectsPath, `${config.base}* ${config.base}index.html 200\n`, 'utf-8')
if (!existsSync(redirectsPath)) {
const base = config.base
await fs.writeFile(
redirectsPath,
`${base}index.html ${base}index.html 200\n${base}* ${base}index.html 200\n`,
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The generated _redirects file includes a rule rewriting ${base}index.html to itself. This doesn’t add behavior beyond the ${base}* -> ${base}index.html SPA fallback (which already covers requests for ${base}index.html) and makes the output more verbose than necessary. Consider dropping the no-op index.html -> index.html rule and keeping only the SPA fallback rule.

Suggested change
`${base}index.html ${base}index.html 200\n${base}* ${base}index.html 200\n`,
`${base}* ${base}index.html 200\n`,

Copilot uses AI. Check for mistakes.
'utf-8',
)
}

// _headers for Cloudflare Pages (auto-detected via wrangler config)
const hasWranglerConfig = existsSync(resolve(options.userRoot, 'wrangler.toml')) || existsSync(resolve(options.userRoot, 'wrangler.json'))
if (hasWranglerConfig) {
const headersPath = resolve(outDir, '_headers')
if (!existsSync(headersPath)) {
await fs.writeFile(headersPath, `\n/assets/*\n Cache-Control: public, max-age=31536000, immutable\n`, 'utf-8')
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The generated _headers rule is hard-coded to /assets/*. If config.base is set for subdirectory deployments (e.g. /my-slides/), requests will be under ${config.base}assets/... and this rule won’t match, so the long-term caching won’t apply. Consider prefixing the pattern with config.base (e.g. ${config.base}assets/*) and dropping the initial blank line in the file content.

Suggested change
await fs.writeFile(headersPath, `\n/assets/*\n Cache-Control: public, max-age=31536000, immutable\n`, 'utf-8')
await fs.writeFile(headersPath, `${config.base}assets/*\n Cache-Control: public, max-age=31536000, immutable\n`, 'utf-8')

Copilot uses AI. Check for mistakes.
}
}

if ([true, 'true', 'auto'].includes(options.data.config.download)) {
const { exportSlides, getExportOptions } = await import('./export')
Expand Down
28 changes: 28 additions & 0 deletions skills/slidev/references/core-hosting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,34 @@ Create `netlify.toml`:
status = 200
```

## Cloudflare Pages

Slidev auto-detects Cloudflare Pages when a `wrangler.toml` or `wrangler.json` is present in the project root.

Create `wrangler.toml`:

```toml
name = "my-slidev"
compatibility_date = "2026-04-29"
```

Build and deploy:

```bash
slidev build
npx wrangler pages deploy dist
```

Cloudflare Pages supports Netlify-style `_redirects` out of the box. When detected, Slidev also generates a `_headers` file with optimal cache settings for hashed assets.

### Local preview

Test with Wrangler locally:

```bash
npx wrangler pages dev dist
```

## Vercel

Create `vercel.json`:
Expand Down
Loading