Launching a blog with Astro

My thoughts on the best Static Site Generator available, and why you should use it, especially if you are new to web development.

3 December 2023 — Goulven CLEC'H

  1. What’s a Static Site Generator?
  2. Why does Astro stand out?
  3. How Astro help beginners
  4. Conclusion

After two years of procrastinating, I finally launched a blog. Besides a feeling of illegitimacy and lack of time, the main reason not to launch earlier was that I needed a blogging technology that amused me…December 2025:
I don’t really have fun anymore. I still thinks Astro is the good choice for production, but I’ll probably switch to something more custom for my personal blog :/

Until my friend ...Erika introduced me to Astro !

What’s a Static Site Generator?

Before seeing how Astro works, you need to understand two concepts:

Firstly, a static website consists of web pages delivered to the browser exactly as they are stored, unlike a dynamic website where a server will generate the pages at every user request.

Therefore a static site won’t need a server, which can be expensive and unreliable, and can instead use a free content delivery network (CDN)1 like Vercel or Netlify.1 — Once your static site is shipped, every page will be cached on multiple CDN servers around the world. When a user requests a page, it will be delivered from the closest CDN server, ensuring good performance and cost efficiency.

Secondly, a site generator is a software that will generate your pages by taking, on the one hand, a template describing the appearance of your site, and on the other hand, text files representing the content.

Storing content in text files rather than a database is not only a time saver, but allows to edit them in a simple code editor, easily export them, store them with the rest of the code, and use a versioning system like Git to track changes.

A basic text file in Markdown
title: "My first blog post"
date: 2023-12-03
tags:
  - "web development"
  - "astro"
---
This is my first blog post, I hope you will enjoy it!
A basic template in JSX
<main>
  <h1>{title}</h1>
  <ul>
  {tags.map(tag => <li>{tag}</li>)}
  </ul>
  <p>{content}</p>
  <p>Published on {date}</p>
</main>
The generated page in HTML
<main>
  <h1>My first blog post</h1>
  <ul>
    <li>web development</li>
    <li>astro</li>
  </ul>
  <p>This is my first blog post, I hope you will enjoy it!</p>
  <p>Published on 2023-12-03</p>
</main>

Since the genesis of static site generators (SSG) with Wikipedia and Jekyll, these softwares have become popular among devs like us. However, the general experience is still “nerdy” and requires not being scared by a code editor or command lines… Explaining the general public preference for WordPress, even though it’s more expensive and less reliable.

Even for us, the experience can be frustrating. Without making a complete list, the majority of the available SSGs falls into one of these three faults:

Why does Astro stand out?

Astro’s proposal is simple and unique: offering a JS powered SSG that does not ship any JS by default.

This means an easy-to-understand SSG for every web developer. All you need is to understand HTML/CSS, the JS basics, and how to install a package with Node Package Manager (NPM)… So the ABC of web development. A screenshot of the Astro CLI, asking for the project name, if it uses a template, and if it needs to install dependencies. Astro’s CLI is a wizard that helps you launch your project in a few seconds 🧙

You can already write your first templates with JSX, a popular syntax blending HTML with JS. Style the page with basic CSS stylesheets. Write your content in Markdown, a simple syntax for text formatting. And that’s it, your Astro blog is ready to be shipped!

Astro won’t ship your content into a huge JS application, but only generate simple HTML pages. So no client-side JS by default, reducing page weight and ensuring cosmic performance.22 — See how Astro performs compared to other frameworks in the real-world ☞ F. Schott (2023). Framework Performance Report source.

However, Astro is fully integrated into the JS ecosystem. If you need any JS logic or any NPM library, you can add it above the template and it will be executed at build time. If you need client-side JS, you can simply add a <script> tag to your template that will be injected into the page.

Even better, if you can’t do without a JS framework, use Astro Islands to inject a specific component in the middle of a classic Astro page.

---
// Build-time logic
const currentTime = new Date().toLocaleTimeString();
const greeting = `Hello, the current time is ${currentTime}!`;
// Importing an Astro component
import Title from "../components/Title.astro";
// Importing React components
import StaticReactComponent from "../components/StaticReactComponent.jsx";
import DynamicReactComponent from "../components/DynamicReactComponent.jsx";
---


<html>
  <head>
    <Title>Astro Example</Title>
    <script>
      // Client-side JavaScript
      document.addEventListener("DOMContentLoaded", () => {
        console.log("Hello from client-side JS!");
      });
    </script>
  </head>
  <body>
    <header>
      <h1>{greeting}</h1> {/* JSX templating */}
    </header>


    <main>
      {/* Stateless React component */}
      <StaticReactComponent message="I am a static React component!" />


      {/* Dynamic React component using Astro Islands */}
      <DynamicReactComponent client:load message="I am a dynamic React component!" />
    </main>
  </body>
</html>

I think I summed up the spirit of Astro pretty well. On the one hand, it’s an SSG that aims for simplicity by using well-known languages, a simple syntax, and generating simple HTML pages. And on the other, it’s an SSG open to the JS galaxy: you can use all your NPM libraries, ship client-side scripts, and even integrate other frameworks.

How Astro help beginners

Let’s swift through the obvious answer: yes, Astro a comprehensive documentation and a stellar tutorial for your first blog. And yes, as ...Erika said on her blog, you should not underestimate the power of Astro’s good editor tooling!December 2024:
Sadly, I feel like the documentation is not as good as it used to be. Not only the design has become less coherent and harder to navigate, but even the content has suffered from the complexification of the software. Still better than most tho!

But, on a deeper level, I think that two fundamental aspects of Astro’s philosophy makes it the perfect launchpad:

First, unlike traditional web development, you don’t have to understand all the best practices to make a decent site: Astro’s default options are set intelligently, will raise warnings when you forget important things, and will ensure good performance through their simplicity.3 Getting started is easy, and you will be able to understand and modify those settings at your own pace.3 — E.g., Astro optimizes your image by default, using a modern format, including the loading and decoding attributes, and pushing you to fill the alt attribute (for accessibility) and dimensions (to avoid Cumulative Layout Shift). Source

Second, unlike hefty JS frameworks, you will not immediately be thrown between obtuse concepts like the shadow DOM and the SPA router, chaotically wrestling with black magic before understanding the basics… Being a web developer should be mainly learning CSS/HTML/JS/DOM APIs—which Astro does not dramatically alter!

By wrapping web APIs and maintaining simplicity, Astro ensures that most web documentation applies to your project (like MDN’s HTML/CSS documentation) and doesn’t ask you to learn a complex stack. Then, delving deeper, you will slowly master web development, its essential technologies, its most common tools, and their best practices… Not just a web framework.

Conclusion

Of course, Astro is not a magic wand: you still have to learn web development, with all its inconsistencies and frustrating complexity. JS still sucks, lacking consistency and abstractions.4 And you will still encounter cryptic errors, especially because of JS’ undefined and from Vite (Astro’s dev server).4 — And, somehow, the JS ecosystem is still lacking. Like for CMS, where you have to choose between a hundred of options but none really usable or decently priced…

But Astro make the web development easier to learn, easier to ship, easier to maintain… and more fun!

Now is the perfect time to start, as the software is experiencing fast and intelligent growth, attracting major companies like Google, Microsoft, UNDP, Ikea, Vercel, NordVPN, The Guardian, Trivago, Cloudflare… Plus, you can join the Discord server, where you can meet the friendly and helpful core team.