Cloudflare

To deploy on Cloudflare Pages, we need to make some package changes and adjust the Astro config file.

• Install the @astrojs/cloudflare adapter and uninstall the @astrojs/netlify adapter
• Adjust the astro.config.mjs file for Cloudflare Pages deployment
• You can also delete the netlify.toml file

Project Adjustments

Packages

• Install the @astrojs/cloudflare adapter with npm install @astrojs/cloudflare
• Uninstall the @astrojs/netlify adapter with npm uninstall @astrojs/netlify

Config File

Make the following adjustments to the astro.config.mjs file for Cloudflare deployment. Note the additional compatibility requirements for Cloudflare Pages:

import netlify from "@astrojs/netlify";
import cloudflare from "@astrojs/cloudflare";

// https://astro.build/config
export default defineConfig({
  site: "https://yoursite.com",
  output: "hybrid",
  adapter: netlify({
    imageCDN: false,
  }),
  adapter: cloudflare({
    imageService: "compile",
  }),
  // compatibility requirements for Cloudflare Pages
  vite: {
    ssr: {
      external: ["stream", "util", "os", "fs", "svgo"],
    },
  },
  // other config options
});

Test Build

Before deploying, it is recommended to test the build locally with npm run build to ensure everything is working as expected.

Deploying

1. Push your code to GitHub
2. Create a Cloudflare account if you don’t already have one
3. Follow the official Cloudflare documentation to deploy your site
   • Set the build command to npm run build
   • Set the publish directory to dist

Additional information

• Astro documentation on @astrojs/cloudflare