From Zero to Live Website in Hours with Claude Code (Plus 5 Tips You’ll Wish You Knew Sooner)

Intro

By now, I’ve been building websites for years, usually relying on React, Next.js or whatever framework I’m comfortable with at the moment. That works, what if there’s something better out there? How will I know if I’m always using the same tools?

Well, thanks to AI tools like ChatGPT or Claude, exploring this is way easier than a few years ago.

For today’s experiment, I’m going to build a personal website for my friend Rocky the Penguin (a fictional character I made up) from scratch to production in under 5 hours.

Here’s how I did it step by step, what I learned, and 5 lessons that’ll save you hours next time you work with AI.

Step 1: Building Context - Meet Rocky

When working with AI, before touching any code, it’s always a good idea to prepare a document with your goals, plans and/or requirements and share it with the model. You can do that by yourself, or also use AI.

For this project, I needed to make up my character, Rocky, a penguin living in Antarctica who collects rocks and wants a personal blog to share his findings.

So, I opened Claude (not Claude Code yet) and started a new conversation with this prompt:

I want to create my own website, but first I need a document with information about me, my life, context, page sections, and any relevant details.

Ask me questions one by one until you have enough context.

And after 20 minutes of back and forth, Claude learned what my plans were. I ended the conversation asking it to create a document summarizing everything we discussed.

Lesson One: Talk to Claude Like a Teammate

Asking one question at a time changes everything. It keeps the rhythm focused, like pair-programming with a real person. Each exchange feels faster and more productive.

Always ask Claude to put final output in an Artifact. It’s clean, organized, and easy to copy.

Pro tip: ChatGPT has voice mode. Speaking is faster than typing. Claude doesn’t have this yet, but keeping messages short and conversational helps maintain that pace.

Step 2: Picking a Framework and Template

To decide what framework to use, I asked Claude which were the most popular tools to build personal websites in 2025. The one I liked the most was Astro, lots of stars on GitHub, designed for content-heavy sites, and with great templates.

After 15 minutes browsing the Astro’s template gallery, I found a template I really liked for Rocky: Sorolla Portfolio. It fits the style I was looking for and gave me a solid starting point.

Step 3: Setting Up the Dev Environment

Create the Project Folder

This is the folder where all our code and resources will live. I named this folder rocky-blog, and the first thing we’ll add is the context summary we built in step 1.

Claude Code has a special file where to put context information, CLAUDE.md. According to Anthropic’s official documentation:

CLAUDE.md is a special file that Claude automatically pulls into context when starting a conversation.

I filled my CLAUDE.md file with all the project details, tech stack, template choice and Rocky’s character information. That way I wouldn’t have to re-explain everything in each conversation.

For this project I used Visual Studio Code as my code editor, and GitHub to upload the code.

This is how my VS Code window looked at this point

Installing Claude Code

Claude Code is a special tool that lets Claude interact with your project directly without you having to copy/paste everything all the time. It also uses the Claude model under the hood.

To install it, open your VS Code terminal and run this command:

# ~/git_workspaces/rocky-blog
npm install -g @anthropic-ai/claude-code

Also, make sure the Claude Code extension is installed in VS Code

To open Claude Code, click that orange button in the navigation bar, at the top right. When you send any message, it automatically reads your CLAUDE.md file and loads you project context.

Downloading the Astro Template

Claude Code is installed and working, so let’s use it to install the template we chose.

We already wrote some instructions about this in our CLAUDE.md file:

# Technical Details
- I want to build the website using Astro
- I plan to upload my page in github pages
- I liked this template, I want to start from there
    - https://astro.build/themes/details/sorollaportfolio/
- Please start with the template, and then do incremental changes

So, in the Claude Code tab, I cleared the conversation with the command /clear (opening a new conversation also works), and then I wrote:

Hello, I wrote what I want to do in CLAUDE.md. Can we start with installing the template?

Claude’s response was:

⏺ I can see from your CLAUDE.md that you want to build a website for Rocky the Penguin's rock collection using Astro, starting with the Sorolla Portfolio template. Let me help you get started!

It made changes for ~2 minutes. The updates were basically cloning the template, installing dependencies, and start the dev server.

⏺ Perfect! The template is working. The development server is running at http://localhost:4321/.

Lesson Two: Stay in the Driver’s Seat

Claude can build large features on its own, but letting it run unchecked can shift scope or introduce bugs you’ll have to debug later.

Stay in control. You’re still responsible for the final code. Let Claude handle the heavy lifting, but keep your hands on the wheel.

Don’t be afraid of interrupting when necessary.

