 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
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!
Make sure you have the following installed:
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.
Next, we’ll need to drop into our new project repository:
cd your-project-folder-name
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:
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.
