Give feedback as an early user and get the docs plus a full website free. Code FRIEND: valid on one-time purchases only.
WebsiteroWebsitero

Build your website in 5 minutes

This Astro starter ships pre-built components, a Decap CMS-powered blog, dark mode, View Transitions, and automatic image optimization, all organized inside src/components/ using the component-per-folder pattern.

Before You Start

Make sure you've read the initial setup guide.

See Quick Setup

What We'll Build

1
1 min

Install the Template

Clone your Astro project from the starter template in one command

2
2 min

Customize Your Site Info

Update your business name, colors, and navigation data

3

Edit the Landing and Interior Pages

Modify the components in pages folder

4
1 min

Preview & Deploy

Run the dev server, verify your page, and ship it

1

Install the Template

1 minute

Clone the project straight from the GitHub template using the Astro CLI.

Run the create command

This pulls the template, sets up the folder structure, and installs dependencies automatically.

npm create astro@latest -- --template websitero-org/Astro-Starter

Enter the project and start the dev server

cd my-astro-site
npm install
npm run dev

Your site is live locally

Open http://localhost:4321, you should see the full demo landing page from the template.

2

Customize Your Site Info

2 minutes

Two files control all global site data, your business info and your navigation links.

Edit src/data/client.ts

This is the single source of truth for your brand, name, address, SEO metadata, and social links. Replace the placeholder values:

// src/data/client.ts
export const client = {
  name: "Your Business Name",
  email: "hello@yourdomain.com",
  phoneForTel: "555-555-5555",
  phoneFormatted: "(555) 555-5555",
  address: {
    lineOne: "123 Main Street",
    city: "New York",
    state: "NY",
    zip: "10001",
    country: "US",
    mapLink: "https://maps.google.com/?q=...",
  },
  socials: {
    twitter: "https://twitter.com/yourhandle",
    instagram: "https://instagram.com/yourhandle",
  },
  // Used for SEO <title> and Open Graph tags
  domain: "https://yourdomain.com",
};

Also update astro.config.mjs

Set the site field to your production URL so Astro generates correct canonical tags and sitemaps.

site: "https://yourdomain.com"
3

Edit the Landing Page and Interior Pages

1 minute

The landing page lives at src/pages/index.astro and the interior pages lives at src/pages/. It's composed of pre-built components you can swap or edit.

Page structure at a glance

Open src/pages/index.astro.

See Landing page

Editing a section component

Each section is its own .astro file inside src/components/. Open any component and edit the text and image paths directly in the HTML, no config files needed:

---
// src/components/Hero.astro
import { Image } from "astro:assets";
import heroImg from "@assets/images/hero.jpg";
---

<section id="hero">
  <div class="cs-container">
    <div class="cs-content">
      <h1 class="cs-title">Your Headline Here</h1>
      <p class="cs-text">
        A short description of what you do and who you help.
      </p>
      <a href="/contact" class="cs-button-solid">Get Started</a>
    </div>
    <Image src={heroImg} alt="Hero image" class="cs-picture" />
  </div>
</section>

Replace placeholder images

Drop your own images into src/assets/images/ and update the import paths in the component files. Astro automatically optimizes them.

Want to see all components in action?

Check out the components showcase page to see live examples of every component with interactive demos.

View Component Library
4

Build & Deploy

1 minute

Run a production build and deploy to any static host in seconds. See Deployment Guide

Build for production

npm run build

Output goes to dist/. Preview it locally with npm run preview.