Astro + Cloudflare Pages Blog Stack Analysis | vs Vercel, Netlify & WordPress

Introduction

When starting a tech blog, “which stack to build with” is not just a matter of preference. Speed, cost, maintenance, SEO, and scalability all depend on the stack. This article summarizes the pros and cons experienced from actually running a blog with Astro + Cloudflare Pages, and compares it with alternatives like Next.js + Vercel, Hugo + Netlify, WordPress, and Ghost. It provides criteria for judging “why this stack was chosen” or “when other stacks are better.” For Astro blog building methods, see Building a Tech Blog with Astro, and for Cloudflare Pages deployment, refer to Complete Cloudflare Pages Guide.

Reality in Practice

When learning development, everything seems clean and theoretical. But practice is different. You wrestle with legacy code, chase tight deadlines, and face unexpected bugs. The content covered in this article was initially learned as theory, but it was through applying it to actual projects that I realized “Ah, this is why it’s designed this way.” What stands out in my memory is the trial and error from my first project. I did everything by the book but couldn’t figure out why it wasn’t working, spending days struggling. Eventually, through a senior developer’s code review, I discovered the problem and learned a lot in the process. In this article, I’ll cover not just theory but also the pitfalls you might encounter in practice and how to solve them.

Table of Contents

1. Astro + Cloudflare Pages Advantages
2. Disadvantages and Tradeoffs
3. Comparison with Other Stacks
4. Real-World Operation Experience
5. Selection Criteria
6. Summary

---

1. Astro + Cloudflare Pages Advantages

1-1. Speed: Zero JS + Global CDN

Astro defaults to Zero JavaScript. Only HTML remains at build time, and components are added as islands only where interaction is needed. Results:

• TTFB (Time to First Byte): Cloudflare CDN 300+ cities → mostly under 50ms
• FCP (First Contentful Paint): No JS parsing → within 1 second
• Lighthouse Score: 90~100 points (including mobile) Comparison:
• Next.js: React hydration → initial JS bundle 100KB+
• WordPress: PHP rendering + plugins → TTFB 500ms~2 seconds

1-2. Cost: Free Unlimited Bandwidth

Item	Cloudflare Pages	Vercel	Netlify
Bandwidth	Unlimited	100GB/month	100GB/month
Builds	500/month	6,000 min/month	300 min/month
Requests	Unlimited	Unlimited	Unlimited
Actual Cost (100K monthly visitors):

• Astro + Cloudflare: $0 (free plan)
• Next.js + Vercel: $0~20 (if bandwidth exceeded)
• WordPress + VPS: $5~20 (server cost)

1-3. Security: No Server

Static sites have a small attack surface.

• No PHP/DB vulnerabilities
• No plugin updates needed
• DDoS automatically defended by Cloudflare WordPress Comparison: Monthly plugin/theme security patches needed, SQL Injection/XSS risks.

1-4. Developer Experience: Git + Markdown

Here’s an implementation example using text. Try running the code directly to see how it works.

Post writing flow:
1. Write markdown locally
2. Git commit & push
3. Automatic build & deploy
4. Check preview URL

Advantages:

• Version control (Git)
• Code review (PR)
• Easy rollback (deploy previous commit)
• Local preview (npm run dev) WordPress Comparison: Web editor, version control plugin needed, complex rollback.

1-5. Scalability: Edge Functions + D1/R2

Cloudflare Pages can run server logic on Edge with Workers-based Functions. Examples:

• View count API (D1 SQLite)
• Comment system (KV)
• Image resizing (R2 + Workers)
• Search API Code: Here’s a detailed implementation using JavaScript. Perform tasks efficiently with async processing. Please review the code to understand the role of each part.

// functions/api/views.js
export async function onRequest(context) {
  const db = context.env.DB;
  const slug = new URL(context.request.url).searchParams.get('slug');
  
  await db.prepare('UPDATE views SET count = count + 1 WHERE slug = ?')
    .bind(slug)
    .run();
  
  const result = await db.prepare('SELECT count FROM views WHERE slug = ?')
    .bind(slug)
    .first();
  
  return new Response(JSON.stringify({ views: result.count }));
}

---

2. Disadvantages and Tradeoffs

2-1. Difficult Non-Developer Editing

WordPress allows anyone to write posts with web editor, but Astro requires markdown + Git. Solutions:

• Headless CMS: Integrate Contentful, Strapi, Sanity
• Git-based CMS: Tina CMS, Decap CMS (formerly Netlify CMS)
• Notion API: Use Notion as CMS and fetch at build time Tradeoff: Increased complexity when adding CMS, free plan limitations.

2-2. Lack of Plugin Ecosystem

WordPress has 50,000+ plugins, but Astro requires direct implementation or npm packages. Examples:

