Launching a blog with Astro

3 December 2023 — Goulven CLEC'H

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…

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) like Vercel or Netlify.

A world map with a central server, linked to multiple CDN servers, linked to multiple users.
Once your static site is shipped (in blue), every page will be cached on multiple CDN servers around the world (in pink). When a user requests a page (in green), 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
- "web development"
- "astro"
This is my first blog post, I hope you will enjoy it!
A basic template in JSX
{ => <li>{tag}</li>)}
<p>Published on {date}</p>
The generated page in HTML
<h1>My first blog post</h1>
<li>web development</li>
<p>This is my first blog post, I hope you will enjoy it!</p>
<p>Published on 2023-12-03</p>

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.

In a few seconds, launch your project into orbit with the CLI wizard 🧙

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.

Astro lightouse average score 98, Gatsby 68, Next.JS 63, Wordpress 58
Based on Lighthouse real-world performance data. 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, the Astro Islands allow you to inject a specific component in the middle of a classic Astro page.

Soon here: an example of an Astro component with build time logic, client side JS,
a React component, and JSX templating.

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!

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. Getting started is easy, and you will be able to understand and modify those settings at your own pace.

Astro Lighthouse average score is 98, Gatsby 68, Next.JS 63, Wordpress 58
An example with Images where 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.


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. And you will still encounter cryptic errors, especially because of JS’ “undefined” type and from Vite (Astro’s dev server).

An unnumerable list of CMS logos...
Somehow, the JS ecosystem is still lacking. Like for CMS, where you have to choose between a hundred of options, but none are really usable or decently priced...

But Astro make the web development easier: 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, unlike in space, we can hear you scream on the Discord server, where you can meet the friendly and helpful core team.

See you out there astro-nauts 🚀