Okupter

Building this website with SvelteKit and DatoCMS

Justin's profile pic

Justin Ahinon

Last updated on

For the past few years, my interest for static websites, web performance, headless CMS has been growing. I've had segbedji.com for quite a few years now, and I've been sharing mostly WordPress and personal related content on it.

Back in June 2022, I wanted to have a new place to share my thoughts without them being tight to the "WordPress guy" brand I've been building for the past few years. That's what led me to create this website.

Debuts with Astro

As you can see, the first blog post on this website was about Astro. Astro was my first real favorite static website builder. I really liked the approach it uses by keeping every thing close to old plain HTML, CSS and JavaScript. Also, being able to ship websites without JavaScript per default is a huge plus in my opinion.

I've been using Astro on this blog for a few months, coupled with Markdown files for the blog posts. That combo worked pretty well, and it was delightful working with it.

I've also been using Astro on some client projects, so having my personal website built with it was a good way to test things out.

Wanting more

At some point with my journey with Astro, I started to feel like I was missing some things. I wanted to take advantage of things like mixing different rendering strategies, enhanced forms handling, and more. Although these are things that can be done with Astro, not having some of them built in by default was a bit of a pain.

At that time, I already had worked a bit with Svelte and SvelteKit, so I decided to give it a try and see how it would work out.

My current setup

This website is built with SvelteKit, and it's hosted on Vercel. Most of the pages are statically pre-rendered at built time, and a few others like the blog posts are server-side rendered. I also use TailwindCSS for styling, and I have to say that I'm really enjoying it.

I've started this SvelteKit version with the Markdown approach, but eventually started lacking some flexibility. Given that I've quite some client projects and experience with DatoCMS, I went with it as the headless CMS for this website.

DatoCMS

Over the past few years, I've explored a bunch of headless CMS options. The current market is pretty crowded with some big players like Contentful, Sanity, some outsiders like Strapi, and some smaller ones like DatoCMS.

Coming from the WordPress ecosystem, my expectations for a headless CMS are quite high. What I want in a headless CMS is having enough flexibility to design and manage my content/data as I wish, but also good baselines features that I can rely on. Great developer experience and nice UI are also a plus.

DatoCMS has been the tool that gives me most of the things I want in a headless CMS, with some compromises I can live with.

Okupter models in DatoCMS

The editor

DatoCMS's editor is probably the feature I like the most, and I can confidently say that it's the best headless CMS editor I've used so far. It reminds me a lot of WordPress own Gutenberg editor, but with a lot more flexibility and customization.

Since the editor outputs JSON, you can do pretty much everything you want with it on the frontend. From creating custom blocks, customizing inline records outputs or extending the editor with custom plugins, you can do it all.

Fetching data into SvelteKit

DatoCMS comes with a GraphQL endpoint that can be used to fetch data. I've started using old school fetch with some .gql queries to fetch data, but quickly run into the need of having some type safety in the process.

I've then switched to using tools like [@graphql-codegen](https://the-guild.dev/graphql/codegen) and graphql-request to generate types for queries and [graphql-request](https://github.com/prisma-labs/graphql-request) for the type-safe client.

I ended up using Genql for this whole process.

You can take a look at the source code for the queries, the generated types and the client.

Wrapping up

I like to see my personal website as my digital garden. A place where I can safely experiment with new things, try techs that I'm interested in, and share my thoughts about them. I'm really happy with my current setup, and I'm looking forward to seeing what the future holds for it.

Join Okupter's Mailing List

Join Okupter's mailing list to get regular updates on web development, accessibility, performance, and more.