Deploying Astro to Cloudflare Pages

Deploying an Astro project to Cloudflare Pages is incredibly simple. In this guide, we’ll walk through the steps to get your site live on the edge.

1. Install the Cloudflare Adapter

First, you need to install the @astrojs/cloudflare adapter. You can do this using the Astro CLI:

npx astro add cloudflare

This command will automatically update your astro.config.mjs file to include the adapter.

2. Configure the Adapter

If you prefer to do it manually, your astro.config.mjs should look something like this:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare({
    platformProxy: {
      enabled: true
    }
  }),
});

3. Push to GitHub

Commit your changes and push your project to a GitHub repository.

4. Connect to Cloudflare Pages

1. Log in to your Cloudflare dashboard.
2. Go to Workers & Pages > Create application > Pages > Connect to Git.
3. Select your GitHub repository.
4. In the build settings, select Astro as the framework preset.
5. Click Save and Deploy.

Cloudflare will now build and deploy your Astro site! Every time you push to your repository, Cloudflare will automatically trigger a new build.

Conclusion

That’s it! Your Astro site is now running on Cloudflare’s global edge network, providing blazing fast performance for users around the world.