Skip to main content
This guide will help you get a working landing page up and running in just a few minutes.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js version 18.17.1 or higher installed
  • A package manager: npm, yarn, or pnpm
  • A text editor (we recommend VS Code)

​
Create your project

1

Create a new Astro project

Use the Astro CLI to create a new project with the minimal template:
npm create astro@latest -- --template minimal
You’ll be prompted to:
  • Enter a project name
  • Choose whether to initialize git
  • Choose whether to install dependencies
If you choose not to install dependencies during setup, you’ll need to run npm install manually in the next step.
2

Navigate to your project

Change into your project directory:
cd your-project-name
If you didn’t install dependencies during creation, install them now:
npm install
3

Start the development server

Launch the development server:
npm run dev
Your site is now running at http://localhost:4321!
The development server supports hot module reloading. Any changes you make will instantly appear in your browser.
4

Open in your browser

Visit http://localhost:4321 to see your landing page. You should see a simple page with “Astro” as the heading.

​
Customize your landing page

Now let’s customize the default landing page to make it your own.

​
Edit the main page

Open src/pages/index.astro in your editor. This is the main landing page. Here’s what the default template looks like: 
---

---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

​
Add some content

Let’s transform this into a simple landing page. Replace the content of src/pages/index.astro with: 
---
const title = "Welcome to My Landing Page";
const description = "Build fast, content-focused websites with Astro";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <title>{title}</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
        line-height: 1.6;
      }
      h1 {
        color: #333;
        font-size: 2.5rem;
        margin-bottom: 1rem;
      }
      p {
        color: #666;
        font-size: 1.2rem;
      }
      .cta {
        display: inline-block;
        background: #0066ff;
        color: white;
        padding: 1rem 2rem;
        text-decoration: none;
        border-radius: 8px;
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{description}</p>
    <a href="https://docs.astro.build" class="cta">Get Started</a>
  </body>
</html>
Save the file and check your browser. You’ll instantly see your changes thanks to hot module reloading!
Notice how we use JavaScript variables in the frontmatter (between --- markers) and then reference them in the HTML. This is one of Astro’s most powerful features.

​
Build for production

When you’re ready to deploy your landing page:
1

Create a production build

npm run build
This creates an optimized build in the ./dist/ directory.
2

Preview the production build

Test your production build locally:
npm run preview
Your production site will be available at http://localhost:4321.

​
Next steps

You now have a working Astro landing page! Here are some things you can do next:

Learn the basics

Understand the project structure and configuration options

Project structure

Explore the project file structure in detail

Configuration

Learn about Astro configuration options

Deploy

Deploy to Vercel, Netlify, or any static hosting service
The Astro documentation at docs.astro.build is an excellent resource for learning more about what you can build.

Build docs developers (and LLMs) love

Get started for freeTalk to us