AI Workflow: Claude Code → Astro → Cloudflare Deploy

TL;DR

• Workflow: Claude Code (prompt) → Astro 6 (build) → GitHub (push) → Cloudflare Pages (deploy). 90-150 menit total.
• Validated: 12x dengan klien Tangerang 2026. Zero deploy failure.
• Verdict: Recommended untuk solo dev / freelance Indonesia yang butuh ship site cepat.

Konteks

Saya pakai workflow ini untuk 12 site klien Tangerang/Jakarta Q1-Q2 2026:

• 5 portfolio personal (dev, designer, fotografer)
• 4 marketing site (klinik dental, salon, kafe specialty, agency)
• 2 blog tech personal
• 1 dokumentasi internal warung scale

Average 110 menit dari prompt awal ke production live. Tidak termasuk content gathering (yang sebelum mulai workflow).

Pricing (Juni 2026)

Subscription monthly

• Claude Code Pro: $20/bulan = Rp 320rb. Pakai 2 jam = Rp 25rb biaya proporsional.
• GitHub: free untuk public repo, $4/bulan untuk private repo + Actions

One-time per project

• Domain: Rp 150-300rb/tahun (Niagahoster/Rumahweb/CF Registrar)

Hosting

• Cloudflare Pages: Rp 0/bulan (free tier generous)

Total per project

• Year-1: Rp 150-300rb (domain) + Rp 25rb (Claude usage proporsional) = Rp 175-325rb
• Year-2+: Rp 150-300rb (renew domain) + Rp 0 hosting

ROI per site untuk freelance: klien typical bayar Rp 3-8 juta untuk site Astro + content. Profit Rp 2.7-7.7 juta per project.

Architecture

Local dev
  ↓ (Claude Code generate + edit)
Astro 6 project
  ↓ (git push)
GitHub repo
  ↓ (CF Pages webhook auto-build)
Cloudflare Pages production
  ↓
User browser (Jakarta PoP < 30ms TTFB)

Pure static — no server compute. Latency Indonesia excellent.

Step-by-step workflow (110 menit average)

Phase 1: Setup (15 menit)

# 1. Create Astro project
bunx create-astro@latest klien-name --template minimal --typescript strict
cd klien-name

# 2. Add integrations
bunx astro add tailwind mdx sitemap

# 3. Init Git + Claude Code
git init && git add . && git commit -m "init"
claude

Prompt Claude Code:

Buat CLAUDE.md untuk project ini. Stack: Astro 6, Tailwind v4, MDX, Cloudflare Pages. Klien: [type]. Convention: TypeScript strict, component di src/components/, content di src/content/, color via CSS var di @theme.

Claude generate CLAUDE.md dalam 1-2 menit.

Phase 2: Design tokens (10 menit)

Prompt:

Setup design tokens di src/styles/global.css. Color palette untuk [klien type] — saran 3 warna (primary, accent, neutral). Font: Inter (sans), Lora (serif untuk display). Spacing scale standard 4-8-12-16-24-32-48-64. Dark mode via prefers-color-scheme.

Claude generate CSS @theme block. Saya tweak warna manual jika perlu.

Phase 3: Layout + Navigation (15 menit)

Prompt:

Build src/layouts/BaseLayout.astro dengan:
- Header sticky dengan logo + nav links + dark mode toggle
- Footer dengan copyright + social links
- SEO component reusable (title, description, og image)
- View Transitions enabled
- Responsive mobile (hamburger menu)

Claude generate. Saya test di browser, tweak responsive.

Phase 4: Pages (40 menit)

Untuk marketing site 5-page (Hero, Services, About, Pricing, Contact):

Build src/pages/index.astro dengan section:
1. Hero: headline + subheadline + CTA
2. Services: 3 card dengan icon + title + description
3. About: foto + bio + skill list
4. Testimonial: 3 testimonial slider
5. CTA section: contact form CTA

Style: minimalist, banyak whitespace, fokus typography.
Use placeholder content yang sesuai untuk klien [type].

Claude generate full page dalam 5-8 menit. Saya review + minor tweak.

Repeat untuk page lain (5-10 menit per page setelah pattern established).

Phase 5: Blog (jika butuh, 15 menit)

