In this post, I will cover the benefits of using static site generators for a blog, as well as why Astro is my site generator of choice.
Static site generators (SSGs)
When it comes to serving text-like content over the Internet, there are two choices: static and dynamic serving. Static serving means generating files once and then serving them over and over while dynamic serving is generating files on the fly for each request. Recently, the line between static and dynamic serving starts to blur, but the divide still stands.
In most cases, static site generators take Markdown pages and templates as input and generate HTML, CSS, and JS files as output.
Why Astro is the future of SSG
There are many, many static site generators out there. I used a few of them (namely, Jekyll, 11ty, and Hexo), and they all are decent. So why use Astro exactly?
First, I think it's rational to divide all SSG software into legacy and modern tools. If we look at most of the popular SSGs, we can see that most of them were created long before modern tooling became popular. For example, Jekyll was created in 2008, 2 years before AngularJS was released! Back then, things like modern frontend frameworks, ES5/ES6, or web components didn't even exist.
Even though legacy generators still work perfectly, I can't help but feel frustrated when using them. They do their job but have terrible developer experience. It's hard to customize site pages by adding styles, creating templates, and deciding which page is rendered by which template. There's a stark difference in using legacy site generators versus using something like React or Vue.
Speaking of modern tools for site generation, Astro is not the only "new school" generator. There are many tools that are tackling the problem, like Gatsby and Gridsome. However, I feel that most of them doing it wrong. Here are some of the features that make Astro a better choice. Many of these features are not unique to Astro, although Astro is the only generator to my knowledge that has all of them.
"Bring your own framework"
Most of the modern generators are tied to a specific front-end framework. For example, Gatsby and Docusaurus work only with React, while Gridsome and VuePress are exclusive to Vue. By untying the connection between framework and site generator, Astro allows reusing components across any framework.
Components inside Markdown
This is my favorite feature of Astro. Most of the site generators don't allow you to easily inject custom components into the page's content. By using components inside Markdown, you can customize your page with better granularity.
Vite
Let's just say that Vite is fast, really fast. Many projects start to adopt Vite and ditch Webpack, and for a good reason. Vite provides instant build, hot module reloading, doesn't require a lot of configuration, and has a rich plugin library. Astro supports Vite by default, so you can enjoy all these benefits by simply using Astro.
No JS by default
By default, Astro doesn't output any Javascript. This is the killer feature for performance. You don't need to spend time optimizing the bundle or minimizing the list of dependencies. Astro sites load fast by default.
Conclusion
In short, Astro has the performance of legacy tools with the developer experience of modern site generators. You can use React, Vue, and Svelte, but the output will include minimal or no Javascript at all.
Top comments (0)