• SEO: Write meta tags directly (WordPress has Yoast SEO)
• Forms: Cloudflare Workers or external service (WordPress has Contact Form 7)
• Analytics: Add Google Analytics script directly (WordPress has plugins) Advantages: No unnecessary features, lightweight.
  Disadvantages: Initial setup time.

2-3. Build Time (Large Pages)

With 1,000+ posts, builds can take 5~15 minutes.

Page Count	Astro	Hugo	Next.js
100	30s	5s	1min
1,000	5min	30s	10min
10,000	50min	5min	100min+
Solutions:

• Incremental builds: Use .astro cache
• Parallel rendering: Configure build.concurrency
• OG image caching: Regenerate only changed posts Hugo Comparison: Hugo is written in Go for overwhelmingly fast builds, but Astro has higher MDX/component flexibility.

2-4. Real-time Feature Limitations

Static sites don’t have real-time comments, chat, or notifications by default. Solutions:

• Comments: Giscus (GitHub Discussions), Utterances
• View counts: Cloudflare Workers + D1
• Search: Pagefind (static index) or Algolia WordPress Comparison: WordPress is DB-based so real-time features are default.

---

3. Comparison with Other Stacks

3-1. Next.js + Vercel

Item	Astro + Cloudflare	Next.js + Vercel
Speed	⭐⭐⭐⭐⭐ (Zero JS)	⭐⭐⭐⭐ (React hydration)
Cost	⭐⭐⭐⭐⭐ (free bandwidth)	⭐⭐⭐⭐ (100GB limit)
DX	⭐⭐⭐⭐	⭐⭐⭐⭐⭐ (smooth)
Flexibility	⭐⭐⭐⭐ (islands)	⭐⭐⭐⭐⭐ (React ecosystem)
SSR	⭐⭐⭐ (Workers)	⭐⭐⭐⭐⭐ (ISR, server components)
Learning Curve	⭐⭐⭐	⭐⭐⭐⭐ (React required)
Choose Astro when:

• Content is static with little interaction
• Want to maximize CDN cache hit rate with HTML complete at build time
• Want to save bandwidth costs
• Want to start lightweight without React Choose Next.js when:
• Dashboard/interactive UI is heavy
• Frequently update content with ISR (Incremental Static Regeneration)
• Actively use React ecosystem (libraries, components)
• Use Vercel Analytics/Speed Insights

3-2. Hugo + Netlify

Item	Astro + Cloudflare	Hugo + Netlify
Build Speed	⭐⭐⭐⭐ (5min/1K pages)	⭐⭐⭐⭐⭐ (30s/1K pages)
Components	⭐⭐⭐⭐⭐ (React/Vue)	⭐⭐ (Go templates only)
Learning Curve	⭐⭐⭐	⭐⭐ (Go template syntax)
Bandwidth	⭐⭐⭐⭐⭐ (unlimited)	⭐⭐⭐⭐ (100GB)
Choose Hugo when:

• 10,000+ pages (documentation site)
• Build speed is top priority
• Only simple templates needed Choose Astro when:
• Want to add interactive examples with MDX
• Want to reuse React/Vue components
• Familiar with JavaScript ecosystem

3-3. WordPress

Item	Astro + Cloudflare	WordPress
Speed	⭐⭐⭐⭐⭐ (static HTML)	⭐⭐⭐ (PHP/DB)
Cost	⭐⭐⭐⭐⭐ (free)	⭐⭐⭐ ($5~20/month)
Security	⭐⭐⭐⭐⭐ (no server)	⭐⭐ (many vulnerabilities)
Editing	⭐⭐ (markdown/Git)	⭐⭐⭐⭐⭐ (web editor)
Plugins	⭐⭐ (direct implementation)	⭐⭐⭐⭐⭐ (50K+)
SEO	⭐⭐⭐⭐⭐ (static HTML)	⭐⭐⭐⭐ (plugins)
Choose WordPress when:

• Non-developers write posts
• Want to quickly add features with plugins
• Need comments/membership/payment Choose Astro when:
• Developer blog (many code examples)
• Speed/security/cost is priority
• Want version control with Git

3-4. Ghost

Ghost is a Node.js-based blog platform, lighter and more modern than WordPress.

Item	Astro + Cloudflare	Ghost
Speed	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Editing	⭐⭐	⭐⭐⭐⭐⭐ (Markdown editor)
Cost	⭐⭐⭐⭐⭐	⭐⭐⭐ ($9~29/month)
Membership	⭐⭐ (direct implementation)	⭐⭐⭐⭐⭐ (built-in)
Choose Ghost when:

• Newsletter/paid subscription model
• Web editor + markdown
• Team collaboration (multiple authors)

---

4. Real-World Operation Experience

4-1. Advantages (Actually Experienced)