If you have any question so far about anything, don’t forget the chat window is still open. Feel free to ask anything that crosses your mind. Be curious and take advantage of Claude’s infinite patience.

I asked how to start the server, then closed the conversation, and started the server myself by running this in the terminal:

npm install && npm run dev

# Output
20:51:08 [@astrojs/netlify] Enabling sessions with Netlify Blobs
20:51:08 [vite] Environment loaded
20:51:08 [vite] Middleware loaded. Emulating features: blobs, edgeFunctions, functions, geolocation, headers, images, redirects, static.
20:51:08 [vite] 💭 Linking this project to a Netlify site lets you deploy your site, use any environment variables defined on your team and site and much more. Run npx netlify init to get started.
20:51:08 [types] Generated 0ms
20:51:08 [content] Syncing content
20:51:08 [content] Synced content
20:51:08 [vite] Re-optimizing dependencies because lockfile has changed

 astro  v5.14.1 ready in 1421 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

20:51:08 watching for file changes...

Like Claude said, you can see the page at this link http://localhost:4321.

Lesson Three: Save Often So You Can Experiment Freely

Save your progress at any stable point. Things break, and having checkpoints means you can roll back without losing hours of work.

It also means you can try a risky prompt, and if it doesn’t work you can go back in time.

For this project, I used git commit every time I reached a stable point. Here is a list with the git commands I use the most:

# save your current progress
git add .
git commit -m "<some descriptive message>"

# see list of all commits
git log

# revert all uncommitted changes
git reset --hard

# uncommit the last commit
git reset --soft HEAD~

# see what files changed
git status

# undo all changes in a specific file
git checkout <filename>

Step 4: Customizing the template

The setup is done. Now it’s time for the most exciting part: let’s add some customization.

First Iteration

One more time, we’ll take advantage of our plan being in the CLAUDE.md file and we will write:

Read CLAUDE.md. The template is already installed. Now it's time to continue with the next step and customize the content

Claude answer:

I'll help you implement Rocky's penguin rock collection website using the Astro template. Let me start by exploring the current state of the project and then plan the implementation.

And after a few minutes:

⏺ Perfect! I've successfully implemented Rocky's website with the
  following key changes:

  ✅ Site Constants: Updated title to "Rocky's Rock Collection"
  ✅ Homepage Hero: Customized with Rocky's introduction and story
  ✅ Navigation: Updated header with rock emoji logo
  ✅ About Page: Rewritten with Rocky's personality and background
  ✅ Sample Blog Post: Created "My First Antarctic Meteorite" story
  ✅ Development Server: Running at http://localhost:4321/

It says it is done, so let’s run npm run dev and see the changes with our own eyes.

Homepage

There is some progress, icons are updated to penguin and rocks, and the copy tells Rocky’s story. Good start, we still need need to update the colors and the images, but we are moving in the right direction.

Blogpost entries

We have one original Rocky story! And you can even read more if you click:

It was during one of the worst blizzards I’d experienced in my 7 years of life. Most of the colony had huddled together for warmth, but I couldn’t resist the call of adventure. The wind was howling so loudly that I could barely hear my own footsteps on the ice.

This is awesome, we need to add a couple more of these, and remove the default ones, but at least we have an idea of how it will look.

About me

The copy was also updated, but the template images and most of the original content is still there. We need more customization.

Verdict

We’re heading in the right direction, but the result is still mostly a template with light customization. In the next section, we’ll organize our feedback and act on it, bringing us closer to our desired outcome.

Step 5: Polishing the Website

How can we organize the feedback in a useful manner? Should we write another document and just give that to Claude? Start a conversation?

There is no single right answer, many different approaches could lead you in the right direction.

My approach: Divide and conquer. Instead of writing vague pieces of feedback, or long feedback documents, I made a list with everything I wanted to improve, and then I tackled them one by one.

• Remove unused template content
• Replace template images
• Use custom icons instead of emojis
• Update color palette for Antarctica theme
• Add more blog entries

Let’s see how Claude did in each item.

Remove Template Defaults

Prompt:

Feedback
  - The main page still has text from the template that is unrelated to my website, like "Adrianna Geo".
  - Leave just 3 cards, like the one about Rocky finding the meteorite
  - Remove all the template text and components unrelated to the blog

Claude then went file by file removing all the unnecessary components, and it even added two more Rocky stories:

Updating Colors

Prompt:

Change the colors to match Antarctica and penguins. Apply this to all buttons, shadows, and backgrounds.

Claude nailed it on the first try:

Replacing Images and Icons

This wasn’t as straightforward as the others.