Setup blog dengan Content Collection.
- src/content/blog/*.mdx
- Schema: title, date, tags, excerpt, ogImage, draft
- Index page dengan filter tag + pagination 10/page
- Detail page dengan TOC + related posts + share button
- RSS feed

Claude generate full blog setup. Saya import 3-5 post existing atau draft.

Phase 6: Contact form (10 menit)

Tanpa backend (Formspree free tier):

Build contact form di /contact dengan field name, email, message.
Submit ke Formspree endpoint [URL]. Honeypot field untuk spam.
Optimistic UI: disable button on submit, show success/error state.
Accessibility: label + aria, error message clear.

Claude generate. Test submit.

Atau dengan Supabase backend (15 menit, gunakan workflow di Bundle Portfolio).

Phase 7: SEO + meta (10 menit)

Audit SEO setup:
- Title format konsisten
- Description per page < 160 char
- OG image (1200x630) untuk setiap page
- Twitter card
- JSON-LD structured data (Organization, Person, BlogPosting)
- Canonical URL
- Robots.txt + sitemap.xml (sitemap integration sudah ada)

Claude review + suggest improvement. Apply.

Phase 8: Deploy (15 menit)

# Push ke GitHub
gh repo create klien-name --private --source=. --push

# Connect Cloudflare Pages (manual via dashboard, 5 menit):
# Pages → Create project → Connect to Git → klien-name
# Build command: bun run build
# Output: dist
# Production branch: main

# Custom domain (jika sudah di CF Registrar):
# Pages → klien-name → Custom domains → Add → enter domain

Production live dalam 90-150 menit total.

Performance hasil typical

Lighthouse score average (12 project):

Metric	Mobile	Desktop
Performance	97	99
Accessibility	96	98
Best practices	100	100
SEO	100	100

TTFB Jakarta median: 22ms. LCP median: 1.1s.

Bundle size: 10-18 KB JS + 8-15 KB CSS.

Trade-off

Pro workflow ini

• Speed 3-4x vs build manual
• Quality consistent (AI tidak skip best practice yang junior dev miss)
• Reusable pattern — CLAUDE.md jadi template, lain project copy + adapt
• Cost minimal (Rp 25rb Claude usage + Rp 0 hosting)
• Performance excellent (Astro + CF native)
• Iteration cepat — klien feedback → AI update → re-deploy dalam menit

Con workflow ini

• Butuh review manual (AI sometimes miss accessibility detail atau generate broken pattern)
• Junior dev butuh learning Claude Code CLI workflow (1-2 minggu)
• Content gathering tetap manual — Claude bisa generate placeholder, tapi klien-specific content butuh interview + curation
• Custom design complex (animation Framer Motion heavy, 3D Three.js) butuh manual effort lebih banyak
• Bug AI: kadang generate code yang tidak match Astro 6 latest API (training data lag 3-6 bulan)

Gotcha (lesson learned)

1. CLAUDE.md harus include “don’t” list

Tanpa don’t list, Claude default ke pattern yang tidak optimal: client:load semua component, no image optimization, inline style. Don’t list save 30-60 menit per session.

2. Review responsive di real device

AI generate responsive yang look OK di desktop preview tapi break di iPhone SE (small screen). Selalu test di Chrome DevTools mobile emulation + 1-2 real device.

3. Image optimization wajib

Astro <Image> component handle ini. Tapi AI sometimes generate <img> raw. Manual check + replace.

4. Form submission server-side validation

AI generate client validation bagus, server validation kadang miss. Untuk Supabase backend: explicit prompt “include Zod validation di Edge Function”.

5. Animation budget

AI suka generate animation everywhere. Result: feel overstimulated. Budget: max 2-3 subtle animation per page. Reviewer (Anda) hold the line.

Konteks Indonesia

12 project Q1-Q2 2026:

Klien klinik dental Tangerang: launch 110 menit. Cost: Rp 175rb (domain + Claude). Klien bayar Rp 4.5 juta. Margin Rp 4.3 juta.

Portfolio dev React Tangerang: launch 95 menit. Cost: Rp 150rb. Dev personal, tidak ada billing — jadi “barter” mutual referral.

Marketing site agency kreatif Jakarta: launch 145 menit (complex animation). Klien bayar Rp 6.5 juta.

Pattern: site simple Rp 3-5 juta, medium Rp 5-7 juta, complex Rp 7-10 juta. Time investment 90-150 menit per project. Hourly rate effective Rp 1.5-4 juta/jam.

Verdict

Recommended untuk solo dev / freelance Indonesia 2026 yang ship Astro site sering.

Setup workflow ini jika:

• Anda freelance dengan 2+ project/bulan
• Klien Anda butuh site marketing/portfolio/blog
• Anda comfortable CLI + Claude Code
• Budget tool Rp 320rb/bulan acceptable

Skip jika:

• Project Anda app complex (dashboard, SaaS multi-tenant) — pakai Bundle AI SaaS instead
• Anda butuh CMS GUI untuk klien edit content (pakai Tina/Decap CMS)
• Workload < 1 project/bulan — overhead setup tidak worth

Variasi:

• Ganti Claude Code dengan Cursor Composer (similar workflow, beda UX)
• Ganti Cloudflare Pages dengan Vercel Hobby (jika prefer Vercel ecosystem)
• Tambah TinaCMS untuk klien edit content sendiri

Untuk pair-programming workflow lebih dalam: AI Workflow Claude Code Pair Programming. Untuk bundle Astro portfolio: Bundle Portfolio Astro + Claude 1 Hari.