Build a Real Astro Site
A practical path for WordPress developers learning Astro by building a real content site: local setup, MDX, Content Collections, Tailwind, SEO, search, and deploy.
Build the content site in the order it actually makes sense
Start with the messy story: the setup confusion, the localhost moment, and the two-day learning curve.
Create the project, understand Astro files, and deploy the first static site.
Turn a simple site into a real content system with MDX, YAML, collections, and page templates.
Add Tailwind, SEO metadata, schema, sitemap, robots.txt, and AI-crawler files.
Add search, affiliate redirects, UI components, dark mode, pagination, and the final site pass.
This series starts with the awkward part: I came from WordPress, thought Astro would take one afternoon, then spent two days learning the workflow for real.
The point is not to pretend Astro is magic. The point is to show what actually changes when content moves from a dashboard and database into files, components, and a build step.
- You know WordPress and want to understand Astro without hype
- You want to build a blog, guide library, affiliate site, or portfolio
- You are comfortable learning through files, terminal commands, and Git
- You want a real project instead of another tiny starter tutorial
- You need a browser-based CMS dashboard on day one
- You are building WooCommerce, memberships, or user accounts
- You want a no-code site builder rather than a developer workflow
Series contents
Published lessons will become clickable here as each batch moves from the draft workshop into the live guide collection.
Orientation
Understand why this series exists, what the demo project is, and how the WordPress-to-Astro mindset shift feels.
Astro Foundations
Set up Astro, understand pages, layouts, components, styling, static generation, and deploy the first version.
- 1.1 What is Astro? A WordPress Developer's Honest Take ->
- 1.2 How to Set Up Your First Astro Project: A WordPress Developer's Real Experience ->
- 1.3 Astro Pages, Layouts and Components: The First Three Concepts to Learn ->
- 1.4 Styling in Astro: Start with Plain CSS Before Reaching for Tailwind ->
- 1.5 Static Site Generation Explained: Why Pre-Built HTML Beats WordPress's On-Demand Approach ->
- 1.6 How to Deploy Astro to Vercel: From Local to Live in 5 Minutes ->
Content with MDX and YAML
Build the content model: Markdown, Content Collections, dynamic routes, MDX, reviews, comparisons, guides, and images.
- 2.1 Markdown content
- 2.2 Content Collections
- 2.3 Dynamic routes
- 2.4 MDX components
- 2.5 Review pages
- 2.6 Comparison pages
- 2.7 Guide pages
- 2.8 Local images
- 2.9 Cloudinary
Tailwind and Technical SEO
Move from plain styling into Tailwind, then add meta tags, Open Graph, JSON-LD, sitemap, robots.txt, and llms.txt.
- 3.1 Tailwind setup
- 3.2 Tailwind refactor
- 3.3 Meta tags and Open Graph
- 3.4 JSON-LD schema
- 3.5 Sitemap and robots.txt
- 3.6 llms.txt
Search, Components, and Polish
Add answer-first content patterns, go-links, UI components, dark mode, Pagefind search, pagination, and final polish.
- 4.1 Content SEO and AEO
- 4.2 SEO/AEO/GEO/HEO theory
- 4.3 /go/ affiliate links
- 4.4 Component library
- 4.5 Dark mode
- 4.6 Pagefind search
- 4.7 Pagination
- 4.8 Homepage redesign
- 4.9 UI polish
- 4.10 Phase 1 wrap-up
The foundation batch is live. Advanced parts are next.
Article 00 through Article 06 are live now — a complete path from the learning diary to a deployed Astro site. The content-model and SEO lessons are next.