How this site is made Hint: Strapi, Gatsby, S3, Cloudfront

How this site is made (currently)

So this site started as an exploration into the current state of static sites and blogging. Initially i was looking into techniques for using an object store as the endpoint for static sites and looking at generators and what the current state of that is. So i did a little research and took a look at a few different approaches.

  • Hugo
    • a golang based static site generator. Really powerful but seemed like it wasn't all that flexible.
  • Nextjs
    • react based hybrid static site generator
  • Gatsby
    • React based static site generator
  • VueJs
    • really nice javascript framework for single page applications my still use this somewhere.
  • Just plain HTML!

When it comes to building and maintaining a website i didn't want to be proofreading raw html + css all that much and from looking at all the above toolsets it really felt like people had already done a whole lot of the hard work for me.

Of all of the tools i looked at though, Gatsby was the clear winner. It was quick and easy to learn, had a ton of documentation and loads of community involvement. While people did build very complicated projects with it primarily it was seen as a super fast way to serve static content reliably without the need for a server to run say a nodejs, python, golang binary. I work with object storage a lot so the goal would be to serve the site from an object store as static content. Gatsby had examples with S3 to do exactly that. It also had a rich library of 'starters' boilerplate opensource example sites that could be used to build your own content so changing the look and feel of the site could be done quite quickly.

One of the first starters i tried was this one.

Gatsby starter apple example

Its got a lot of great things going for it but i found updating categories and working with mdx docs a bit of a pain.

It was then i was looking into Strapi. Strapi is a headless cms system that serves a graphql api . Initially i thought that there wsa no way i would need or want something like this but after watching a few youtube videos that showed the functionality

Like this one by Chris Hawkes

I began to see the advantages. Best of all Strapi had a whole host of well written documentation too! So far i've followed and adapted this tutorial from their main site to fit my content with more changes to follow

Strapi and Gatsby tutorial

So once i knew how i was building the site the next question was how to host it, preferably for free. All in all the static assets generated amount to about 14.1mb so the data storage ain't going to break the bank. I took at look at a plugin for gatsby to upload a gatsby site to s3.

S3 plugin for Gatsby

This makes all of the uploading to s3 pretty easy and sets a few optimizations that would be recommended. Then i use cloudfront and a dns redirect to cache and serve the site directly.

So currently the site is

Strapi + Gatsby + S3 + Cloudfront

Its a little complicated for a simple thing but its helping me learn React and javascript in a meaningful way and making it easy to add content which is whats important.

By Tony Lokko