Try our conversational search powered by Generative AI!

Jacob Pretorius
May 28, 2024
  484
(7 votes)

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”.

 
Screenshot of Astro website

 

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

  1. Content-driven: Astro was designed to showcase your content.

  2. Server-first: Websites run faster when they render HTML on the server.

  3. Fast by default: It should be impossible to build a slow website in Astro.

  4. Easy to use: You don’t need to be an expert to build something with Astro.

  5. 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.

 
Next website screenshot

 

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.

Screenshot of sample site

 

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

May 28, 2024

Comments

Please login to comment.
Latest blogs
Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog

Auto-translate with OpenAI GPT-4o in Optimizely CMS

Improvements for Episerver.Labs.LanguageManager! It's now possible to auto-translate both a page and its children at the same time! Additionally, m...

Tomas Hensrud Gulla | Jun 7, 2024 | Syndicated blog

Upgrade To Optimizely CMS 12 Issue: List item fields have become Required

There are many funny details to be aware of when upgrading from Episerver CMS 11 to Optimizely CMS 12. One of them that might feel a bit confusing ...

Allan Thraen | Jun 7, 2024 | Syndicated blog