---
title: "How To Deploy An Astro.JS Blog On Cloudflare"
description: "Deploy an Astro.JS blog or website to CloudFlare Pages for free."
date: 2026-06-28
categories: ["web-development"]
tags: ["astro"]
---
import { Picture } from "astro:assets";
import imag1 from "../../assets/images/2210/use-this-template.jpeg";
import imag2 from "../../assets/images/2210/deploy-cloudflare-project.jpeg";
import YouTubeEmbed from "../../components/widgets/YouTubeEmbed.astro";
Cloudflare Pages is a solid (and free) way to host a static Astro blog. You get 500 builds per month, unlimited bandwidth, and your site runs on Cloudflare's global CDN. For a blog, that's more than enough.
Cloudflare also [acquired the Astro team in January 2026](https://blog.cloudflare.com/astro-joins-cloudflare/), so the integration between the two is only getting tighter. If you're deploying a static Astro site — no SSR, no server islands — you don't need any special adapter. Just build and push.
This guide walks you through deploying an Astro blog to Cloudflare Pages from scratch. We'll use one of the popular Astro blog themes as a starting point.
Before you start, make sure you have these set up:
- [Install Node.js using NVM](https://www.bitdoze.com/install-nodejs-using-nvm-macos-ubuntu/) (Astro requires v22.12.0 or higher)
- [Link GitHub with an SSH key](https://www.bitdoze.com/link-github-with-ssh-maco-linux/)
If you're coming from WordPress, see [how we migrated a WordPress site to Astro](https://www.bitdoze.com/wordpress-to-astro-migration/).
You can also self-host Astro on your own VPS with [Coolify](https://www.bitdoze.com/coolify-install-heroku-alternative/) or [EasyPanel](https://www.bitdoze.com/deploy-astro-easypanel/) if you prefer more control.
## Video walkthrough
{" "}
## Step 1: Pick a theme and clone it
You need an Astro project to deploy. You can start from scratch with `npm create astro@latest`, but for a blog it's faster to start with a theme.
Two good options:
- **[Bitdoze Astro Theme](https://github.com/bitdoze/bitdoze-astro-theme)** — a blog-focused theme with tags, categories, series support, search, and RSS. Built with Tailwind CSS v4.
- **[AstroWind](https://github.com/arthelokyo/astrowind)** — a general-purpose Astro + Tailwind CSS v4 template. Well-maintained, most starred Astro theme on GitHub.
On GitHub, click **Use this template** to create your own repo:
Then clone it locally:
```bash
git clone git@github.com:your-username/your-repo.git
cd your-repo
npm install
```
## Step 2: Configure the theme
The exact config files depend on which theme you picked. Here's what to change for each.
### Bitdoze Astro Theme
The config lives in separate files under `src/config/`:
**`src/config/site.ts`** — site metadata:
```ts
export const site = {
title: "Your Blog Name",
description: "What your blog is about",
author: "Your Name",
logoText: "YourBlog",
postsPerPage: 6,
// ...
};
```
**`astro.config.mjs`** — set your production URL:
```js
export default defineConfig({
site: "https://your-domain.com",
// ...
});
```
**`src/config/menu.json`** — header and footer navigation links.
**`src/config/social.json`** — social media profile URLs.
### AstroWind
AstroWind uses a single `src/config.yaml` file:
```yaml
site:
name: "Your Blog Name"
site: "https://your-domain.com"
base: "/"
metadata:
title:
default: "Your Blog Name"
template: "%s — Your Blog Name"
description: "What your blog is about"
apps:
blog:
isEnabled: true
postsPerPage: 6
```
Colors and fonts are customized through CSS in `src/components/CustomStyles.astro` and `src/assets/styles/tailwind.css` (Tailwind CSS v4 uses a CSS-first config approach — no `tailwind.config.js` needed for basic changes).
## Step 3: Add your content
Both themes store blog posts as Markdown or MDX files:
- **Bitdoze theme:** `src/content/posts/`
- **AstroWind:** `src/data/post/`
Create a new `.md` or `.mdx` file with frontmatter:
```md
---
title: "Your First Post"
description: "What this post is about"
date: 2026-06-29T00:00:00Z
image: "../../assets/images/your-image.jpg"
categories: ["blog"]
tags: ["astro", "tutorial"]
---
Your content here.
```
Delete the demo posts that come with the theme and add your own.
## Step 4: Test locally
Start the dev server to make sure everything looks right:
```bash
npm run dev
```
Open `http://localhost:4321` in your browser. Check that your site title, navigation, posts, and styling all look correct.
When you're happy, build the production version to catch any errors:
```bash
npm run build
```
If the build succeeds, push to GitHub:
```bash
git add .
git commit -m "configured my website"
git push
```
## Step 5: Deploy on Cloudflare Pages
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/).
2. Go to **Workers & Pages** > **Create application** > **Pages** tab.
3. Click **Import an existing Git repository** and connect your GitHub repo.
4. Configure the build settings:
| Setting | Value |
|---------|-------|
| Production branch | `main` |
| Build command | `npm run build` |
| Build output directory | `dist` |
5. Click **Save and Deploy**.
Cloudflare will install your dependencies, run the build, and deploy your site. You'll get a `*.pages.dev` URL within a couple of minutes.
From now on, every push to your `main` branch triggers an automatic rebuild and deploy. The free plan gives you 500 builds per month — that's roughly 16 deploys per day, which is plenty for a blog.
### Custom domain
To use your own domain:
1. In your Pages project, go to **Custom domains**.
2. Add your domain. If your domain is already on Cloudflare, the DNS records are configured automatically.
3. If not, you'll need to add a CNAME record pointing your domain to `.pages.dev`.
### Setting the Node.js version
Cloudflare Pages lets you control the Node.js version used during builds. Since Astro requires v22.12.0+, add an environment variable if your build fails with a Node version error:
1. In your Pages project, go to **Settings** > **Environment variables**.
2. Add `NODE_VERSION` with value `22`.
Alternatively, add a `.node-version` or `.nvmrc` file to your project root:
```
22
```
## Step 6: Set up automatic rebuilds with webhooks (optional)
If you want Cloudflare to rebuild when you update content from a CMS (not just Git pushes), you can use Cloudflare Deploy Hooks:
1. In your Pages project, go to **Settings** > **Builds** > **Deploy hooks**.
2. Create a webhook URL. This gives you a unique URL you can POST to trigger a build.
3. Configure your CMS to POST to that URL when content changes.
## What changed since this article was first published
The original version of this article was written in 2022 when Astro was younger and Cloudflare Pages was newer. A few things have changed:
- **Cloudflare acquired the Astro team** in January 2026. Astro remains open-source and platform-agnostic, but Cloudflare is now the company behind it.
- **The `@astrojs/cloudflare` adapter** (v13+) dropped support for Cloudflare Pages and now targets Cloudflare Workers only. This doesn't affect static sites — you don't need the adapter for a static blog deployed to Pages.
- **AstroWind moved** from `onwidget/astrowind` to `arthelokyo/astrowind` and upgraded to Astro v6 + Tailwind CSS v4.
- **The Bitdoze theme** was rewritten and is now at [github.com/bitdoze/bitdoze-astro-theme](https://github.com/bitdoze/bitdoze-astro-theme) with a new config structure.
- **Node.js requirement** increased to v22.12.0+ (was v16 in the original article).
## Next steps
- [Add responsive YouTube videos to Astro MDX](https://www.bitdoze.com/responsive-youtube-astrojs/)
- [Best Astro.js online courses and tutorials](https://www.bitdoze.com/best-astrojs-online-courses/)
- [Astro deployment docs](https://docs.astro.build/en/guides/deploy/cloudflare/) — covers Workers deployment if you need SSR later