How I Vibe Coded a Real Personal Website (Without Being an Engineer)

I had been bouncing between paying for a Notion site and looking at Squarespace, getting more frustrated with both. Notion was slow and felt boxed in the moment I wanted anything custom. Squarespace was somehow more expensive for less control. What I actually wanted was a personal site that felt like mine, didn’t drain a credit card every month, and let me focus on writing instead of maintenance. I had no idea how to build one. I’m not an engineer. So I asked Claude to help me figure it out.

The middle ground exists but you have to know to ask for it

A lot of non engineers want a real website and end up locked into one of two bad options. The drag and drop platforms (Squarespace, Webflow, Notion sites) start cheap and get expensive fast, and you don’t really own anything. The DIY world is all engineer first. Read this documentation. Run this command. Configure this file. I’m a writer and a consultant. I can’t read code. But I know what I want a site to look and feel like, and I have opinions about my own words.

The middle ground (a real website that I actually own, designed by me, hosted somewhere I trust, without me learning to be a developer) is a hole the existing tools don’t fill. Until you have an AI in the conversation with you.

What I tried first and hated

Notion as a website. Too slow on load. Limited customization the moment I wanted anything outside their templates. The cost was creeping up.

Squarespace. The templates looked good. Then I priced it out at the tier I’d actually need. Then I realized I’d be paying for it forever and any future migration would be painful.

Just learning to code. Tried for about an hour. Closed the tab.

Each of these felt like the only options. The problem wasn’t the tools. It was that nobody who actually builds websites for a living was talking to me at my level, and the people at my level were paying way too much for way too little.

The conversation with Claude that figured it out

So I sat down with Claude and described what I wanted: a personal site, mine, cheap, fast, customizable, somewhere I could write and have it actually publish. The first answer back was ‘host it on GitHub and deploy with Vercel.’

I pushed back immediately. ‘Isn’t GitHub too engineery? I’m not a coder.’

What Claude walked me through is that GitHub at its simplest is a folder. A folder that lives online and keeps a history of every change. You don’t have to write code to use it. You can put a file in there with words and GitHub will store it. Vercel is the layer on top. It watches that folder, and whenever something changes, it turns the contents into a real website that anyone can visit. The two of them together cost zero dollars a month at the scale of a personal site. That was the unlock. Once I knew hosting wasn’t out of reach, the rest of the stack came together one question at a time.

‘What do I use for the actual site framework?’ Claude suggested Astro. Static. Fast. Designed for content sites. Claude knows it well so it could write the templates and the layouts and the routing without me touching any of it.

‘What about the design?’ Tailwind. Claude could iterate on the look as I gave it taste calls. ‘Make this card warmer.’ ‘Give this more breathing room.’ ‘Use more cream and less white.’ Each call turned into the right CSS classes within seconds.

‘I don’t want to draft in markdown files. Where do I actually write?’ Notion. Keep using the surface I already think in. A GitHub Action would handle the pipe from Notion to the site, so I could draft in the place that felt natural and the publishing would just happen.

‘How do I know when something deploys?’ Telegram. Claude wired in a bot that pings me when a new post goes live.

Each piece was a question I asked. Each answer was Claude proposing something, explaining why it fit, and walking me through what would actually be required from me (which was usually nothing). I never read documentation. I never wrote a config file. I described what I wanted and Claude built it.

What we landed on

The stack ended up being five pieces, each one introduced by a question I had:

Astro as the site framework. Turns markdown files into a real website.
Vercel as the host. Watches the GitHub repo and redeploys when anything changes.
Tailwind for the look. The cream backgrounds, deep greens, and warm typography you’re reading right now are Tailwind classes Claude wrote based on my taste calls.
Notion as my writing surface. Every blog idea, draft, and published piece lives in a database called the Content Vault. Markdown isn’t a language I write fluently. I don’t need to.
GitHub Actions as the connective tissue. When I mark a draft as Ready in Notion, an Action Claude wrote picks it up, generates an illustration through the image pipeline (which I wrote about here), writes the markdown file to the repo, commits, and pushes. Vercel sees the push, rebuilds the site in about a minute, and the post is live. A Telegram bot pings me on my phone.

From the moment I click Ready in Notion to the post being live: about three minutes of work I don’t have to do. From the original Notion site frustration to a working personal website: a few weekends of conversations like the GitHub one above.

Total cost per month at my current traffic: about zero dollars.

Jay at a kitchen counter checking his phone with a satisfied expression after a deploy

The shipping moment: click Ready in Notion, walk away from the laptop, see the Telegram ping when the site rebuilds and the post is live.

Use this same pattern for your own work

You don’t need this exact stack. The pattern is: tell Claude what you actually want (cheap, fast, customizable, no platform lock in), push back when something sounds intimidating, and let Claude walk you through it before you decide it’s too technical. The ‘isn’t GitHub too engineery?’ question was the one that almost stopped me. The two minutes Claude spent answering it changed everything.

Jay reviewing a website mockup on his laptop at a Tokyo coffee shop window seat

Start with one piece. Add the next when the friction shows up. The whole stack came together one conversation at a time over a year.

A few different starting points depending on where you are:

The simplest stack: Notion plus a free Vercel domain. Use Notion’s built in ‘publish to web’ feature and point a Vercel domain at it. Zero code. Slower to load and less customizable, but you’re online in 20 minutes and can graduate from there when you outgrow it.

The middle stack: Astro plus Vercel plus markdown files in the repo. Skip Notion for now. Have Claude write your posts straight into markdown files in the repo. Push to GitHub, Vercel deploys. Cleanest stack for someone who wants more control and faster pages but isn’t ready for the Notion publish flow yet.

The full stack: same shape as mine. Notion for drafting, GitHub Actions for the publish workflow, image pipeline for illustrations, Vercel for deploys, Telegram for notifications. Best when you’re publishing weekly or more often and want the mechanical work to disappear so you can spend your time on the writing.

The stack to skip: WordPress. It still works for some use cases but it’s heavy, the AI tools don’t know it as well as they know modern frameworks, and you’ll spend more time on plugins than on writing. If you’re starting fresh in 2026, skip it.

What I’d build differently

A few things still rough about this stack.

The Notion to GitHub handoff sometimes drops formatting. Lists turn into paragraphs, links lose their hrefs, code blocks come out without their language hints. Claude wrote a small Python script that catches the most common issues but it’s not perfect. Worth a second pass before publishing long posts.

The image pipeline generates one image per post and the cost adds up if you regenerate often. The free Gemini tier gets you started, but as you publish more you’ll need a paid plan. Budget for it.

Claude and I haven’t built a good preview flow yet. The way I check posts before publishing is to ask Claude to push a preview branch to Vercel and read the rendered version on a staging URL. That’s clunky. A proper local Astro dev server with hot reload would be cleaner. Probably the next thing I’ll ask Claude to set up.

This stack assumes you’re comfortable copying terminal commands or asking Claude to copy them for you. The pieces hide most of the complexity but not all of it. You’ll have a few ‘what does this error mean’ moments. Claude resolves them in seconds once you paste them in, but they happen.

Sources:

Astro documentation, the framework’s official docs, the best place to start.
Vercel free tier, more than enough for a personal site.
How I Got AI to Draw the Same Character Every Time, the image pipeline that runs alongside this stack.
The MCP Servers I Use With Claude, the connections that let Claude help me build and maintain all of this.

Part of the Build with AI series on leadhuman.ai.