DEV Community

ppcvote
ppcvote

Posted on • Originally published at ultralab.tw

Build Your First Personal Website with AI — Zero Experience, Step-by-Step Guide

#personalwebsite #aidevelopment #beginners #zeroexperience

Prerequisites

In the previous article, we explained why having no personal website means you don't exist in the AI era.

This article teaches you how to fix that.

What you need:

  • A device with internet access (phone or computer)
  • A web browser
  • A free Claude account (claude.ai)
  • About 1-2 hours

What you DON'T need:

  • No coding skills
  • No software to install
  • No money (except for a domain, which is optional)

Everything happens in the browser. Let's go.

Step Zero: Figure Out Three Things First

Before creating any accounts, answer these three questions. Write them down — you'll need them later.

1. Who are you? (One sentence)

Not your life story. One sentence.

Good examples:
- "Freelance brand designer specializing in restaurants"
- "Full-stack engineer focused on AI automation and SaaS"
- "Financial advisor helping 30-40 year olds plan retirement"
- "Illustrator creating cute animal-style commercial illustrations"

Bad examples:
- "Passionate multi-hyphenate creative" (AI can't understand what you actually do)
- "Jack of all trades" (means master of none)
Enter fullscreen mode Exit fullscreen mode

2. What do you do? (List 3-5 items)

Specific services or work. Not adjectives — nouns.

Good examples:
- Logo design (from $200)
- Brand identity systems (from $500)
- Social media visuals (monthly $100)

Bad examples:
- "Providing quality design services" (says nothing)
Enter fullscreen mode Exit fullscreen mode

3. How to contact you?

At minimum, an email. More is better:

  • Email (required)
  • Instagram / Threads / LinkedIn (pick your most active)
  • Other platforms your clients use

Write these three answers down. Every step below uses them.

Step 1: Create Accounts (15 minutes)

You need three accounts. All free.

1-1. GitHub Account

GitHub stores your website's code.

  1. Go to github.com
  2. Click Sign up
  3. Enter email, password, username
  4. Your username matters — it becomes part of your free URL (e.g., yourname.vercel.app)
  5. Choose the free plan

1-2. Vercel Account

Vercel puts your website on the internet.

  1. Go to vercel.com
  2. Click Sign Up
  3. Choose Continue with GitHub — log in with the GitHub account you just created
  4. Choose the Hobby (free) plan

1-3. Claude Account

Claude is the AI that writes code for you.

  1. Go to claude.ai
  2. Create an account (Google login is fastest)
  3. The free tier is enough

All three accounts ready? Continue.

Step 2: Create Your Website Repository on GitHub (5 minutes)

A "repository" is a folder that stores your website files.

  1. Log into GitHub
  2. Click the + in the top right → New repository
  3. Repository name: my-website (or anything you like)
  4. Select Public
  5. Check Add a README file
  6. Click Create repository

Done. You now have an empty website repository.

Step 3: Tell Claude What You Want (This Is the Most Important Step)

Open claude.ai and start a new conversation.

Your First Prompt — Tell Claude Who You Are

Copy the template below and replace the [...] parts with your own information:

I want to build a personal website. Please generate a complete index.html file.

About me:
- Name: [your name]
- Identity: [your one-sentence intro, e.g., "Freelance brand designer specializing in restaurants"]
- Services:
  1. [Service 1, e.g., Logo design (from $200)]
  2. [Service 2, e.g., Brand identity systems (from $500)]
  3. [Service 3, e.g., Social media visuals (monthly $100)]
- Portfolio links (if any):
  1. [Project name + link]
  2. [Project name + link]
- Contact:
  - Email: [your email]
  - Instagram: [your IG, if any]
  - LinkedIn: [your LinkedIn, if any]

Design requirements:
- Single-page website (one page)
- Dark background (#0A0515), white text
- Clean, high information density, professional feel
- Mobile responsive (RWD)
- No external CSS frameworks, pure HTML + inline CSS

Accessibility requirements (so everyone can use your site, including visually impaired users):
- Use semantic HTML tags (nav, main, article, section, header, footer)
- All images must have descriptive alt attributes
- Interactive elements (links, buttons) must be keyboard-navigable with Tab
- Text-to-background color contrast must meet WCAG AA standard (at least 4.5:1)
- Navigation areas should have aria-label

Technical requirements (important — include all of these):
- Complete <head> section with:
  - <title> and <meta description>
  - Open Graph tags (og:title, og:description, og:image)
  - Twitter Card tags
  - JSON-LD schema (Person or ProfessionalService type)
  - viewport meta tag
  - canonical URL (use # as placeholder for now)
- robots.txt content (separate file, allow all AI crawlers)
- llms.txt content (separate file, in English, introducing who I am and what I do)

Please give me the complete content of three files:
1. index.html
2. robots.txt
3. llms.txt
Enter fullscreen mode Exit fullscreen mode

Claude Will Reply with Three Files

It will give you complete code. You don't need to understand every line. But check these key points:

Checklist:
□ Is your name spelled correctly?
□ Are all your services listed?
□ Are email and social links correct?
□ Does it look good in the browser? (we'll cover previewing below)
Enter fullscreen mode Exit fullscreen mode

Step 4: Fine-Tune the Style (Optional but Recommended)

If you don't like Claude's first design, don't start over. Continue adjusting in the same conversation.

Adjust Colors 

The background is too dark, change it to dark blue (#0F172A).
Change the accent color to bright orange (#FF6B35).
Enter fullscreen mode Exit fullscreen mode

Adjust Layout 

Make the services section two columns on desktop, single column on mobile.
Enter fullscreen mode Exit fullscreen mode

Adjust Fonts 

Use Google Fonts "Inter" for headings, system default for body text.
Enter fullscreen mode Exit fullscreen mode

Describing the Style You Want (If You Don't Know Exact Parameters)

This is where many people get stuck: "I don't know how to describe the style I want."

Just describe the feeling:

Good ways to describe style:
- "I want something minimalist like Apple's website, lots of white space"
- "I want a tech feel, like a control panel from a sci-fi movie"
- "I want something warm, suitable for a food business, beige tones"
- "I want it to feel like a business card — clean, sharp, key info in 3 seconds"

You can also share reference sites:
- "I like the style of this website: [URL]. Make something similar."
Enter fullscreen mode Exit fullscreen mode

Bad descriptions:

- "Make it prettier" (what does pretty mean to you?)
- "Whatever" (Claude will literally do whatever)
Enter fullscreen mode Exit fullscreen mode

After Each Adjustment, Confirm 

Confirmed. Give me the complete updated index.html — don't give me just the changed parts.
Enter fullscreen mode Exit fullscreen mode

This is important. Have Claude give you the complete file every time, not fragments, so you don't make assembly mistakes.

Step 5: Upload Files to GitHub (10 minutes)

Now you have the content of three files. Put them on GitHub.

5-1. Create index.html

  1. Open your GitHub repository page (github.com/youraccount/my-website)
  2. Click Add file → Create new file
  3. File name: index.html
  4. Copy and paste the entire index.html content Claude gave you into the editor
  5. Scroll down, click Commit changes

5-2. Create robots.txt

Repeat the same steps:

  1. Go back to the repository homepage
  2. Add file → Create new file
  3. File name: robots.txt
  4. Paste the content
  5. Commit changes

5-3. Create llms.txt

Same thing:

  1. Add file → Create new file
  2. File name: llms.txt
  3. Paste the content
  4. Commit changes

Your GitHub repository now has three files.

Step 6: Go Live with Vercel (5 minutes)

This is the magic step.

  1. Go to vercel.com, log in
  2. Click Add New → Project
  3. It will list your GitHub repositories — find my-website, click Import
  4. Don't change any settings, just click Deploy
  5. Wait 30 seconds

Your website is live.

Vercel gives you a URL like my-website-xxx.vercel.app.

Open it. That's your personal website. The whole world can see it.

Step 7: Verify AI Can Read You (5 minutes)

After your site is live, run these checks:

Check OG Preview

Paste your URL into Line, Discord, or any chat app. It should show:

  • Your title
  • Your description
  • A preview image (if you set one)

If nothing shows, tell Claude: "The OG tags don't seem to be working. Check if og:title, og:description, og:image are all correct in index.html."

Check robots.txt

Open yoururl/robots.txt in a browser. You should see the AI crawler rules.

Check llms.txt

Open yoururl/llms.txt in a browser. You should see your English self-introduction.

Check JSON-LD

Open your website, press Ctrl+U (or right-click → View Source). Search for application/ld+json. You should find your structured data.

Step 8: Custom Domain (Optional, ~$10-15/year)

The free xxx.vercel.app URL works fine to start. But if you want your own domain:

  1. Go to Namecheap or Cloudflare and buy a domain
  2. .com is about $10-15/year
  3. In Vercel project settings → Domains → add your domain
  4. Follow Vercel's DNS setup instructions

After setup, tell Claude:

My domain is [your domain].
Please update the canonical URL, og:url, and all absolute paths in index.html.
Also update the URLs in llms.txt.
Enter fullscreen mode Exit fullscreen mode

Step 9: How to Update Later?

Future updates are dead simple:

  1. Open Claude, in the same conversation say: "Update XXX for me"
  2. Claude gives you the new complete index.html
  3. Go to GitHub → open index.html → click the pencil (Edit) → select all, delete → paste the new content → Commit
  4. Vercel automatically redeploys (live within 30 seconds)

That's it. Four steps for every update.

FAQ

"Is Claude's free tier enough?"

Yes. The entire process needs about 5-15 conversations. Claude's daily free quota is more than enough. If you run out today, continue tomorrow.

"What if I don't like Claude's design?"

Keep adjusting in the same conversation. Be specific:

✅ "The title is too small, change it to 48px"
✅ "The spacing in the services section is too tight, add 24px between items"
✅ "I want card-style layout like [some website]"

❌ "Make it better" (Claude doesn't know what "better" means to you)
Enter fullscreen mode Exit fullscreen mode

"How do I add images?"

  1. Upload images to your GitHub repository (Add file → Upload files)
  2. After upload, click the image → copy the image URL
  3. Tell Claude: "Add an image at [location], the URL is [paste]"

"It looks broken on mobile?"

Tell Claude: "The [section] is broken on mobile — text is overflowing the screen. Fix it." Attach a screenshot if possible.

"What if I want more pages (portfolio page, about page)?"

Don't. One page is enough for now. When you're sure you need more pages, you can consider upgrading to a more complete framework then.

What You've Achieved

Cross-referencing the previous article's checklist:

✅ A URL you own (vercel.app free / custom domain ~$10-15/year)
✅ One sentence that says who you are and what you do
✅ Your work / services list (with links)
✅ Contact info
✅ llms.txt — self-introduction for AI
✅ JSON-LD schema — structured you
✅ robots.txt — allow AI crawlers
✅ OG tags — preview image and description when shared
✅ Accessible — screen readers can understand your website too
Enter fullscreen mode Exit fullscreen mode

All checked. Cost: $0. Time: 1-2 hours.

In the AI world, you went from not existing to existing.

Next Steps

If you want to go further:

  1. Scan your website with UltraProbe — The SEO and AEO scanner at ultralab.tw/probe can tell you what else to optimize. Free.
  2. Join the Discord community — Ask questions, build together → discord.gg/ewS4rWXvWk
  3. Keep updating your content — A website isn't "set and forget." Regularly update your portfolio and services so AI search engines know you're still active.

From Ultra Lab — Solo Builder Lab
Discord: Join the community

Originally published on Ultra Lab — we build AI products that run autonomously.

Try UltraProbe free — our AI security scanner checks your website for vulnerabilities in 30 seconds: ultralab.tw/probe

Top comments (0)