Steal this blog

This blog — the one you're reading right now — took two hours to build. Not two days. Not two sprints. Two hours, a conversation with an AI, and a spec.

No hand-written CSS. No framework. No template I found on GitHub and spent the weekend customizing. I wrote a specification, handed it to Claude, and deployed the result to Vercel. Lighthouse came back 100/100/100/100.

I'm going to show you exactly how I did it so you can do the same thing tonight. Not a version of it. This. The same stack, the same workflow, the same architecture. Steal it. I want you to.

The Setup: What You Need Before You Start

Here's what I walked in with:

• A Hashnode account with some blog posts in it. If you don't have posts yet, write two or three. You need something for the site to pull.

• A Claude account. The free tier works for the spec-writing phase. Claude Design — which handled the structured design and code handoff — is available on Pro, Max, Team, and Enterprise plans.

• A Vercel account (free tier is fine).

• A domain or subdomain you want to deploy to. Mine is blog.coada.dev. Yours can be whatever you want.

That's it. No local dev environment required to start. No dependencies to install upfront. You begin by writing, not coding.

Step 1: Write the Spec, Not the Code

This is the part that feels counterintuitive. You're going to spend the first hour not building anything.

Open Claude and start describing what you want. Not "build me a blog" — that's too vague to produce anything worth deploying. Describe the constraints:

• What should it look like? I wanted something minimal and typography-first, inspired by mitchellh.com. You might want something different. Describe it.

• Where does the content come from? Hashnode, in headless mode. You write there, the blog pulls from there at build time via GraphQL.

• Where does it deploy? Pick your platform. I used Vercel.

• What features do you need? I wanted a newsletter subscribe form, series support for multi-part posts, and an RSS feed. You might want more. You might want less. Say so.

Here's what's going to happen: Claude is going to push back on you. When I said I wanted to consume Hashnode's raw markdown, Claude pointed out that Hashnode's custom embed syntax (<a class="embed-card" href="url">url</a> for YouTube, Twitter, GitHub) would silently break in a standard remark pipeline. We documented the trade-off and chose to consume the pre-rendered HTML instead. That kind of decision is exactly what a spec is for — you make it once, clearly, before you're debugging a build error at midnight.

By the end of this step, you should have a document that covers your design requirements, your tech stack, your GraphQL queries, your project structure, your environment variables, and your deployment instructions. Mine ended up with eight Architecture Decision Records across five revisions. Yours might be simpler. That's fine. The point is that every decision is made before you write a line of code.

Step 2: From Spec to Design to Code

This is where Claude Design changed my workflow.

My old process used Replit for design. I'd prototype the UI there, export to a repository, and then bring in Claude Code to optimize and rebuild the codebase — because what Replit exported was never production-ready. That handoff was lossy. Claude Code had no idea what I'd been doing in Replit. It had to reverse-engineer my intent from exported code, figure out what I actually wanted, and rebuild accordingly. That loop typically took a day or two from start to finish.

Claude Design replaced Replit entirely. The spec I wrote in Claude Chat carried forward into Design, and Design's output carried forward into Code — same ecosystem, same context, zero re-explanation. There's no export step, no "here's a codebase I prototyped somewhere else, please figure out what I meant." Claude Code already knew the project because it came from the same conversation. The code it produced didn't need an optimization pass because the decisions were already made in the spec, not improvised during prototyping.

That's how two days became two hours. Not because the AI is faster at typing. Because the handoff disappeared.

Take your spec and push it into Claude Design. Design takes the conversational document and gives it structure — the project scaffold, the component hierarchy, the styling approach. Then hand it off to Claude Code.

Claude Code will build it. Here's what mine produced:

• An Astro static site with dynamic routes for posts and series.

• A GraphQL client that queries Hashnode's API at build time, paginating through all published posts.

• Series landing pages with prev/next navigation in the author-defined sort order.

• A single Vercel serverless function (/api/subscribe) that proxies newsletter subscriptions to Hashnode's API, keeping the access token server-side.

• An RSS feed with full post HTML.

• Vanilla CSS in one file. Zero client-side JavaScript except fifteen lines for the subscribe form.

Five npm dependencies total. The whole thing.

Step 3: Deploy and Wire It Up

This part takes fifteen minutes.

Vercel: Import your repo. Vercel auto-detects Astro and pre-fills the build config. Add your environment variables — your Hashnode publication host and access token, your site URL. Deploy.

DNS: Point your subdomain at Vercel. One CNAME record. Vercel provisions SSL automatically.

Webhook: Hashnode's built-in webhooks are unreliable at the time of writing, so here's the workaround I use. Connect your Hashnode blog to GitHub — Hashnode can back up every post as a commit to your repo. Then in your GitHub repo settings, add a webhook that fires on push events to your Vercel deploy hook URL (create one in Vercel under Settings → Git → Deploy Hooks). The flow becomes: publish on Hashnode → Hashnode commits to GitHub → GitHub webhook fires → Vercel rebuilds. One extra hop, but it's rock solid.

Headless mode: In Hashnode, go to your blog dashboard → Domain → Headless mode. Enter your blog's URL. Save. Hashnode stops rendering its own frontend and redirects readers to yours.

That's it. You're live.

Step 4: Publish Something and Watch It Work

Write a post on Hashnode. Hit publish. Hashnode commits to GitHub, the GitHub webhook fires to Vercel, and your new post appears on your custom blog within a minute or two. You didn't deploy anything. You didn't run a build command. You published on Hashnode and the rest happened automatically.