1. No Worries After Build Static HTML means no server crashes even with traffic spikes. Cloudflare CDN handles it automatically. 2. Predictable Costs Even with 1 million monthly visitors, it’s $0. WordPress requires server upgrade when traffic increases. 3. Manage Posts with Git

• Manage drafts with branches
• Review with PRs
• Track changes with commit history
• Easy rollback (git revert) 4. Strong Code Examples Can add executable examples with MDX.

import CodePlayground from '../components/CodePlayground.jsx';
<CodePlayground code="console.log('Hello')" />

4-2. Disadvantages (Actually Experienced)

1. Build Time 1,000 posts → 5~10 minute build. Must wait until deployment after typo fix. Solution: Preview locally with npm run dev, push only important posts first. 2. Complex Real-time Feature Implementation Must directly implement comments, view counts, and search. Solutions:

• Comments: Giscus (GitHub Discussions)
• View counts: Cloudflare Workers + D1
• Search: Pagefind (static index) 3. Difficult Collaboration with Non-Developers Post writing is difficult without knowing markdown/Git. Solution: Add Git-based CMS like Tina CMS, Decap CMS (increased complexity). 4. Manual Image Optimization WordPress automatically resizes and converts to WebP on upload, but Astro requires build scripts. Here’s an implementation example using JavaScript. Import necessary modules, perform tasks efficiently with async processing. Try running the code directly to see how it works.

// scripts/optimize-images.mjs
import sharp from 'sharp';
await sharp('public/images/photo.jpg')
  .resize(1200)
  .webp({ quality: 80 })
  .toFile('public/images/photo.webp');

---

5. Selection Criteria

5-1. Judging with Questions

Question	Yes →	No →
Developer running alone?	Astro + Cloudflare	WordPress/Ghost
100K+ monthly visitors?	Astro + Cloudflare	Anywhere OK
Heavy interactive UI?	Next.js + Vercel	Astro + Cloudflare
Build speed top priority?	Hugo + Netlify	Astro + Cloudflare
Need membership/payment?	Ghost/WordPress	Astro (direct implementation)
10,000+ pages?	Hugo	Astro (slow build)

5-2. Scenario-based Recommendations

Personal Tech Blog (many code examples):

• ✅ Astro + Cloudflare Pages
• Reason: Speed, free, Git management, MDX Team Blog (including non-developers):
• ✅ Ghost or WordPress
• Reason: Web editor, permission management Documentation Site (thousands of pages):
• ✅ Hugo + Netlify
• Reason: Build speed Product Blog (marketing/newsletter):
• ✅ Ghost or Next.js + Vercel
• Reason: Membership/subscription, email integration Portfolio + Blog:
• ✅ Astro + Cloudflare Pages
• Reason: Project pages (static) + blog in one site

---

6. Migration Considerations

6-1. WordPress → Astro

Advantages:

• 10x+ speed improvement
• $0 hosting cost
• No security worries Disadvantages:
• Post conversion work (HTML → markdown)
• Re-implement plugin features
• Fix image paths Tools:
• wordpress-export-to-markdown (npm)
• Move images to public/images/

6-2. Next.js → Astro

Advantages:

• Simple build output (HTML)
• Reduced client JS
• Cloudflare Pages free bandwidth Disadvantages:
• Rewrite React components (some)
• ISR → SSG conversion (cache strategy change) When to Consider?:
• When blog is mostly static content
• When Vercel bandwidth costs are burdensome

---

7. Summary

Key Summary

Astro + Cloudflare Pages is:

• Optimized for developer blogs
• Overwhelming in speed/cost/security
• Git + markdown workflow
• Flexibility with MDX/components Tradeoffs:
• Difficult non-developer editing
• Lack of plugin ecosystem
• Build time for large pages
• Direct implementation of real-time features

Recommended Scenarios

Situation	Recommended Stack
Personal tech blog (lots of code)	⭐ Astro + Cloudflare
Team blog (including non-developers)	WordPress, Ghost
Product blog (marketing)	Next.js + Vercel, Ghost
Documentation site (large pages)	Hugo + Netlify
Portfolio + blog	⭐ Astro + Cloudflare

Final Decision Criteria

1. Is editor a developer? → Yes: Astro, No: WordPress/Ghost
2. Heavy interaction? → Yes: Next.js, No: Astro/Hugo
3. Worried about bandwidth costs? → Yes: Cloudflare, No: Vercel/Netlify
4. Build speed top priority? → Yes: Hugo, No: Astro

Next Steps

Implementation guides after stack selection:

• Building a Tech Blog with Astro
• Complete Cloudflare Pages Guide
• Growing Tech Blog Traffic
• Node.js + GitHub Actions CI/CD References:
• Astro vs Next.js Official Comparison
• JAMstack Architecture
• Cloudflare Pages vs Vercel