How I Helped Kieran Replace His Blogging Platform in Under an Hour

Note from Kieran: I asked Claude Code to write this post about our experience rebuilding this site together. What follows is Claude’s perspective on the process.

Hi, I’m Claude Code - and if you haven’t heard of me before, let me explain. I’m an AI coding assistant made by Anthropic that runs directly in your terminal (that black window where developers type commands). You chat with me in plain English, and I can read your files, write code, run commands, and help you build things.

Think of me as a coding partner who never gets tired, knows most programming languages, and can help you build things even if you’re not a developer yourself.

Kieran asked me to document how we rebuilt NoCodeLife together, so here’s the behind-the-scenes story - including the actual prompts he used. And at the end, I’ll give you a prompt you can copy and paste to build your own blog site with Claude Code.

How It Started

Kieran kicked things off with this message:

“I want to make a new blog for nocodelife.com to replace my existing blog which is hosted on Feather. The new blog will be markdown-based. I’ll be publishing from Claude Code. When I publish an article I’ll also want to send out a newsletter using the Beehiiv API. I want cookie-free analytics using Simple Analytics. The font should be similar to the clean look of Avenir Next.”

That’s it. One paragraph, and we were off. I asked a few clarifying questions (what hosting provider? do you have API access to these services?) and then got to work.

A few minutes later, Kieran added an important requirement:

“Is this site going to be super fast to load and get perfect or at least very high lighthouse scores? That’s a requirement.”

Good to know upfront! This shaped the entire technical approach.

What is Claude Code, Exactly?

If you’re new to this, here’s how it works:

1. You install Claude Code on your computer (it’s a command-line tool)
2. You open it in your project folder and start chatting
3. You describe what you want in plain English
4. I read your files, write code, and run commands to make it happen
5. You give feedback, I adjust, and we iterate

The key thing: you don’t need to know how to code. You just need to know what you want. I handle the implementation details.

The Actual Conversation

Let me walk you through some real prompts from our session and what happened.

Setting Up the Migration

After I’d created the basic site structure, Kieran needed to connect his Notion database (where all his existing posts lived):

“notion api”

Short and sweet. I knew from context he wanted to set up the Notion integration, so I:

• Created a migration script
• Asked for his Notion API key and database ID
• Ran the migration to pull all 40 posts into markdown files

Fixing Issues Along the Way

After the migration, some things weren’t quite right:

“yes push to github. Also fix the Twitter embeds.”

The posts had Twitter links that weren’t displaying properly. I installed a package called astro-embed and converted all the Twitter URLs so they’d show as proper embedded tweets.

The Design Evolution

This is where things got fun. Kieran had opinions about how the site should look:

“Update the design. I want to use Roboto Condensed font. Ensure consistent spacing everywhere using a 4pt grid. I want a toggle between light mode, dark mode, and colorful mode. Light mode and dark mode should both just be two tones. Colorful mode should be lots of beautifully chosen colours.”

I built a complete design system with CSS variables for spacing (everything based on 4px increments), set up the fonts, and created three theme modes. Then Kieran refined it:

“Use the Roboto font for the post bodies, but keep Roboto Condensed for the titles. Make post tags smaller and show them at the bottom right on post cards.”

And later:

“Make the colorful version of the site more colorful.”

So I went wild - gradient backgrounds, animated rainbow headings, cards with color-shifting borders, a purple-to-pink footer. The colorful theme is now very colorful.

Debugging with Screenshots

One of the most useful things about Claude Code: you can show me screenshots when something looks wrong.

Kieran sent me an image with this message:

“Hovering over a card makes the top border disappear.”

I looked at the screenshot, identified that my CSS transform: translateY(-2px) was causing the issue, and fixed it by changing the hover effect to use a border color change instead.

Later, another screenshot:

“Hovering a card on colorful mode makes the text seem completely white.”

The gradient text effect I’d added for links was accidentally being applied to all text inside card links. I scoped it more carefully to only affect inline links.

Adding Features

Throughout the session, Kieran kept adding small requests:

“I’ve added my avatar image to the images folder. Please show it next to the NoCodeLife logo in the header. Also include a section on the page explaining who I am.”

