---
title: "Cloudflare Pages"
description: "Deploy your Content app to Cloudflare Pages"
canonical_url: "https://content.nuxt.com/docs/deploy/cloudflare-pages"
---
# Cloudflare Pages

> Deploy your Content app to Cloudflare Pages

<card>

Quick Setup

1. Use `nuxi build --preset=cloudflare_pages` to build your app
2. Create and connect a D1 database to your project in the Cloudflare Dashboard using binding name `DB`
3. Deploy/Redeploy your app

</card>

---

The Nuxt Content module has a built-in integration with [Cloudflare Pages](https://pages.cloudflare.com) to deploy your content.

The Module will automatically detect the build target and prepare the necessary configuration for Cloudflare Pages.

You can either use the `--preset=cloudflare_pages` option with the `nuxi build` command or use `nuxt.config.ts` to configure the preset.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages',
  },
});
```

## D1 Database

A D1 database connected to the app is **required** for the Nuxt Content module to work. By default the module uses the binding name **DB**. You can override the [database configuration](https://content.nuxt.com/docs/getting-started/configuration#d1) by providing your own in `nuxt.config.ts`.

After creating a new Cloudflare Pages project, you need to create a new D1 database and connect it to the project. Make sure to use the same binding name as the module is using.

### Local Preview

While `nuxi dev` and `nuxi build` don't require any extra configuration, testing a build locally with `nuxi preview` requires Cloudflare's Wrangler to be configured to provide a temporary, local database for Nuxt Content to bind. This can be done with a `wrangler.jsonc` or `wrangler.toml` file. Because Wrangler creates a local database, `database_name` and `database_id` can safely, but don't need to, match the values in production.

```jsonc [wrangler.jsonc]
{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "example-db",
      "database_id": "example-db-id"
    }
  ]
}
```

That's it 🎉

Relevant resources:

- [Nuxt Deploy documentation](https://nuxt.com/deploy/cloudflare)
- [Cloudflare D1 documentation](https://developers.cloudflare.com/d1/)
- [Create and bind a D1 database](https://developers.cloudflare.com/d1/get-started/)
- [Cloudflare Pages documentation](https://developers.cloudflare.com/pages/)


## Sitemap

See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.