Bitdoze Logo

How To Deploy An Astro.JS Blog On Cloudflare

Deploy an Astro.JS blog or website to CloudFlare Pages for free.

DragosDragos6 min read
How To Deploy An Astro.JS Blog On Cloudflare

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, 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:

If you’re coming from WordPress, see how we migrated a WordPress site to Astro.

You can also self-host Astro on your own VPS with Coolify or 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 — a blog-focused theme with tags, categories, series support, search, and RSS. Built with Tailwind CSS v4.
  • 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:

GitHub Use Template

Then clone it locally:

git clone [email protected]: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:

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:

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:

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:

---
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:

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:

npm run build

If the build succeeds, push to GitHub:

git add .
git commit -m "configured my website"
git push

Step 5: Deploy on Cloudflare Pages

  1. Log in to the Cloudflare dashboard.
  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
Cloudflare Pages build settings for Astro
  1. 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 <your-project>.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 with a new config structure.
  • Node.js requirement increased to v22.12.0+ (was v16 in the original article).

Next steps

#Astro

Related Posts