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.

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.

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!

<main>
  <h1>{title}</h1>
  <ul>
  {tags.map(tag => <li>{tag}</li>)}
  </ul>
  <p>{content}</p>
  <p>Published on {date}</p>
</main>

<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:

• The “traditional” SSG, which are often either hermetic or poorly integrated into the JavaScript (JS) ecosystem, cutting off access to many valuable libraries for web development.
• The “modern” SSG, built on top of huge JS frameworks, preventing correct performance or reliability.
• The “niche” SSG, made with fantastic and modern languages but whose poor documentation and nascent ecosystem will drain your time.

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.

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.

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.

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

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 🚀