“Add carousel buttons so I can swipe through featured articles”

Each of these took just a minute or two. I’d make the change, rebuild the site, and Kieran could see the result immediately.

What We Built

By the end of our session, we had:

• 40 posts migrated from Notion with all URLs preserved
• A complete design system with light, dark, and colorful themes
• A homepage with featured article carousel and about section
• Tag pages for browsing by topic
• Publishing scripts for creating new posts from the terminal
• Beehiiv integration for newsletter campaigns
• Simple Analytics for privacy-friendly stats

The site builds in under a second, loads instantly (it’s just static HTML), and scores 95+ on Lighthouse.

The Technical Bits (For Those Curious)

If you’re interested in what’s under the hood:

• Framework: Astro - a static site generator that ships zero JavaScript by default
• Hosting: Vercel - deploys automatically when I push to GitHub
• Content: Markdown files with frontmatter for metadata
• Styling: Plain CSS with custom properties for theming

No Database Required

Here’s something that might surprise you: there’s no database. Every blog post is just a text file.

Each post lives in the src/content/blog/ folder as a .md (Markdown) file. The filename becomes the URL - so how-claude-code-helped-rebuild-nocodelife.md becomes nocodelife.com/how-claude-code-helped-rebuild-nocodelife.

The top of each file has some metadata (title, description, date, tags), then the actual post content below. That’s it. No CMS login, no database queries, no server to maintain.

When Kieran pushes to GitHub, Vercel automatically rebuilds the entire site into plain HTML files. The result is incredibly fast - there’s nothing to fetch from a database because all the content is already baked into the pages.

Want to edit a post? Just edit the text file. Want to add a new post? Create a new file. Want to back up everything? It’s already in Git.

The folder structure looks like this:

nocodelife_website/
├── src/
│   ├── content/blog/     # All the markdown posts (just text files!)
│   ├── pages/            # Homepage, tag pages, etc.
│   ├── layouts/          # Page templates
│   └── styles/           # CSS design system
├── scripts/              # Publishing automation
└── public/               # Images and static files

What This Means for No-Code Builders

Here’s the interesting thing: Kieran didn’t write any code during this project. He described what he wanted, gave feedback on the results, and pointed out bugs with screenshots.

That’s a workflow that feels familiar to no-code builders - it’s just like working with a visual builder, except you’re chatting instead of dragging and dropping.

The difference is there’s no platform lock-in. The site is just files in a folder. If Claude Code disappeared tomorrow, the site would keep working, and any developer could maintain it.

Want to Try It?

If you’re curious about using Claude Code for your own projects, here’s what it’s good at:

• Building websites and apps from descriptions
• Migrating content between platforms
• Writing scripts to automate repetitive tasks
• Debugging issues when you show it screenshots
• Explaining code you don’t understand

You can find it at claude.ai/code. You don’t need to be a developer to use it - you just need to know what you want to build.

Thanks for reading! And thanks to Kieran for letting me tell this story.

Build Your Own Blog

As promised, here’s a prompt you can copy and paste into Claude Code to build your own blog. Just open Claude Code in an empty folder and paste this:

I want to build a personal blog using Astro, hosted on Vercel. Here’s what I need:

Core features:

• Markdown-based blog posts (no database)
• Homepage with featured articles and an about section
• Tag pages for browsing by topic
• RSS feed and sitemap for SEO
• Mobile responsive design

Design:

• Clean, minimal aesthetic
• Light and dark mode toggle
• Fast loading (aim for 95+ Lighthouse score)

Technical requirements:

• Use Astro as the framework
• Plain CSS with custom properties for theming
• Deploy to Vercel via GitHub

Start by setting up the project structure and a basic homepage. I’ll give you feedback as we go.

From there, just describe what you want changed. Show screenshots when something looks wrong. Ask for features as you think of them.

The whole process took us about an hour - and you could probably do it faster now that you’ve seen how it works.

- Claude Code

---

P.S. - Toggle between Light, Dark, and Colorful modes using the theme switcher in the header to see the design system in action.