How To Build and Deploy a Basic Site Using Astro and Netlify
In this post, we’ll show you how to quickly build and deploy a basic site using Astro and Netlify. This is a simple way to get your website live.
You can build and launch websites quickly using Astro and Netlify. Astro uses a zero-JavaScript-by-default approach. This means it won’t send any JavaScript to the browser unless you choose to add it (using plain JavaScript or frameworks like React or Vue). Instead, it turns all components into static HTML when the site is built. This type of build helps pages load faster, run more smoothly and use less power or data. It’s great for things like blogs, documentation and marketing sites.
This stack is a modern alternative to familiar legacy stacks like WordPress and Create React App. Unlike WordPress, Astro doesn’t rely on plugins or PHP, making sites faster and more secure. Compared to Create React App, Astro ships less JavaScript by default, leading to smaller bundles and faster page loads.
This tutorial will walk you through building a basic site on Astro and deploying on Netlify in five minutes.
Let’s get started!
Prerequisites
Make sure you have the following installed:
- Node.js (version 18+ recommended)
- Git
- VS Code (or any IDE; I work in VS Code)
- GitHub CLI and a GitHub account
- Astro plugin for VS Code
- Netlify login with GitHub Connected
Build with Astro
Once your new project folder in your IDE is open, open a new terminal. The first terminal command is:
npm create astro@latest
This will get your Astro project started. It will trigger a few prompts.
- Accept the project name.
- Choose the blog template.
- Install dependencies — Yes.
- Initialize a new git repository — Yes.
Next, we’ll need to drop into our new project repository:
cd your-project-folder-name
Deploy with Netlify
Now we need to install the Netlify adapter. We can do this in the terminal using the following command:
npm install @astrojs/netlify
Once the install is complete, it’s time to update our astro.config.mjs file — the project’s configuration file. You’ll only need to work on this file when adding an integration or customizing build behavior (similar to Next.js’s next.config.js or Vite’s vite.config.js).
astro.config.mjs will look like this:
This file does the following:
- Imports helper to define Astro config with type safety.
- Imports the Netlify adapter for Astro deployment.
- Starts the Astro configuration.
- Builds the site for server-side rendering (needed for Netlify Functions).
- Uses the Netlify adapter to optimize the build for Netlify.
- Sets the site’s base URL for things like sitemaps and links.
Now it’s time to run our dev server to make sure everything is properly connected so far.
npm run dev
If everything works correctly, you’ll see this page:
Before we move on, let’s take a minute to talk about routing. Astro projects use a file-based routing system. The src/pages/ folder is where your routes live. Each file you add here becomes a page on your site. For example, src/pages/index.astro becomes your homepage, while any other file creates a route based on its name, like /your-file-name.
src/pages/ are also where you define the structure of your site. Since each file becomes its own page, this is where you can customize using HTML, CSS and logic. If you want to add interactivity, this is where you’ll use frameworks like React or Vue.
Since we’re skipping customization in this tutorial and focusing on build and deployment ease, we are now ready to create the GitHub repo and deploy on Netlify.
We will need to work directly in Netfily for this next part.
Go to https://app.netlify.com. Once you’re logged in, you’ll see a blue button on the right-hand side in the middle of the page that says “Add new project ^”. Click the ^ and import an existing project.
Deploy with GitHub. Scroll until you see the name of this project and click it. Create a Netlify project name and then review your build settings (the prefill is fine for this project). Scroll to the bottom and click Deploy project -name.
Once the build is complete, you’ll see this screen:
Once your site is deployed, Netlify will automatically update it with each new push to GitHub.
There’s a lot more to explore when working with Astro and Netlify, but this tutorial will help get you started.
