This article provides a basic overview of Astro and explains why it was chosen to build this website.
Table of contents
Open Table of contents
What is Astro?
Astro is the all-in-one web framework designed for speed.
Astro is content focused framework that provides powerful SSG for generating static sites and if necessary goes beyong by adding backend rendering with SSR.
My Jamstack experience
As a seasoned web developer, I have come a long way, from building old-time custom CMS systems rendering all content on server side to a modern static site generators: m9-generator and Jamsite.
m9-generator
m9-generator is a Node.js static site generator based on:
- gulp for executing workflow tasks
- webpack for static asset compilation
- babel for JS transpiling
- metalsmith as a static site generation engine
- handlebars as a template engine
- browsersync for a smooth dev experience
In essense, m9-generator is an opionated, preconfigured setup of the tools mentioned above, along with custom plugins that extend their functionality.
Although m9-generator is no longer supported, numerous high-load websites continue to run with m9-generator in the wild.
m9-generator resources:
- npm: @tsertkov/m9-generator npm package
- github: m9-generator - m9-generator
- github: m9-starters - m9-generator starter boilerplates
- github: m9-example-sites - m9-generator showcases
Jamsite
Jamsite is a Node.js framework designed to be superior to m9-generator by offering optional server-side rendered pages and dynamic endpoints.
Jamsite is very minimalistic and is based on:
- micro for server-side microservices
- handlebars as a template engine
- chokidar for smooth dev experience
- toml for frontmatter parsing
Jamsite resources:
- npm: @jamsite - @jamsite/* npm packages
- github: jamsite
- github: jamsite-dev
- github: jamsite-cli
- github: site-playground
- github: site-examples
- github: site-starter-rollup
wp-headless
Typically, when transitioning from a classic CMS to a static site generator system, one of the challenges faced is managing content editing and storage. Headless or API-first CMS solutions are often the answer. These systems usually expose special data API endpoints used by static site generators, website runtimes, applications, or other data consumers.
Here is a list of example systems:
- Contentful - a cloud-based headless CMS
- Prismic - a headless website builder
- Strapi - an open-source headless CMS
- WpHeadless - a Wordpress Headless Bundle
The WpHeadless bundle is a Wordpress solution I developed to transform open-source Wordpress into a headless CMS with a set of specialized configurations and plugins.
Why Astro?
Why Astro now? It seems to be good, adhering to many principles I appreciate. Astro is simple, it is fast, and based on Vite, which offers a superior development environment compared to webpack, babel, browsersync and metalsmith.
Another reason is that I am lazy, and it’s easy to hop on a train that’s already moving in the same diection as me.