What You'll Build
You're going to create a personal website and put it on the internet. A real URL that anyone can visit. This is the most practical thing you can do with Claude Code: go from idea to live site in under an hour.
By the end of this guide, you'll have a clean, responsive personal site with your name, a short bio, links to your projects, and a way for people to contact you.
Before You Start
Make sure you've completed the Claude Code Setup guide. You should be able to run claude in your terminal.
You'll also need a free GitHub account for deployment. If you don't have one, sign up first.
Step 1: Create Your Project
Open your terminal and set up a fresh folder:
mkdir ~/my-website
cd ~/my-websiteStep 2: Launch Claude
Start Claude Code:
claudeStep 3: Describe Your Site
Tell Claude what you want your website to look like. Be specific about the content and style. Here's an example prompt:
Create a personal website in a single index.html file. My name is [Your Name]. I'm a [your role/interest]. Include a hero section with my name and a one-line tagline, an "About" section with a short bio (2-3 sentences), a "Projects" section with 3 placeholder project cards, and a "Contact" section with links to my email and social profiles. Use a dark theme with clean typography and smooth scroll. Make it fully responsive.Replace the bracketed parts with your real info. Claude will generate the full page.
Step 4: Preview Locally
Open the file in your browser to see how it looks:
On Mac:
open index.htmlOn Windows (WSL):
explorer.exe index.htmlLook at the page. Check the layout, the colors, the text. If something's not right, tell Claude:
Change the color scheme to navy and gold. Make the project cards have a subtle border on hover. Add more spacing between sections.Refresh your browser after each change.
Step 5: Put It on the Internet
Once you're happy with how the site looks, ask Claude to handle the whole process of getting it online:
Help me put this website on the internet using GitHub Pages. Set up everything I need, create a place to store the project online, and make it live at a real URL I can share.Claude will handle all the behind-the-scenes setup for you. When it's done, your site will be live at a real web address you can share with anyone.
Step 6: Add More Pages
A single-page site is a great start. But you can expand it. Ask Claude to add:
- A blog page with a few posts
- A resume page with your experience
- A portfolio gallery with screenshots of your work
- A custom domain so visitors see your own URL
Each time, just describe what you want and Claude will generate it.
What You Learned
You built a real website and put it on the internet. You used Claude to handle the HTML, CSS, and everything needed to get it live. You didn't need to memorize any code or set anything up by hand.
The skill here isn't coding. It's knowing what to ask for and how to refine it. That translates to every project you'll ever build.
Ready for the next step? Learn how to multiply your output with a team of AI agents.
