Astro has been gaining traction for its performance and flexibility. Today, I'm going to guide you through deploying an Astro project to Cloudflare Pages with the help of the Cloudflare adapter. We'll go through the process of setting up a new Astro project, adding a server-side rendered page, pushing your project to GitHub, and finally, deploying it to Cloudflare Pages.
First things first, make sure you have an Astro project ready for deployment.
Setting up a New Astro Project
If you're new to Astro, you can create a project with the following command:
This will guide you through some initial setup questions. For more details, check the Astro documentation.
Once your project is ready, you can run it locally:
Your Astro project should be live at
http://localhost:4321. If you see the Astro welcome page, you're good to go.
Adding a Server-Side Rendered (SSR) Page
Astro supports static and server-side rendered pages. By default, a new Astro project starts with a static page. Let's add an SSR page to see how the Cloudflare adapter manages both page types.
Create a file named
time.astro in the
src/pages directory with this content:
This page will show the server's current time, updating with each page refresh.
Run your project locally again, and you should find the new page at
http://localhost:4321/time. If you refresh the page, you should see the time update.
Pushing Your Project to GitHub
Now that we have an Astro project, we need to push it to GitHub so that we can deploy it to Cloudflare Pages. The process is simple, and I'm sure you've done it a million times, but just in case, here are the steps:
- Create a new repository on GitHub.
I'm going to call mine
astro-cloudflare-example. You can call yours whatever you want.
- Initialize a new Git repository in your Astro project.
- Add your files to the Git repository.
- Commit your files.
- Add your GitHub repository as a remote.
- Push your files to GitHub.
P.S. Don't forget to make your repository private if you don't want the world to see your code. (You don't want the world to see your code, do you?)
Getting Started with the Cloudflare Adapter for Astro
Before deploying your Astro project, you need to install the
@astrojs/cloudflare adapter. This is easily done via the Astro CLI:
This command will not only install the adapter but also apply the necessary changes to your astro.config.mjs file. Alternatively, you can install the adapter manually by running:
Once the adapter is installed, you'll need to add it to your astro.config.mjs file. Open the file and add the following code:
The adapter is now installed and configured. Let's push our changes to GitHub and head to Cloudflare Pages to deploy our project.
Setting up Cloudflare Pages and Deploying Your Astro Project
Head to Cloudflare Pages, log in, and click the "Create a project" button.
Switch to the
Pages tab, select your GitHub repository, and click the "Begin setup" button.
On the next screen, you'll be asked to select your build preset and build command. Select "Astro" as your build preset and enter
npm run build as your build command and
/dist as your output directory.
Click the "Save and Deploy" button, and on the next screen, you should see your project building. Once the build is complete, you'll be able to view your project at the URL provided.
Testing Your Astro Project on Cloudflare Pages
Once your project has been deployed, you can view it at the URL provided. If everything went well, you should see the Astro welcome page. If you now navigate to the
/time page, you should see the current time displayed. If you refresh the page, you should see the time update.
This page is server-side rendered and runs on Cloudflare Workers. This is particularly useful for pages that require dynamic content such as a product page or user profile page. I've written a detailed article on ISR with Astro if you're interested in learning more.
At this point, we have a working Astro project deployed to Cloudflare Pages. In addition, we have a Continuous Deployment (CD) pipeline set up. This means that every time we push changes to our GitHub repository, Cloudflare Pages will automatically build and deploy our project. I suggest you make a small change to your project and push it to GitHub to test this out.
That's pretty much it! You now have a working Astro project deployed to Cloudflare Pages. There are, of course, many more things that you can do with Astro and Cloudflare Pages. For example, we can add a custom domain to our project, so we don't have to use the Cloudflare Pages URL. We can also add a custom 404 page and set up redirects. I'll cover these topics in future articles.
Until then, happy coding!
Interested in LogSnag?