> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webstorio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create your first site

> Build and publish your first website with AI — a step-by-step tutorial for beginners.

In this tutorial you'll sign up, describe your site to the AI, and publish it live — all without writing code. You'll have a real website at your own `webstor.io` address by the end.

You only need a **Google account** and a rough idea of your site (for example, "a landing page for my bakery").

Prefer local React files and git instead? See [Your first site with the CLI](/developer/your-first-site).

## Step 1 — Sign in

1. Go to [webstorio.com](https://webstorio.com) and click **Get started**.
2. Sign in with Google.
3. The first time you sign in, a short welcome wizard asks a few questions about what you want to build. Answer them, then click **Get started free**.

You land on your **Dashboard**.

## Step 2 — Create a project

A **project** is one website. Everything for that site lives inside it.

1. Open **Projects** and click **Create Project**.
2. Type a **project name** — for example, `My Bakery`. This becomes your site's title and your web address.
3. Click **Create**.

Webstorio sets up your site and gives it an address like `my-bakery.webstor.io`. A short **"How your website works"** guide appears — read it and click **Confirm** to continue.

## Step 3 — Plan your site with AI

After your project is created, Webstorio invites you to **shape your website in one prompt**. This first step is **plan mode**: the AI learns what you want and sets up your project — branding, pages, and features — before any page is built.

1. In the prompt box, describe the site you want in plain language (or pick one of the example prompts).
2. Press **Enter** and let the AI prepare your project.

<Tip>
  A good first prompt is specific and concrete: *"A landing page for a bakery in
  Jakarta with a hero section, our story, a menu of popular items, and opening
  hours. Use warm cream and brown colors."*
</Tip>

When the AI finishes, you'll see **Your plan is ready**. Click **Build homepage** to continue.

## Step 4 — Build your homepage with AI

**Build homepage** opens the page editor. This step is **build mode**: the AI generates your homepage design from the plan you just made.

Once the first version appears, refine it with follow-up messages in everyday language:

* *"Make the headline bigger and add a Get in touch button."*
* *"Add a three-column section showing our most popular cakes."*
* *"Change the background to a soft cream color."*

The AI updates the page each time, and every change is saved automatically — so keep iterating until you're happy. When your homepage looks ready, you can publish straight from here, or follow the steps below.

## Step 5 — Publish your page

Your page must be **published** before it can appear on your live site.

1. Go back to your **project dashboard**.
2. Open the **Actions** menu on your **Home** page.
3. Click **Publish**.

The page status changes to **published**.

## Step 6 — Publish your website

Publishing the **website** makes it reachable on the internet.

1. On the project dashboard, click **Publish Website**.
2. Your site goes live at your address:

```text theme={"dark"}
https://my-bakery.webstor.io
```

## Step 7 — View your live site

Open your `webstor.io` address in a new browser tab. Your site is now live — share the link with anyone.

You've built and published a website with AI. Next, add more to it:

<CardGroup cols={2}>
  <Card title="Content & CMS" icon="file-text" href="/guides/content-and-cms">
    Add a blog, news, or articles section.
  </Card>

  <Card title="Forms & surveys" icon="clipboard-list" href="/guides/forms">
    Collect leads, feedback, or contact messages.
  </Card>

  <Card title="Publish & domains" icon="globe" href="/guides/publishing-and-domains">
    Connect your own custom domain.
  </Card>

  <Card title="Connect MCP" icon="bot" href="/developer/connect-mcp">
    Optional: manage CMS and other data with an AI agent.
  </Card>

  <Card title="Common questions" icon="circle-question-mark" href="/guides/faq">
    Plans, AI credits, support, and more.
  </Card>
</CardGroup>