Static Website Design with Astro
Introduction to Astro
Meet Astro: The Content-First Framework
Imagine building a lightning-fast website without getting tangled in complex JavaScript frameworks. That's the promise of Astro. It's a modern web framework designed specifically for content-rich sites like blogs, portfolios, marketing pages, and documentation sites.
Astro's philosophy is simple: send as little JavaScript to the user's browser as possible. By default, it sends zero. This makes Astro websites incredibly fast to load. Think of it like building a house. Instead of shipping a flat-pack kit with complex instructions (like many frameworks do), Astro delivers a fully-assembled house. The user can walk right in without waiting for construction.
But what if you need some interactivity, like a button that shows a pop-up or a dynamic image gallery? Astro has a clever solution called Island Architecture.
This approach lets you create small, isolated pockets of interactivity on an otherwise static page. These "islands" load their own JavaScript without slowing down the rest of the site. Best of all, Astro is framework-agnostic. You can use React, Vue, Svelte, or just plain JavaScript for your islands, all within the same project.
Key takeaway: Astro renders your site to fast, static HTML and only loads JavaScript for the specific, interactive components that need it.
Getting Started
Before you can build with Astro, you'll need Node.js installed on your computer. Astro requires version 18.14.1 or higher. You can check your version by opening your terminal or command prompt and running:
node -v
If you don't have Node.js or your version is too old, you can download the latest version from the official Node.js website. With that ready, creating a new Astro project is just one command away. Navigate to the directory where you want to create your project and run:
npm create astro@latest
The command line interface will guide you through a few setup questions. It will ask for your project name and offer to start with a template. For now, choose the "Empty" project to start from scratch. You can also say yes to installing dependencies and creating a Git repository if you'd like.
Your Project's Blueprint
Once the setup is complete, you'll see a new folder with your project's name. Let's look at the most important files and folders inside:
| Folder / File | Purpose |
|---|---|
src/ | This is where you'll spend most of your time. It contains all your project's source code. |
src/pages/ | Every file in this folder becomes a page on your website. For example, src/pages/about.astro becomes your-site.com/about. |
src/layouts/ | These are templates for your pages, helping you reuse common structures like headers and footers. |
src/components/ | This folder holds reusable UI pieces, like buttons or navigation bars. |
public/ | For static assets that don't need processing, like images or fonts. |
package.json | Manages your project's dependencies and scripts. |
astro.config.mjs | The main configuration file for your Astro project. |
This structure keeps your project organized and easy to navigate. To see your new site in action, navigate into your project directory in the terminal (cd your-project-name) and run the development server:
npm run dev
Your terminal will show a local address, usually http://localhost:4321. Open this in your browser, and you'll see your first Astro page. Now you're ready to start building!
Time to check your understanding of these core concepts.
What is the primary goal of Astro's design philosophy?
What is the name of the architectural pattern Astro uses to handle client-side interactivity on a page?
That's the basic setup. You've learned what makes Astro special and created your first project. Next, we'll start building out pages and components.