Tutorial

Build a Personal Website with Claude Code or Codex CLI

A hands-on tutorial for building a personal website with Claude Code or Codex CLI, including an intro, skills, projects, contact information, and AI-assisted improvements.

By Learn Web4 Editorial Team Last updated: May 8, 2026 Personal Website · Claude Code · Codex CLI · AI Coding Tools

AI-assisted draft, human-reviewed before publication.

What you will learn

This is a hands-on tutorial.

You will learn:

  1. How to write requests for Claude Code or Codex CLI.
  2. How to build a simple personal website.
  3. What a personal website should include.
  4. How to keep asking follow-up questions so AI can improve the page.
  5. How to turn the page into your own version.

This tutorial uses the current Learn Web4 project as the example.

The current project is an Astro static site. Astro pages usually live in src/pages/. Adding a .astro file creates a new route.

This tutorial already includes a demo page: Personal Website Demo.

Prepare one tool first

You do not need to install both tools.

Choose one:

If you do not understand what these tools are yet, start with the local AI coding agents guide.

Start with four personal website sections

Do not make the first website too complex.

Your first personal website only needs four sections:

SectionContent
Personal introductionWho you are, what you are learning, and what you want to build
Skills listHTML, CSS, JavaScript, Astro, AI tools, and similar skills
Project showcaseTwo or three practice projects
Contact informationEmail, GitHub, LinkedIn, or portfolio links

These four sections are enough to help people quickly understand you.

They are also a good way for Web4 learners to practice AI coding tools.

Step 1: Ask AI to read the project first

Open the terminal and enter the project folder.

For example:

cd learnweb4

Then run your tool.

Claude Code:

claude

Codex CLI:

codex

Do not ask it to edit files immediately.

Ask this first:

Please read this project first. Tell me what framework it uses, where the page files are, and where the content files are. Do not modify any files yet.

This has two benefits.

First, you learn what the project roughly looks like.

Second, the AI does not start changing things before it understands the project.

Step 2: Make the first request

You can copy this prompt:

Please build a clean personal website with a personal introduction, skills, projects, and contact information. The style should be simple and suitable for a Web4 learner.
Please reuse the current project's layout and styles where possible. Do not rewrite the entire site CSS.
If a new page is needed, place it under an appropriate src/pages route.

This prompt makes four things clear:

  1. The page topic is a personal website.
  2. The content includes an introduction, skills, projects, and contact information.
  3. The style should be clean.
  4. The existing site should not be broken.

When beginners write prompts, do not only say “build me a website.”

Name the sections you want.

Step 3: Add a page in an Astro project

In Astro, files under src/pages/ become page routes.

For example, this project adds:

src/pages/demos/personal-website.astro

That generates:

/demos/personal-website/

This page already exists on this site. Open the Personal Website Demo to see it.

It includes:

  • Personal introduction
  • Skills list
  • Project showcase
  • Contact information

Step 4: Ask AI to review the page

When the page is done, do not stop immediately.

Ask:

Please check this personal website page for obvious issues: title, mobile layout, internal links, SEO description, and accessibility. List the issues first, then suggest fixes.

This prompt is useful.

It puts the AI into review mode instead of letting it keep adding features.

If it suggests changes, you can say:

Please fix only the first three issues you listed. Do not edit unrelated files.

The clearer the scope, the steadier the result.

Step 5: Keep asking for focused improvements

After the first version works, you can ask AI to refine it.

You can copy these prompts directly.

Make it feel more like a developer portfolio

Make the page feel more like a developer portfolio.
Emphasize project cards, tech stack, and contact buttons.
Do not add complex animations.

Add dark mode

Add a simple dark mode.
If the current project does not have a theme system, explain the smallest implementation plan first, then make the change.

Check mobile responsiveness

Check mobile responsiveness.
Focus on whether text feels cramped on phone widths, cards become too narrow, and buttons are easy to tap.

Improve the SEO title and description

Improve the SEO title and description for this personal website page.
Keep it natural and avoid keyword stuffing.
The title can include my name and personal website.

Replace the demo with your own content

Please replace the demo content with my information:
Name: Your Name
Role: Web4 learner / frontend beginner
Skills: HTML, CSS, JavaScript, Astro, AI coding tools
Projects: Personal website, learning notes site, AI-friendly page checklist
Contact: your-email@example.com

Step 6: Run a local check

If the project has a build command, run it.

In this Astro project, the command is:

npm run build

If the build passes, the page can at least be generated.

If the build fails, do not panic.

Paste the error into Claude Code or Codex CLI:

This is the npm run build error. Please explain the cause and give the smallest fix plan.

Ask it to explain first, then ask it to fix.

A complete beginner workflow

You can practice in this order:

  1. Install Claude Code or Codex CLI.
  2. Open a Git project.
  3. Ask AI to read the project without editing files.
  4. Request a personal website.
  5. Let AI add the page.
  6. Open it in a browser.
  7. Ask AI to check mobile layout and SEO.
  8. Run the build.
  9. Replace the content with your own.

This workflow is steadier than asking AI to “build a complete website” immediately.

You will also learn the project structure for real.

Practice task: make it yours

Now it is your turn.

Open the Personal Website Demo.

Turn it into your own version:

  1. Replace the name with your name.
  2. Write one sentence about what you are learning.
  3. Add five skills.
  4. Add three practice projects.
  5. Add a contact method you are comfortable making public.
  6. Ask AI to check mobile layout.
  7. Ask AI to improve the SEO title and description.

If you do not know how to start, copy this:

Please turn the personal website demo into my own personal website version. Ask me what personal information you need before making changes.

This is also the right way to use AI coding tools: you do not need to say everything at once. You can ask the tool to ask you first.

Next step

If you have finished the demo, the next step is to turn it into a real public portfolio.

You can keep asking Claude Code or Codex CLI to:

  • Add an area for real project screenshots.
  • Add GitHub links.
  • Improve mobile layout.
  • Write an English introduction.
  • Generate a better SEO description.

If you have not installed a tool yet, return to the Claude Code Installation Guide or the Codex CLI Installation Guide.

Further reading

FAQ

Do I need a complex framework for my first personal website?

No. A static page is enough at first. A clear introduction, skills, projects, and contact information matter more than chasing complex technology right away.

Will I learn less if I build a personal website with AI?

You will learn less if you only copy the result. A better approach is to ask AI to explain the project structure first, make changes step by step, and ask why each change was made.

Can I edit this demo directly?

Yes. Replace the demo name, skills, projects, and contact information with your own, then ask Claude Code or Codex CLI to improve mobile layout and SEO.