Ask Claude to build your site

Now the fun part. You’ll give Claude one message, and it will make your whole site.

Step 1: Make an empty folder

Make a new folder for your site. Put it somewhere easy to find, like your Documents folder. Call it my-site. Leave it empty.

Step 2: Open it in Claude

1. Open the Claude app and click Code, at the top of the sidebar.
2. Click the folder button and choose Open folder….
3. Pick your my-site folder.

Claude now works inside that folder, and only that folder.

Step 3: Paste your first message

Copy this, change the parts in capitals to your own, and send it:

I'm a complete beginner. Please build me a website with Astro in this folder.

1. Create the project with "npm create astro@latest" using the basics template.
   Use the newest Astro version.
2. Make these pages: a home page, an About page, and a blog with one first post.
3. The site is about: MY TOPIC. My name is MY NAME.
4. Keep the design simple, clean and easy to read on a phone.
5. When you're done, run "npm run build" to check there are no errors,
   then start the site so I can see it.

Explain each step in plain words as you go.

Step 4: Say yes when Claude asks

Claude asks before it does anything that changes your computer, like making files or running a command. You’ll see what it wants to do, with buttons to approve or decline. Read the line, then approve it.

The first thing it asks to run is npm create astro@latest. That’s Astro’s own tool for starting a project, and it’s safe. Claude will then make your pages one by one, showing you each file.

Step 5: See your site

When Claude finishes, it starts your site and gives you an address like localhost:4321. Click it, or type it into your browser.

localhost means “this computer”. Nobody else can see it yet, which makes it a safe place to try things.

What Claude made

Your folder now has a whole Astro project. You don’t need to open these, but it helps to know what they are:

File or folder	What it is
src/pages/	Your pages. One file for each page.
src/content/ or src/pages/blog/	Your blog posts
AGENTS.md	Notes that tell Claude how the project works. Claude reads it every time.
package.json	The list of tools your site uses