Astro tutorials and guides
Everything we've published, newest first.
11 Best Free Astro Themes in 2026 (Checked for Astro 7)
The best free themes from astro.build for blogs, portfolios, business sites and docs. We checked which ones already run on Astro 7, and which are behind.
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.
20 Types of Websites You Can Build With Astro
From a one-page portfolio to a documentation site with search, here are 20 kinds of websites Astro is good at, what each needs, and the few it isn't right for.
12 Best Astro Integrations (Plugins) for Beginners in 2026
Astro calls its plugins integrations. Here are the 12 worth adding first, each installed with one command, plus the ones Astro 7 no longer needs.
How Much Does an Astro Website Cost? (Real Numbers)
An Astro site can cost $0 a year. Here's what's free, what costs money, and what we actually pay for this site, so you can plan before you start.
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.
What Is Starlight? Astro's Documentation Theme, Explained
Starlight is the Astro team's free theme for documentation sites. Here's what you get, how to start one in five minutes, and how to add your first page, with screenshots.
Domain Name vs Web Hosting: What's the Difference?
A domain name is your site's address. Hosting is the computer your site lives on. Here's how the two connect, in plain words, and what each one costs.
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 Back Up an Astro Site (It's Easier Than You Think)
An Astro site is a folder of files, so the backup is GitHub. Here's why that's complete, how to do it in two clicks, and the one thing it doesn't cover.
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 Make Money With an Astro Blog (7 Honest Ways)
A static Astro site can earn money the same ways a WordPress blog can, and it costs nothing to run. Here are seven ways that work, what each needs, and what to skip.
How to Write and Publish Your First Post in EmDash
Write a post in EmDash's editor, save it as a draft, and publish it. We did it on EmDash 1.4, and these are the real screens, including the one step people miss.
A Tour of the EmDash Dashboard: Every Menu Explained
What every item in the EmDash admin menu does, from Posts and Media to Redirects, Bylines and Import, with screenshots from EmDash 1.4.
How to Learn Astro for Free in a Week
A seven-day plan that takes you from nothing installed to a live Astro site you understand. About an hour a day, all free, with the exact pages to read each day.
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.
How to Put an EmDash Site Online With Cloudflare
We deployed EmDash to Cloudflare with one command in 27 seconds. Wrangler made the database, media storage and session store for us. Here are the exact steps.
EmDash's 4 Templates Compared: Blog, Marketing, Portfolio and Starter
We installed all four EmDash templates and set each one up with its sample content. Here's what each looks like, what it's built for, and which to pick.
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.
EmDash Plugins Explained (and Why You Need Fewer Than WordPress)
EmDash has plugins, but it builds in much of what WordPress needs plugins for. Here's what comes built in, the two kinds of plugin, and when you'll pay to use them.
How Much Does EmDash Cost to Run? (Free Limits Explained)
EmDash itself is free. Hosting on Cloudflare's free plan fits most small sites. Here are the real free limits, what pushes you to the $5 plan, and a sample yearly cost.
EmDash vs Ghost: Which Should You Use for Your Blog?
Ghost is built for newsletters and paid memberships. EmDash is a flexible CMS on Astro that hosts free on Cloudflare. Here's how they compare, and who should pick which.
How to Get Your Astro Site Cited by ChatGPT, Claude and Google AI
AI assistants answer with links. What makes a site easy for them to read and cite: clear pages, structured data, a sitemap, Bing and llms.txt. Honest about what's proven.
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.
Astro vs Wix: Which Should a Beginner Choose?
Wix is drag and drop for a monthly fee. Astro is free, fast, and yours to keep, but you work with files. Here's an honest look at cost, ease and when Wix wins.
Astro vs Squarespace: Which Should a Beginner Choose?
Squarespace gives you pretty designs for a yearly fee. Astro is free, fast and yours, but you work with files. An honest look at cost, ease and who should pick which.
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 Build an Astro Website With Gemini
Use Google's Gemini to build an Astro site, in the free chat or with Antigravity, Google's coding agent that replaced the Gemini CLI in 2026.
Can I Build an Astro Site With Grok, Kimi, DeepSeek or Qwen?
Yes. Any AI chat can write Astro code for you. Here's the method that works with all of them, and which ones also have a coding agent that edits your project.
How to Build an Astro Website With Claude (Step by Step)
Use Claude to build a real Astro site, in the chat at claude.ai or with Claude Code in your terminal. This very site was built that way.
What Is EmDash? Cloudflare's Astro CMS Explained
EmDash is a free tool from Cloudflare that adds a writing dashboard to an Astro site. Here's what it does, how it compares to WordPress, and who it's for.
How to Build an Astro Website With ChatGPT
Use ChatGPT to build an Astro site, either by chatting and pasting code, or with Codex, OpenAI's coding agent that works inside your project.
How to Install EmDash (Step by Step)
Create your first EmDash site on your own computer. One command sets up the project, then you finish the setup in your browser.
EmDash vs WordPress: Which Should You Choose?
An honest comparison of EmDash and WordPress on plugins, security, hosting and ease of use, including when WordPress is still the better choice.
Astro vs EmDash: Do You Need a CMS?
Astro and EmDash aren't rivals. EmDash is a CMS built on Astro. Here's how to decide whether plain Astro is enough for your site.
How to Build an EmDash Site With Claude or ChatGPT
EmDash projects ship with files made for AI coding tools. Here's how to use Claude Code or Codex to customize an EmDash site without writing the code yourself.
How to Move a WordPress Site to EmDash
EmDash can import your WordPress posts, pages and media. Here are the steps, what comes across, and what you'll need to rebuild.
Claude vs ChatGPT for Building Websites: A Beginner's Comparison
Claude and ChatGPT can both build an Astro site. Here's how they differ in practice, what each costs to use for coding, and how to choose.
What Is Claude Code? A Plain-English Explanation
Claude Code is a coding tool from Anthropic. It works inside your project, edits files and runs commands. Here is what it does, and whether a beginner should use it.
Best AI Tools for Building Astro Sites in 2026
Eight AI tools that can build or change an Astro site, from free chat assistants to coding agents and in-browser builders, and which to start with.
12 Astro Prompts for Claude and ChatGPT (Copy and Paste)
Ready-to-use prompts for building an Astro site with AI: setup, pages, a blog, styling, fixing errors and deploying. Each one tells the AI what it needs to know.
Astro SEO: A Beginner's Guide to Getting Found on Google
Everything an Astro site needs to rank: titles, descriptions, canonical links, a sitemap, social previews and structured data, with code you can copy.
9 Mistakes AI Makes With Astro (and How to Spot Them)
Claude, ChatGPT and other AI tools learned Astro from older tutorials. Here are the old patterns they produce, and the current code to use instead.
Astro vs Next.js: Which Is Better for Beginners?
Astro and Next.js are both popular, but they're built for different jobs. Here's which one to learn first, and why.
How to Connect Claude and ChatGPT to the Astro Docs
Stop AI tools guessing at Astro. Connect Claude Code, Codex, Cursor or ChatGPT to the official Astro docs server. Learn what AGENTS.md does.
What Are Astro Islands? A Plain-English Explanation
Islands are the idea that makes Astro fast. Here's what they are, in plain words, and what happened when we built a page with four of them.
Best CMS for Astro: 5 Options for Beginners Compared
The best content management systems for Astro, from EmDash to Keystatic and Sanity, and how to pick one without overthinking it.
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.
How to Fix Astro Errors With Claude or ChatGPT
A simple method for getting an AI to fix an Astro error on the first try: what to paste, what to say, and what to check before you trust the fix.
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.
Do You Need React With Astro? When a Script Tag Is Enough
Astro lets you add React. Most beginner sites don't need it. Here's how to add clicks and toggles with a plain script, and when a framework earns its place.
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.
Best Hosting for Astro and EmDash: Our Two Picks, and Three Others
Our two picks are Spacefast, from the makers of WordPress.com, and Cloudflare, which made EmDash. Here's why, plus how Netlify, Vercel and GitHub Pages compare.
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 Make a Website With Astro (Step by Step)
Build and publish your first website with Astro in about an hour. No coding experience needed, just a computer and a free account.
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.
Astro 7: What Beginners Need to Know
Astro 7 brings faster builds and stricter HTML rules. Here's what changed, in plain English, and what it means if you're just starting out.
What Is Astro? A Plain-English Explanation
Astro is a free tool that makes fast websites. Here's what it does, who it's for, and how it compares to WordPress, in words anyone can follow.
Astro vs WordPress: Which Should a Beginner Choose?
A plain look at Astro and WordPress on cost, speed, security and ease of use. Also when WordPress is the better choice.
12 Big Names Using Astro
From IKEA to Porsche, real organisations appear in Astro's official showcase. Here's who's on it, and what it means for your first site.
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.
How to Add an Integration to Astro
Integrations add new powers to your Astro site, a bit like plugins. Here is how to add one with a single command.
How to Install an Astro Theme
Astro themes aren't installed like WordPress themes. Here's how to start a project from a theme and make it your own.
Why Your First Website Should Be a Static Site
Beginners are often told to start with a big platform. We think a simple static site teaches you more and costs you less.