Tutorials
One job, start to finish. Follow the steps and it works.
How to Register a Domain Name and Connect It to Your Astro Site
Buy a domain for about $11 a year, then point it at Cloudflare or Netlify. We did this for astronursery.com, and these are the exact steps.
How to Add Google Analytics to an Astro Site (and a Simpler Option)
Paste Google's tag into your Astro layout with one small change, is:inline, and it works on every page. Or use Cloudflare Web Analytics, which needs no cookie banner.
How to Add a Contact Form to an Astro Site (No Server Needed)
A static site can't receive form submissions on its own. A free form service can. Here's a working contact form in ten lines, with spam protection built in.
How to Add Search to an Astro Site With Pagefind
Pagefind gives your static Astro site a real search box in about ten minutes, with no server and no monthly fee. It's what Astro Nursery uses.
How to Add Comments to an Astro Blog (Free, With Giscus)
Giscus stores comments as GitHub Discussions, so your static Astro blog gets real comments with no database and no monthly fee. Here's the setup, tested on our test site.
How to Start an Email Newsletter for Your Astro Site
Search traffic comes and goes. An email list is yours. Here's how to add a sign-up form to a static Astro site using a free newsletter service, in about 15 minutes.
How to Change Your Astro Site's Domain Without Losing Google Rankings
Moving to a new domain is safe if every old address redirects to its new one with a 301. How to set that up on Cloudflare, Netlify and in Astro, then tell Google.
Why Is My Astro Site Slow? 7 Fixes That Work
Astro sites are fast by default, so a slow one has a specific cause. The seven usual suspects, how to spot each, and the fix, from big images to too many islands.
How to Upgrade Your Astro 6 Site to Astro 7
One command moves you from Astro 6 to Astro 7. Then fix the two things that broke for us: tags you never closed, and missing spaces. We ran every step.
How to Move Your Wix Site to Astro
Wix has no export button, so you rebuild. Here's how: list your pages, copy your words, rebuild in Astro, keep old links working, then move your domain.
How to Move Your Squarespace Site to Astro
Squarespace can export your pages and one blog as a WordPress file. Here's what that file holds, how to turn it into Astro posts, and what you'll rebuild by hand.
How to Add a Favicon to an Astro Site
A favicon is the tiny picture in the browser tab. Put three files in your public folder, add three lines to your layout, and it shows on every page.
How to Add a Navigation Menu in Astro
Build a Header component with links, mark the page you're on, and add a phone menu that opens and closes with no JavaScript. One file, about 60 lines.
How to Add Dark Mode to an Astro Site
Make your Astro site follow the phone or computer's dark setting with a few lines of CSS. Then add a button that remembers the choice, with no flash on load.
How to Add an RSS Feed to an Astro Blog
An RSS feed lets readers follow your blog in a feed reader. Install @astrojs/rss, add one small file, add one tag to your layout, and your feed is live.
How to Add Tags and Categories to an Astro Blog
Add tags to your posts, then let Astro build a page for every tag on its own. Plus a page of all tags, links on each post, and one category per post.
How to Add Pagination to an Astro Blog
Split a long blog list into pages of ten, with Newer and Older links. Astro's paginate() does the math. You write one file, and Astro builds every page.
How to Fix astro: command not found
Seeing sh: astro: command not found? Your project's tools aren't installed, or you're in the wrong folder. Here's the two-minute fix, tested on Astro 7.4.
Port 4321 Is in Use: Why Is My Astro Site on Port 4322?
Astro says Port 4321 is in use, trying another one, and opens on 4322. Something else is using the port. Here's what that means and how to get 4321 back.
How to Fix the GetStaticPathsRequired Error in Astro
Astro says getStaticPaths() function is required for dynamic routes? Your [slug].astro page needs a list of pages to build. Here's the fix, tested on Astro 7.4.
How to Fix Node.js Is Not Supported by Astro
Astro says Node.js is not supported and asks you to upgrade? Astro 7.4 needs Node.js 22.23.4 or newer. Here's how to check your version and update it.
How to Fix LocalImageUsedWrongly: src Cannot Be a String Filepath
Astro says the Image src parameter must be an imported image or a URL, it cannot be a string filepath? Import the picture first. Tested on Astro 7.4.
How to Add a React Component to Astro (Your First Island)
Add React to an Astro site with one command, build a counter component, and turn it into an island that works in the browser.
client:load vs client:visible vs client:idle: Which to Use
Astro has five client directives. They decide when an island loads its JavaScript. Here is what each one does, plus a simple rule for picking.
How to Deploy an Astro Site to Cloudflare Workers
Put your Astro site online with Cloudflare Workers in four steps. This is how Astro Nursery itself is hosted, so every step has been run for real.
How to Add Tailwind CSS to Astro
Add Tailwind CSS to an Astro site with one command, then style your first element. Tested on Astro 7.4 and Tailwind 4.
How to Use Server Islands in Astro
A server island lets one part of a page be made fresh on each visit. The rest of the page stays static. Here is how to set one up, with the adapter it needs.
How to Add Images to an Astro Site
Add an image to your Astro site, and let Astro shrink and convert it for you. One test image went from 62 kB to 5 kB.
How to Add a Sitemap to Astro
Make a sitemap for your Astro site in three steps, so search engines can find every page. Includes the robots.txt line.
How to Add Custom Fonts to Astro
Use Astro's built-in Fonts API to add a Google or Fontsource font in three steps, with the font files served from your own site.
How to Add Page Transitions to Astro
Make moving between pages feel smooth with Astro's ClientRouter, or with one line of CSS that needs no JavaScript at all.
How to Create a Custom 404 Page in Astro
Replace the plain 'not found' error with a helpful page of your own. It takes one file.
How to Move a WordPress Site to Astro
Three ways to move from WordPress to Astro, from keeping WordPress as your editor to exporting everything to Markdown files.
How to Add a Blog to Your Astro Site
Add a blog to your Astro site with content collections. Write posts in Markdown and let Astro build the pages for you.
How to Deploy an Astro Site to GitHub Pages for Free
Put your Astro site online with GitHub Pages. It will update on its own each time you push a change.
How to Fix the Most Common Astro Errors
The errors beginners hit most often in Astro, what they actually mean, and how to fix each one.