This is the part that makes headless mode worth it. You get the authoring experience of a polished CMS — rich editor, drafts, scheduling, series, newsletter management — with a frontend that's entirely yours. Best of both worlds.

Why This Worked in Two Hours

I want to be honest about the secret here, because it's not the tools. The tools are great — Claude Design genuinely replaced an entire step in my process. I used to design in Replit, export, then spend a day or two having Claude Code reverse-engineer and rebuild what I'd prototyped. Now the design and the code share the same context from the start. But the real reason this took two hours instead of two days is that I didn't start coding.

The spec forced every decision upfront. Vanilla CSS or Tailwind? Decided in the spec (vanilla — the site's styles fit in one file, a framework would add build tooling for no reason). Hashnode HTML or markdown? Decided in the spec (HTML — embed support would break otherwise). Server-side subscribe endpoint or client-side API call? Decided in the spec (server-side — the access token can't be in the browser).

When Claude Code picked up the spec, there were no ambiguities left. No "what should this look like?" No "where does this deploy?" No "how does the newsletter work?" All of that was answered. Implementation was execution.

If I'd started by writing code, I would have made those decisions under pressure — in the middle of a build error, or staring at a blank CSS file, or realizing at deploy time that my API key was in the client bundle. That's how a two-hour project becomes a weekend project.

The Lighthouse Scores (and Why They're Free)

100/100/100/100. Performance, Accessibility, Best Practices, SEO. No optimization passes. No performance tuning. No "let me run Lighthouse one more time and fix the orange ones."

This isn't a flex. It's a natural consequence of not shipping things you don't need. Astro outputs static HTML with zero JavaScript by default. Vanilla CSS is a single small file with no framework overhead. Images come from Hashnode's CDN, which already handles optimization. There's nothing to render-block on because there's nothing to render client-side.

The architecture decisions that produced these scores weren't performance decisions. They were simplicity decisions. The performance came free.

Now Steal It

I built this blog in two hours. You can do it faster because I've already made the decisions for you.

The entire specification — every design requirement, every architecture decision, every GraphQL query, every deployment instruction — is public. You can read it, fork it, and use it as the foundation for your own blog tonight:

github.com/coada-dev/blog/blob/main/PROJECT_SPEC.md

Or, if you want Claude to build from the spec with full context, paste the URL of this blog post into a new Claude conversation and tell it to build you a blog based on what I described. It'll pick up the architecture, the stack, the design philosophy, and the deployment target. You just fill in your own Hashnode publication and domain name.

Here's the path:

1. Start a conversation at claude.ai. The free tier works for spec authoring. Paste this post's URL or the spec link above and say "I want to build this." Claude will have full context on the architecture and can help you customize it for your setup.

2. Push into Claude Design. This is where the spec becomes a real project — structured, scaffolded, and ready for implementation. Design is available on Pro, Max, Team, and Enterprise plans. The handoff to Claude Code carries all the context forward. No re-explaining, no re-uploading, no lost context.

3. Let Claude Code build it. The spec is detailed enough that implementation is execution. You'll have a deployable Astro project in minutes.

4. Deploy to Vercel. Import the repo, add three environment variables, deploy. Connect Hashnode to GitHub, add a GitHub webhook to trigger Vercel rebuilds. Enable headless mode. You're live.

Here's What You Get

I want to be specific about what "live" means here, because the value proposition goes deeper than a pretty blog.

A global CDN for free. Vercel serves your static site from edge nodes worldwide. Your blog loads fast in São Paulo, Singapore, and San Francisco. You didn't configure this. You didn't pay for this. It's included.

A complete authoring pipeline without writing a single line of code. Hashnode gives you a rich editor, draft management, scheduled publishing, series for multi-part content, and subscriber management. You write there. Your blog pulls from there. Publish a post and it flows through GitHub to Vercel — your site rebuilds automatically. You never touch a terminal to publish a post.

Newsletter management through Kit. Your subscriber list, email campaigns, automation sequences, and analytics — all managed through Kit's purpose-built platform. The subscribe form on your blog feeds directly into this pipeline.

Analytics and performance monitoring built in. Vercel Web Analytics gives you privacy-friendly visitor tracking — pageviews, unique visitors, top pages, referrers, device breakdown — without cookies, without consent banners, and without a third-party script. Vercel Speed Insights monitors your real-user Core Web Vitals (LCP, INP, CLS) from actual visitor devices, not synthetic lab tests. Both are included on the free tier. You enable them with a toggle, not a configuration file.

A first-class web experience — 100/100/100/100 on Lighthouse. Performance, Accessibility, Best Practices, SEO — all perfect. Not after three optimization passes. Out of the box. Claude Design produced code that scores at the ceiling because the architecture decisions in the spec — static HTML, vanilla CSS, zero client-side JavaScript — don't leave room for performance problems. There's nothing to optimize when you don't ship anything unnecessary.

And the cost of all of this:

What	Cost
Hashnode (CMS, authoring, series, scheduling)	Free
Vercel (hosting, CDN, analytics, speed insights, SSL)	Free
Kit (newsletter management)	Free tier available
Claude (spec authoring on free tier)	Free
Claude Design → Code (full pipeline)	$20/month Pro plan

You're looking at a professional blog with a global CDN, automated publishing pipeline, newsletter management, analytics, performance monitoring, and a perfect Lighthouse score — for \(20/month or less. And most of that \)20 is paying for Claude, which you're probably already using for other things.

This isn't a side project. This is a production content platform that happens to be run by one person with no ops burden.

Go steal it. I mean it.