Build a headless blog with Astro and Optimizely SaaS CMS
I’m a big fan of using the right tool for the right job. I’m also a big fan of Astro, for the right use case.
Let's explore Astro to see what it's all about and how to build an Optimizely SaaS CMS site using it.
What is Astro
Astro calls itself “The web framework for content-driven websites”, which sounds very fancy and highly relevant to us as we enter the wonderful headless content delivery world with the Optimizely SaaS CMS.
I’d imagine that many of the headless sites we’re going to be building over the next couple of years are going to lean quite strongly into not just being “content-driven” (that’s all websites?), but “content heavy”.
The team behind Astro aren’t trying to build a javascript framework for all web experiences ever, instead, they go for a very specific kind of website. That gives them the luxury of making opinionated calls with the framework and the optimisations it can ship straight out of the box.
The Why Astro page has some great information, most notably:
-
UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more.
-
Server-first: Moves expensive rendering off of your visitors’ devices.
-
Zero JS, by default: Less client-side JavaScript to slow your site down.
However, the Astro team know the lines blur really quickly between static site, SPA, PWA, and everything else content-driven you can build with other frameworks. So they have this Islands concept, where you can use your React/Vue/Svelte “components” inside your Astro project, and at build time they get rid of all the overhead from those frameworks and just ship the javascript needed to make your dynamic components work.
If you think about it, these optimisations start to open many doors.
I’ll wrap up this section with their design principles, which I think help explain their biases clearly
-
Content-driven: Astro was designed to showcase your content.
-
Server-first: Websites run faster when they render HTML on the server.
-
Fast by default: It should be impossible to build a slow website in Astro.
-
Easy to use: You don’t need to be an expert to build something with Astro.
-
Developer-focused: You should have the resources you need to be successful.
What about Nextjs
Nextjs seems like it could be the default implementation choice for most Optimizely SaaS implementations, the Optimizely demo implementation also use next. As Nextjs itself is funded by Vercel and built with the React ecosystem you’re in relatively stable hands.
If you’re somewhat familiar with Nextjs then you’re probably already thinking these two frameworks have a lot in common, and you’re right. As always, it comes down to the use case.
I’m not going to argue the pros and cons here (maybe in a future post?), but I would like to explore the most simple of use cases where I think you could do well with either option.
Let’s build a blog
What could be more simple than a static site with a few pages and some articles? I can’t think of anything exciting enough to build and share here.
Thankfully, building a decent blog with Astro is ridiculously easy. I’m not joking. I moved my personal blog over from a custom CMS I built myself to Astro in less than a day, and it got even better in the process.
I spun up the Astro blog template and hooked it up to my SaaS CMS Optimizely Graph and what do you know we have a working website.
Check it out here https://opti-saas-astro-static-demo.vercel.app
In the next post I’ll walk through the code a bit and share how it all fits together, but for the eager you can find it here https://github.com/jacobpretorius/Opti.SaaS.Astro.Demo
Comments