[Astro] Host a static Astro site on Cloudflare Pages

Tip

See Generate a new Astro project with Tailwind CSS if you don’t already have an Astro project set up.

1. Check that your project can build without errors.

   npm

   npm run build

   yarn

   yarn run build

   pnpm

   pnpm run build

2. Push your latest code to the main branch of your remote Git repository. Cloudflare supports GitHub and GitLab.

3. Sign up or log in to your Cloudflare account.

4. We’ll use the Git integration feature of Cloudflare Pages — make sure to connect up your Git provider in your Cloudflare account by following the instructions.

   https://developers.cloudflare.com/pages/get-started/git-integration/

5. In the Cloudflare dashboard, navigate to the Workers & Pages section, click the Create button, then select the Pages tab.

6. Now you can connect up your Git repository to a new Cloudflare Pages project. Click the Connect to Git button, select the repository, then click Begin Setup.

7. In the Build settings section, select “Astro” from the dropdown list of frameworks, then click “Save and Deploy”.

8. An initial deploy will run, and you can watch the progress in the Cloudflare dashboard. Once the deploy is complete, you can view your site at the URL provided by Cloudflare.

Cloudflare will automatically build and deploy your project when you push new changes to your repository, including creating separate preview deployments for branches.