I had a couple of days off during the COVID-19 pandemic and I felt like my website needed a face lift. First of all I wanted to make it look in-line with my YouTube Channel but I was also ready to explore new tools.
EDIT May 5th 2020: I have open sourced the code for this blog on Github.
EDIT May 7th 2020: Check out the video about the project here.
I need my website fast, offline available and progressively enhanced. To accomplish this I need a modern tool set that just works. For a while people have been telling me to check out Gridsome. Gridsome is made for static websites and it has a great set defaults that help you out.
What I like most about Gridsome is that is abstracts the data layer away from the user. I like that I can use the same GraphQL interface to connect to a bunch of different third party REST endpoints or plain old markdown files. It took some getting used too but it quickly became my friend. I finally got to use GraphQL and it's SO AWESOME.
Also, JAMstack for the win.
There are a lot of choices out there for headless CMS solutions. After a bit of looking around I found the Paris based Prismic. What spoke to me immediately was that I could use it for free for one user. This is the perfect way to fiddle around with a tool to see if you like it. I like it so much that I will use it at work. If they didn't have this free tier, I would not use it and they would potentially loose some business. Start-ups out there. Pay attention. This is how you do it.
Prismic is doing a bunch of things right that a lot of its competition is failing on. Even the big CMS systems out there do not have some of the features Prismic offers.
The slices field is used to define a dynamic zone for rich page layouts. For example in a blog post, defining a Slice zone allows the writer to choose between adding a text section, an image or a quote. This gives the writer the freedom to compose the blog post by alternating and ordering as many of these choices as they want/need.
This "component" driven approach is usually only seen in big enterprise systems and I was pleasantly surprised to see it.
A thing most CMS systems have not solved is the notorious rich text editor. It's always super hard to control what users put into it and what kind of garbage comes out. Prismic fixed this by creating their own rich text field that has a proper data model attached to it. Every paragraph, heading, link, image or embed is an entry in a JSON object when you fetch the page.
With this JSON object you can build your own content renderer in the front-end or you can use Prismic's pre-build components. They have code to deal with Node.js, React, Next, Garsby, Vue, Nuxt, Laravel, PHP, Ruby, JAVA, and dotnet. So, they are a headless CMS but they also provide tooling to render the data from their system should you need it.
Prismic pays for an imgIX license for all its users. I would personally have liked to see Cloudinary here but that is just taste. Services like imgIX, Twicpics or Cloudinary take away the pain of having to size and optimize images for the web. They intelligently optimize the images you upload and they even serve the correct file type for your browser. Chrome gets a webm file for example.
At work I deal with enterprise level CMS systems for global clients like L'Oreal, Lufthansa, etc. Even these extremely overpriced systems, which can power hundreds of websites in a single instance, do not deal with media in a way that Prismic does. They have expensive DAM systems and they still do not care about how the media from that DAM is delivered to the front-end. Props to Prismic for understanding what end-users need. It's all about smart defaults.
REST and GraphQL endpoints
How many CMS systems have you seen that offer both a REST and a GraphQL API interface that is secure, performant, easy to use and well documented? I chose to use the GraphQL interface as it connects nicely to my GraphQL source plugin in Gridsome. I could have use the REST interface just as easily. Flexibility and choice is what we need.
We all know Netlify by now. They have a whole bunch of services of which I only use one. I host my site on Netlify. Netlify listens to "publish" web hooks from Prismic and it detects changes to my deployment branch on Gitlab. On both those events it fetches the code of the website, runs a build and deploys it on the Netlify CDN Edge network. No origin server needed! JAMstack for the win.
The blog has a bunch of features. Fist and foremost, it scores 98+ in google audit. It takes a bit of effort but once you know what to do it's not that hard. If you need any tips, reach out on twitter @timbenniks.
To reach this performance score I made sure that I don't load anything I don't need. No external scripts and as little external library code as possible. Also, I lazy load as much as I can. All images, embeds, syntax highlighting, iFrames, etc are lazy loaded using an intersection observer.
Furthermore I pre-connect to external sources like Google analytics and Google web fonts. I also preload JS chunks for the upcoming pages (Gridsome does this by default). The service worker stores a bunch of info in the local cache so the app responds fast while moving through its pages.
Future features might include creating a new video page dynamically when I publish a YouTube video but I'm still waiting for Prismic to implement some features.
I needed a little bit of time to understand the Prismic data model and how to connect it to Gridsome. There is (at the time of writing) no official way of connecting Prismic to Gridsome so I hacked it in with the help of @jakedohm. Once I understood it, I started to love the combination and I even created some extra abstractions in Gridsome to make my life of working with Prismic data super easy. If you are interested to know what kind of extra code I wrote I'm happy to give you an overview. Reach out on Twitter @timbenniks.
I want to thank the Prismic team for being super helpful and for jumping on a call with me to figure out some stuff. Merci les mecs! I also want to thank Jake Dohm and Tommy Vedvik for assisting on the Gridsome side of things. And lastly I want to thank Debbie O'Brien (Head of learning at Nuxtjs) for not being too upset that I moved away from my trusty Nuxtjs. No worries, I still love Nuxt and I will still be using it for projects.