Build Your First Astro Website in Minutes

Get Started with Astro for Fast Websites

This guide will show you how to set up a new Astro project. You’ll learn what Astro is and why it’s great for building fast, content-focused websites. We’ll also cover how to start your project and understand its basic structure. By the end, you’ll have a basic Astro site running locally.

What is Astro?

Astro is a modern web framework designed for building content-driven websites. Its main goal is to create super-fast websites. Unlike some other frameworks that send a lot of JavaScript to your browser by default, Astro sends very little, or none at all, for most of your page. This means your website loads much quicker.

Think of it like sending a beautifully printed book versus sending a laptop with a book file. The printed book is ready to read immediately. Astro aims to make your website feel like that printed book – fast and ready to go.

Astro for Static Sites

Astro is perfect for static websites like blogs or simple informational sites. These sites don’t need a lot of fancy interactive elements. By default, Astro renders your content into static HTML, which is the fastest way to deliver web pages.

Adding Interactivity with Astro

But what if you need interactive parts, like a comment section or a shopping cart? Astro can handle that too. You can add small bits of JavaScript directly to your Astro components. Even better, Astro uses something called ‘client islands’. These are like small, self-contained interactive components built with tools you might already know, like React, Vue, or Svelte. You can use these islands for only the parts of your page that need to be interactive. This way, most of your page remains fast and static, while only the interactive bits load their JavaScript.

Server-Side Rendering Options

Astro also offers options for pages that need to be generated on the server when requested. This is useful for dynamic content, like a user dashboard that shows personalized information. Astro can fetch this data and render the page right before sending it to the user, without needing a full site rebuild.

Content Collections

Astro has a built-in feature called ‘content collections’. This makes it easy to manage your content, like blog posts written in Markdown or data stored in JSON files. Astro can load and process this local data for you. It even helps ensure your data is correct and safe using something called ZOD for validation.

Other Great Features

On top of all this, Astro includes features you’d expect in any modern framework. This includes file-based routing (where your file structure creates your website’s pages), layouts for consistent design, reusable components, and full TypeScript support.

Prerequisites

• Node.js: You need Node.js installed on your computer. Version 22 or higher is recommended. You can download it from nodejs.org.

Step 1: Create a New Astro Project

The easiest way to start is by using the command line. First, make sure you have Node.js installed. Then, open your terminal or command prompt.

Navigate to the folder where you want to create your project. Once you’re in the right directory, type the following command and press Enter:

npm create astro@latest

Step 2: Configure Your Project

The command will ask you a few questions to set up your project:

1. Install Packages: It will ask if you want to install the necessary packages. Type ‘y’ and press Enter.
2. Project Folder Name: It will ask for the name of your project folder. We’ll call it bookbytes. Type bookbytes and press Enter.
3. Starting Template: You’ll be asked how you want to start. Choose the Minimal Empty Template option. Press Enter to select it.
4. Install Dependencies: Confirm that you want to install the project’s dependencies. Type ‘y’ and press Enter.
5. Initialize Git Repository: It’s a good idea to initialize a Git repository for your project. Type ‘y’ and press Enter.

Step 3: Navigate to Your Project and Open in Code Editor

Once the project is created, you need to move into the new project folder. Use the cd command:

cd bookbytes

Now, open the project in your favorite code editor, like VS Code:

code .

Step 4: Understand Your Project Structure

You’ll see several files and folders. Here’s a quick look at the important ones:

• node_modules/: This folder holds all the code that your project depends on. You usually don’t need to touch this.
• public/: Put static files like images or icons here.
• src/: This is where most of your work will happen. It contains your components, pages, CSS, and content.
• src/pages/: This folder holds your page components. Astro uses these to build your website’s pages.
• src/pages/index.astro: This is the main page of your website. Notice it uses the .astro file extension.
• .astro.config.mjs: This file is for Astro configuration. You can add special features or server settings here later.
• package.json: This file lists your project’s dependencies and scripts.
• tsconfig.json: This file configures TypeScript support, which Astro has built-in.

Recommended VS Code Extension

To make working with Astro files easier, install the official Astro extension for VS Code. It provides helpful features like syntax highlighting and code completion.

Step 5: Run the Development Server

To see your website in action, you need to start a local development server. Open your terminal again (make sure you are still inside your bookbytes project folder) and run this command:

npm run dev

This command will start a server, usually at http://localhost:4321/. Open this address in your web browser. You’ll see a simple starter page. Any changes you save in your code will automatically update in the browser.

Next Steps

Congratulations! You’ve successfully set up your first Astro project and have it running locally. In the next lessons, you’ll learn how to add more pages, content, and features to your site.

Source: Astro Crash Course #1 – Why Astro? (& Setup) (YouTube)