How I Built a Personal Blog from Scratch in 1 Hour with Vibe Coding

My old blog ran on an Alibaba Cloud server — WordPress, Hong Kong node.

It worked. But the maintenance was a drag. Posting with AI meant navigating a clunky workflow. Changing a style meant logging into the dashboard, hunting through themes, fiddling with plugins. And every year: pay for the server again.

Today I moved everything out. The new site is built with Astro, deployed on Cloudflare Pages, with a domain bought directly from Cloudflare. No templates, no boilerplate — pure Vibe Coding. It took about an hour.

This is the complete record.

Start With the Right Question

Most people jump straight to “which framework should I use?” The better question is: what do I actually need?

My answer was simple:

• A place to publish articles and images
• Fast loading
• Low maintenance cost — ideally free
• Easy to use with AI for publishing

That pointed clearly at one thing: a static website. No database, no server-side runtime. Just a folder of HTML files sitting on a CDN.

What is a static site? Unlike WordPress, a static site has no program running on a server waiting for requests. Articles are pre-compiled into HTML files at build time. The result: faster loading, no server to maintain, and virtually impossible to hack. The trade-off is a small “write → build → deploy” loop for publishing — but with AI and GitHub, that loop becomes almost invisible.

The Stack: Cloudflare All the Way

Vibe Coding is at its best when you combine a set of free tools into a complete system.

Cloudflare’s free tier is effectively unlimited for a personal blog: unlimited Pages deployments, 100,000 requests per day, 10GB of R2 storage, 5GB D1 database. And if you ever grow beyond that, the same stack scales with you — no migration needed.

Step 1: Design with Dribbble + Figma AI (15 minutes)

This is the step most people skip — and the one most worth doing.

If you tell an AI “build me a blog,” you’ll get something generic with zero personality. You’ll spend the next hour making vague corrections and getting mediocre results.

The better approach has three layers:

Layer 1: Find inspiration on Dribbble

Go to Dribbble and search blog design. Find something that visually resonates with you and save a screenshot. I found a clean, dark-green minimal blog — it just felt right. That’s the point. Trust the feeling.

Layer 2: Use Figma AI to generate your own design

Feed the screenshot to Figma AI and ask it to generate a similar style for your own site. You’re not copying — you’re saying “same vibe, different content.” That’s Vibe Design.

Figma AI produced design screens for four pages: homepage, blog listing, article detail, and About.

Layer 3: Extract exact color values

A design file gives you precise numbers to work with:

• Background: #F5F5F0 (off-white, easy on the eyes)
• Primary: #1B5E57 (deep green, grounded and distinctive)
• Accent: #E8824A (orange, used sparingly so it pops)
• Card background: #FFFFFF
• Secondary text: #6B7280

These weren’t arbitrary choices — they were derived from the Dribbble reference, refined through Figma AI, and extracted as exact values.

Why does this matter? Because when you give Claude Code specific color values and a reference design, your prompts become precise. Precise prompts produce high-quality output on the first try. The investment in design pays for itself in less back-and-forth with the AI.

Step 2: Generate the Project with Claude Code (20 minutes)

Claude Code is Anthropic’s AI coding tool that runs directly in your terminal. It reads your files, writes code, and runs commands — all from a conversation.

# Install
sudo npm install -g @anthropic-ai/claude-code

# Navigate to your project folder, then launch
claude

Send it your Figma screenshots and a detailed description of what you need. Your prompt should include: the tech stack, exact color values, and a description of each page’s components.

Practical tip #1: Split your prompt into two messages

Claude Code has an output token limit. If your requirements are too long, it’ll error out. Break it into two:

• Message 1: Project setup, config files, Nav, Footer, example post
• Message 2: All page implementations (homepage, blog listing, article detail, About)

Confirm the first message worked before sending the second.

Practical tip #2: Debug with text, not screenshots

When something looks wrong, describe it in words — don’t paste a screenshot. Too many images in a session triggers a dimension limit error. Text descriptions are usually clearer anyway.

Once the project is generated:

npm install
npm run dev

Open localhost:4321. The first time you see your own designed blog actually running — that feeling is worth remembering.

Step 3: Migrate Old Blog Content (10 minutes)

If you’re coming from WordPress: Dashboard → Tools → Export → Download the XML file.

Then run this in your terminal:

cd ~/Desktop
npx wordpress-export-to-markdown --input="your-export-file.xml"

This converts all your posts to .md files and downloads images to your local machine.

When it’s done:

• .md files → copy to src/content/blog/
• Images → copy to public/images/

No old blog? No problem. Skip this step entirely. Just create a new .md file in src/content/blog/ and that’s your first post. Markdown is simple enough that you can have an AI draft the whole thing for you.

Step 4: Deploy to Cloudflare Pages (5 minutes)

Push your code to GitHub:

git init
git add .
git commit -m "init: my blog"
git remote add origin https://github.com/yourusername/yourrepo.git
git push -u origin main

Then in Cloudflare’s dashboard:

1. Workers & Pages → Create → Connect to Git
2. Select your GitHub repository
3. Build command: npm run build, output directory: dist
4. Deploy

About two minutes later, your site is live at an xxx.pages.dev URL.

Step 5: Connect Your Domain (5 minutes)

Buying a domain through Cloudflare has one major advantage: DNS is configured automatically — no nameserver changes needed.

Domain Registration → Register Domains → search → buy. Cloudflare sells at cost, no markup.

After purchase: Pages project → Custom domains → enter your domain → Confirm. DNS records are created automatically, SSL certificate is issued automatically, and the domain is live within minutes.

One small improvement: add a _redirects file in your public/ folder:

/ /en/ 301

This tells Cloudflare to do a proper HTTP 301 redirect at the network level — no visible “redirecting…” flash, and search engines love it.

After Launch: The AI Publishing Workflow

Getting the site live is the beginning. Now, publishing a post looks like this:

Write article in Markdown (AI can draft it)
→ Save to src/content/blog/
→ git push
→ Cloudflare auto-deploys (≈ 2 minutes)
→ Post is live

No dashboard to log into. No publish button to click. Pure text-based workflow — exactly how AI tools work best.

Time Log

Vibe Coding works when you know what you want.

Design: Dribbble finds the feeling, Figma AI makes it real. Development: Claude Code builds it. Infrastructure: Cloudflare runs it.

Your job is to connect the tools and make decisions.

You don’t need to be a frontend engineer to have a good-looking website that’s genuinely yours.