ūüĒ• Join our¬†free ¬†SvelteKit Workshop on June 28 -¬†only 9 seats remaining ! ūüí®¬†Save Your Spot!

Building this website with SvelteKit and DatoCMS

Justin's profile pic

Justin Ahinon

Last updated on

Table of Contents

    Building this website with SvelteKit and DatoCMS

    For the past few years, my interest in static websites, web performance, and 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 everything 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 in 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 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.

    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.

    You might also like these blog posts

    I want to know more about you

    I want to know more about you

    Become a part of the conversation on Svelte and SvelteKit. Connect with like-minded developers and learners.

    Fix the 'Cannot stringify arbitrary non-POJOs' error in SvelteKit

    Fix the 'Cannot stringify arbitrary non-POJOs' error in SvelteKit

    Solve the "Cannot stringify arbitrary non-POJOs" error in SvelteKit with this quick and simple guide. Learn how to fix the issue by serializing non-POJOs with JSON or structuredClone.