You may tell Cloudflare Pages how your site needs to be built as well as where its output files will be located.

## Build commands and directories

You should provide a build command to tell Cloudflare Pages how to build your application. For projects not listed here, consider reading the tool's documentation or framework, and submit a pull request to add it here.

Build directories indicates where your project's build command outputs the built version of your Cloudflare Pages site. Often, this defaults to the industry-standard `public`, but you may find that you need to customize it.

## Framework presets

Cloudflare maintains a list of build configurations for popular frameworks and tools. These are accessible during project creation. Below are some standard build commands and directories for popular frameworks and tools.

If you are not using a preset, use `exit 0` as your **Build command**.

| Framework/tool               | Build command                     | Build directory          |
| ---------------------------- | --------------------------------- | ------------------------ |
| React (Vite)                 | `npm run build`                   | `dist`                   |
| Gatsby                       | `npx gatsby build`                | `public`                 |
| Next.js                      | `npx @cloudflare/next-on-pages@1` | `.vercel/output/static`  |
| Next.js (Static HTML Export) | `npx next build`                  | `out`                    |
| Nuxt.js                      | `npm run build`                   | `dist`                   |
| Qwik                         | `npm run build`                   | `dist`                   |
| Remix                        | `npm run build`                   | `build/client`           |
| Svelte                       | `npm run build`                   | `public`                 |
| SvelteKit                    | `npm run build`                   | `.svelte-kit/cloudflare` |
| Vue                          | `npm run build`                   | `dist`                   |
| Analog                       | `npm run build`                   | `dist/analog/public`     |
| Astro                        | `npm run build`                   | `dist`                   |
| Angular                      | `npm run build`                   | `dist/cloudflare`        |
| Brunch                       | `npx brunch build --production`   | `public`                 |
| Docusaurus                   | `npm run build`                   | `build`                  |
| Elder.js                     | `npm run build`                   | `public`                 |
| Eleventy                     | `npx @11ty/eleventy`              | `_site`                  |
| Ember.js                     | `npx ember-cli build`             | `dist`                   |
| GitBook                      | `npx gitbook-cli build`           | `_book`                  |
| Gridsome                     | `npx gridsome build`              | `dist`                   |
| Hugo                         | `hugo`                            | `public`                 |
| Jekyll                       | `jekyll build`                    | `_site`                  |
| MkDocs                       | `mkdocs build`                    | `site`                   |
| Pelican                      | `pelican content`                 | `output`                 |
| React Static                 | `react-static build`              | `dist`                   |
| Slate                        | `./deploy.sh`                     | `build`                  |
| Umi                          | `npx umi build`                   | `dist`                   |
| VitePress                    | `npx vitepress build`             | `.vitepress/dist`        |
| Zola                         | `zola build`                      | `public`                 |

## Environment variables

If your project makes use of environment variables to build your site, you can provide custom environment variables:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. In **Overview**, select your Pages project.
4. Select **Settings** > **Environment variables**.

The following system environment variables are injected by default (but can be overridden):

| Environment Variable  | Injected value                        | Example use-case                                                                        |
| --------------------- | ------------------------------------- | --------------------------------------------------------------------------------------- |
| `CF_PAGES`            | `1`                                   | Changing build behaviour when run on Pages versus locally                               |
| `CF_PAGES_COMMIT_SHA` | `<sha1-hash-of-current-commit>`       | Passing current commit ID to error reporting, for example, Sentry                       |
| `CF_PAGES_BRANCH`     | `<branch-name-of-current-deployment>` | Customizing build based on branch, for example, disabling debug logging on `production` |
| `CF_PAGES_URL`        | `<url-of-current-deployment>`         | Allowing build tools to know the URL the page will be deployed at                       |
