Getting Started with Blogging in Astro using Cloudflare Pages, GitHub, VS Code and AI

Building a blog in 2026 has never been easier. With modern tools like Astro, Cloudflare Pages, GitHub, VS Code, and AI assistants, you can have a production-ready blog up and running in minutes. Let me show you how.

Why This Stack?

  • Astro: Lightning-fast static site generator with zero JavaScript by default
  • Cloudflare Pages: Free hosting with global CDN and automatic deployments
  • GitHub: Version control and automated CI/CD pipeline
  • VS Code: Powerful editor with excellent extensions
  • AI (GitHub Copilot): Accelerates development and content creation

Prerequisites

Before we begin, make sure you have:

  • Node.js (v18 or higher)
  • Git installed
  • A GitHub account
  • A Cloudflare account
  • VS Code with GitHub Copilot

Step 1: Create Your Astro Blog

Open your terminal in VS Code and create a new Astro project:

npm create astro@latest my-blog -- --template blog --yes
cd my-blog
npm install

This scaffolds a complete blog with sample posts, layouts, and styling.

Step 2: Add Cloudflare Pages Adapter

Astro needs an adapter to deploy to Cloudflare Pages:

npx astro add cloudflare --yes

This automatically:

  • Installs @astrojs/cloudflare
  • Updates astro.config.mjs with the adapter
  • Creates wrangler.jsonc for Cloudflare configuration

Step 3: Configure Your Blog

Update src/consts.ts with your blog details:

export const SITE_TITLE = 'Your Blog Name';
export const SITE_DESCRIPTION = 'Your blog description';

Update astro.config.mjs with your domain:

export default defineConfig({
  site: 'https://yourblog.com',
  integrations: [mdx(), sitemap()],
  adapter: cloudflare(),
});

Step 4: Push to GitHub

Initialize Git and push to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-blog.git
git push -u origin main

Step 5: Deploy to Cloudflare Pages

  1. Log in to Cloudflare Dashboard
  2. Go to Workers & Pages → Create Application → Pages
  3. Connect your GitHub repository
  4. Configure build settings:
    • Build command: npm run build
    • Build output directory: dist
  5. Click Save and Deploy

That’s it! Your blog is now live with automatic deployments on every push.

Step 6: Writing Your First Post

Create a new file in src/content/blog/ with this format:

---
title: 'My First Post'
description: 'Introduction to my blog'
pubDate: 'Jan 25 2026'
heroImage: '/blog-placeholder.jpg'
---

Your content here in Markdown format.

## Subheadings work great

You can use **bold**, *italic*, and [links](https://example.com).

Leveraging AI for Content

With GitHub Copilot or Claude in VS Code, you can:

Generate Content Ideas

Ask AI: “Give me 10 blog post ideas about web development”

Write Draft Content

Start typing a heading and let AI suggest paragraphs

Code Examples

AI can generate complete, working code snippets

Optimize SEO

Ask AI to improve your meta descriptions and titles

Pro Tips

1. Use MDX for Interactive Content

Rename your .md files to .mdx to embed React components:

import MyComponent from '../../components/MyComponent.astro';

<MyComponent />

2. Optimize Images

Place images in public/ folder or use Astro’s Image component:

import { Image } from 'astro:assets';
import myImage from '../assets/my-image.jpg';

<Image src={myImage} alt="Description" />

3. Add Analytics

Use Cloudflare Web Analytics (privacy-friendly and free):

<!-- In your layout -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
        data-cf-beacon='{"token": "your-token"}'></script>

4. Custom Domain

In Cloudflare Pages:

  1. Go to Custom domains
  2. Add your domain
  3. Update DNS records as instructed

5. Environment Variables

Store secrets in Cloudflare Pages:

  1. Go to Settings → Environment variables
  2. Add variables for production and preview

Development Workflow

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

AI-Assisted Blogging Workflow

  1. Brainstorm: Ask AI for topic ideas
  2. Outline: Have AI create a post structure
  3. Draft: Use AI to expand sections
  4. Edit: Review and personalize AI-generated content
  5. Optimize: Let AI improve SEO and readability
  6. Deploy: Push to GitHub for automatic deployment

Performance Benefits

With this stack, you get:

  • 0ms cold starts (Cloudflare Workers)
  • Global CDN - content served from 300+ locations
  • Static generation - pre-rendered pages
  • Edge rendering - dynamic content at the edge
  • Zero JavaScript by default - only ship what’s needed

Conclusion

Building a blog with Astro and Cloudflare Pages gives you a modern, performant platform that scales automatically. Combined with GitHub for version control and AI for content assistance, you have a powerful publishing workflow that’s both developer-friendly and free to start.

The best part? You own your content, control your infrastructure, and can extend it however you want.

Happy blogging! 🚀

Resources