I first tried the lazy approach:

Replace all the images and emojis with with custom resources you can find on the internet

This failed. Claude couldn’t decide which images were good or bad, and struggled to add them to the project.

After a few attempts I realized we needed human input, so I went to Flaticon for icons and for Pexels for photos, and then I downloaded what I wanted and put everything in a new /media folder.

You can see all the images in here.

Lesson Four: Use Whatever Format Communicates Best

Don’t limit yourself to text. Use lists, code blocks, screenshots, or files—whatever makes your request clearer.

In this case, I wanted to include attribution for all images. Instead of typing each link in chat, I created a text file:

rock:
    <a href="https://www.flaticon.com/free-icons/asteroid" title="Asteroid icons">Asteroid icons created by mnauliady - Flaticon</a>
...

And then I told Claude

Replace template images with the real ones. I added /media folder with all the images and a "files.txt" with sources.
- Replace all the template images and icons with the ones I provided.
- File names should give you clues about when to use each resource
- Add a reference back to the original source

Claude got 90% right. I fixed the remaining 10% with follow-up prompts. For instance:

The meteorite blogpost card is still using the template icon. Use the one I provided.

I could have done the same for CSS tweaks (e.g. centering, padding), and it would have worked, but I decided to fix them manually.

Lesson Five: Do It Yourself When It’s Faster

If Claude keeps missing simple fixes after a few tries, just do it yourself. Don’t waste time over-explaining what you could fix in 30 seconds.

Claude is a powerful tool, but you’re still the one in charge. Know when to stop prompting and start doing.

Step 6: Publish

And finally, after all our hard work, our website is ready! There are still things we could improve, but I think we are in a good place to publish. Here’s the final result:

Rocky’s site went from generic template to personalized penguin blog. Now is deploy time!

I’ve had good experiences with Github Pages and Railway in the past. But this time I decided to try Cloudflare Pages. I have read good comments about it and I already have a domain name there I wanted to use. Don’t worry if you are not familiar with Cloudflare, we’ll go step by step.

Testing Production Build

Up to this point we have been using Astro in dev mode. Dev mode has features to make the development experience better, like hot reload and detailed errors, but production needs an optimized build that loads fast and is as efficient as possible.

Luckily, Astro already solves this problem for us. To test the production mode, we can run:

npm run build           
npm run preview

When I did it, I immediately found a CSS loading issue:

So, I went back to Claude once more with:

The production version isn't working. The website doesn't have any styles applied

It fixed the issue in seconds:

There was only one more thing, that broken image in the header:

The rock image in the header is missing: please use rock.png.

And it was fixed! Production now matches dev.

Pushing to GitHub

GitHub is the biggest code repository in the market. Their main job is to store your code, in public or private repositories, for free.

(if you haven’t) Create a GitHub account, and then click “New” to create a new repository.

Follow the “create a new repository” instructions

In this case, the commands should be like:

# ~/rocky-blog  make sure you are in the project folder
git init

# add all the files in the folder
git add .

# save the changes
git commit -m 'my blog website'

# push to github
git remote add origin <your-repository-url>
git push -u origin main

Refresh the page. You should see your code:

Deploying to Cloudflare

1. Create a Cloudflare account

2. Go “Workers & Pages” in the left header

   

3. Click “Create application”

   

4. Select Pages > Import an existing Git repository

   

5. Add your GitHub account, and then select your repository

   

6. Continue with the setup and make sure the “Build command” and “Build output directory” are correct

   

7. Continue, and congratulations! Your website is deployed!

   

   Click the preview link to see your live site.

8. (optional) Add a custom domain. I added Rocky’s site as a subdomain of my existing domain. In my case I already had a domain in Cloudflare, so I added the page as a subdomain

   

Site is now live at https://rocky-the-penguin.gonzalabs.io.

If you push any other change to GitHub, the website will deploy automatically.

Takeaways

And that was it! Building a website with Claude Code and Astro was fast and fun. The combination of AI assisted coding and a well defined framework made the development way faster.

The 5 lessons:

1. Talk to Claude like a teammate — conversational, one step at a time
2. Stay in control — interrupt at checkpoints, don’t let it run wild
3. Save often — commit early, commit frequently
4. Use Whatever Format Communicates Best — text, files, screenshots, whatever works
5. If It’s Faster, Do It Yourself — don’t over-explain simple fixes

It only took just under 5 hours from empty folder to a deployed penguin blog. If you’ve been putting off that side project because it feels overwhelming, give this a try. I hope this guide was as useful for you as it was for me to write it.

See you in the next one!