Vibe coded two websites with Claude Code

Overview

I vibe coded two websites with Claude Code, Anthropic’s AI coding assistant: my book blog, Kitaabein aur Koffee, and this website.

I am not a developer. I work in marketing, so I had never written a website from scratch. This project is about the decisions I made along the way, and how I reached the setup I use today.

The problem

I have worked with CMS platforms like WordPress and Wix. They are easy to start with, but they are heavy. Every page loads a lot of code that I can’t control, and that slows the page down. As a marketer, I know page speed affects both readers and search rankings.

My book blog was on Wix. Every time I wanted a faster page, I was limited by what the platform allowed.

The goal

A website that is:

• Fast to load.
• Simple-looking, without a complex design.
• Easy to manage and publish to, without spending time on styling and formatting every post.

How I reached the final setup

Decision 1: Why I decided to stop using Wix

I have used WordPress at several organisations I have worked with. WordPress is good for non-coders, but it is very heavy to load.

So when I wanted to build my book blog, Kitaabein aur Koffee, I looked for a platform that was easy to use, flexible to design and fast to load. When I searched for quick-loading websites, most suggestions were the same: skip the traditional setups and pick a beginner-friendly builder that handles hosting for you and has clean code or a built-in CDN (content delivery network). A few platform suggestions were Wix, Squarespace and Webflow.

I first tried Squarespace, and believe me, it is NOT beginner-friendly. Then I tried Wix.

Wix was easy to build on. It gave me the flexibility and the beginner-friendly factor I was looking for.

The challenge was the amount of time it took me to format my blog every time. I usually write my blog in Word and then copy-paste the content into Wix. Even though I had formatted the blog properly, with H2, H3, H4, bullets and so on, Wix never kept the formatting after pasting, and the text looked very bad. So after spending time on writing, I was spending even more time on styling.

Why was this a problem for me? I started the book blog to share my thoughts, reviews and summaries quickly, in the limited time I get after office hours. I was able to write a post quickly, but I couldn’t publish it quickly because styling took so long. And I am not talking about short posts, but posts with 5000+ words.

So I decided to stop using Wix and vibe code both websites: Kitaabein aur Koffee and Vinky Gola.

Decision 2: Deciding to vibe code

Building a static website meant two options: learn website building, or hire someone to build it for me. Both were out of scope. Learning first and then building would have taken a lot of time, and my Wix subscription was ending soon. Hiring a web developer was out of my budget.

But I had Claude Pro and access to Fable. So within a few days, I was able to build and set up both websites.

Decision 3: Deciding the tech stack

I didn’t know which tools were best for a simple, static website, so I didn’t pick them blindly. I told Claude my goal and asked it to suggest a stack.

Then I researched each tool myself, to understand how secure it is and what other people who use it think. That way I wasn’t just following whatever Claude suggested.

The final tech stack was Astro, TypeScript, GitHub and plain CSS, with no JavaScript framework.

Decision 4: Creating an instruction file

Before I asked Claude Code to design the website, I created an instruction file. It clearly listed the pages I wanted, the design, colours, font, font size, the tech stack we had finalised, the image file type and so on.

That file became a rulebook for Claude to follow, so it doesn’t deviate from what was finalised. It also means every new Claude Code session follows the same rules, even though it starts with no memory of the last one.

If you are vibe coding a project that will involve a lot of going back and forth, I would suggest creating an instruction file. In my experience, an AI coding assistant can change code in the middle of a task, even when you only asked it to change something else.

Decision 5: Using Obsidian for the content

As I mentioned earlier, I was using Word. I came across Obsidian at my current company and found it quite handy and easy to use. It was also easy to fit into my workflow.

Now I write content in Obsidian, with proper H2 and H3 headings, bullets, tables and so on. Then I commit and push it to GitHub. Cloudflare picks up the updated/new content from there, and Astro converts the Markdown into HTML pages.

So I am not spending time on styling the content after writing it. I format it in Obsidian, and once it is pushed to GitHub, the rest of the workflow takes care of it.

Decision 6: Using GitHub

One thing I noticed while working with Claude Code, and other AI coding assistants, is that they can rewrite a lot of code to make a small edit. They can also change blocks of code that didn’t need touching.

So I keep the code on GitHub and commit every change. I can always see exactly what changed, and go back if something goes wrong.

Decision 7: Hosting on Cloudflare Pages

Cloudflare Pages is connected to my GitHub repository. Whenever I push a change, it picks up the latest files, runs the Astro build to rebuild the HTML pages and publishes the updated website, usually within two minutes. There is nothing else I have to do.

How it works

Obsidian → Git commit → GitHub → Cloudflare Pages (pulls the latest files and runs the Astro build) → live website

1. Obsidian: I write a post in Markdown.
2. Git: it tracks the change, and I commit it.
3. GitHub: I push the project to its repository.
4. Cloudflare Pages: it picks up the change and pulls the latest files.
5. Astro build: Cloudflare runs it to regenerate all the HTML pages.
6. The live website: Cloudflare publishes the updated website, usually within two minutes.

The result

Both Kitaabein aur Koffee and this website are now live on Cloudflare Pages. I write a post in Obsidian and push it to GitHub. Cloudflare Pages picks up the change, runs Astro to rebuild the HTML pages and publishes the updated website, usually within two minutes.

The hours I used to spend styling a post in Wix now go into writing it, even when the post is 5000+ words long.