Hiya! I'm Arisa, a DevRel Engineer at Storyblok. My brand new blog & portfolio site is now in public! 🎉

In this blog post, you'll find the tech stacks I chose and the process of development.

What's the tech stack?

I chose these below this time 👇

• Storyblok

• Gatsby.js

• Netlify

What's new except the tech stacks?

Well, there're several things I want to highlight.

1. Headless CMS with a visual editor

2. SSG for high performance

3. Netlify controls hosting, build and custom domains

4. Dark mode & light mode integration with TailwindCSS & Gatsby

5. Blog posts list and featured blog posts list

If I'll be very honest with you, this is actually a draft release 😅 For personal reasons, I only could spend 1 week and a half, that's not enough time for me to put all the features I wanted.

So, stay tuned for upcoming new features!

How did I integrate dark mode & light mode?

The logic is quite simple. I have written a blog post with detailed source code.

[Gatsby, TailwindCSS] Integrate dark mode in 10 minutes

How did I configure page creation?

Programmatically creating pages is a key if you combine CMS with Gatsby.

It requires the understanding of the logic between src/templates and gatsby-node.js file but here is what I explained with a hands-on example blog post.

[Storyblok, Gatsby] Programmatically create blog post pages from data

How did I create the syntax highlights?

Dealing with syntax highlights from rich texts is another thing you need to find your own way.

In fact, I was searching around several sources with different packages.

But here is one of the ways it works for me🙌

[Storyblok, Gatsby] Integrate syntax highlight in Storyblok rich text

How did I build a blog posts list?

Good news! This part is actually not that hard👍 Storyblok already has a hands-on blog post dedicated to Gatsby's blog project.

If you want to take a look at as many different use cases, here is my blog post to explain this portfolio project case.

[Storyblok, Gatsby] Create a blog overview page

Troubleshooting: The usage of StaticQuery

It's a Gatsby thing and yet, it's very important to know to avoid falling into a hole.

Technically, I didn't know that the nested file with useStaticQuery in Gatsby causes the error. Here is the solution if you see the same error in your project.

[Gatsby] Solutions to "The result of this StaticQuery could not be fetched."

How was dealing with fetching data from Storyblok?

One of the things we need to pay attention to when we use Headless CMSs is that the way to fetch data.

Is it easy to get access? Do they have good documentation? Is there a place to ask in their community?

Storyblok covers all these 3 criteria nicely.

To find the way to get access to your data, Storyblok has a "Draft json" in which you can take a look at each page. (a.k.a Story in Storyblok)

All you need to do is just click "Draft json" then you'll be redirected to another browser showing you a draft JSON of your story (page).

Plus, Gatsby provides GraphiQL.

What's Draft JSON & GraphiQL?

When you fetch necessary data, those are gonna be your best friends. Both of them show the path to the data we want to fetch.

If you're familiar with JavaScript, object, you can understand the data architecture, because JSON format is exactly the same as JS object. GraphiQL too.

With both, you can see data architecture as well as the path from Storyblok's side and Gatsby's side. You'll never miss the way to fetch your data👍

// data path example
{
  "story": {
    "uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
    "name": "My third post",
    "slug": "my-third-post",
    "full_slug": "posts/my-third-post",
    ...
}

Summary

I developed this blog project in 1 week and a half, but I'm very satisfied with the DX I had 😎 More than anything, it was literally easy to see the component architecture's results visually, and fun!

As a developer coming from a self-taught background, fetching data from API is one of the difficult things when I was studying. It's so different compared with SPA. Markup languages show you the results directly in your browser.

But I got lost to find the data path because the way to get the data path was like walking a maze with an eyeshade with noise-canceling earphones. I felt I'll never get out the way to the exit at that time.

Storyblok solved this problem if I think back to the time when I was struggling.

As I enjoyed my entire process to renew my blog, I'm super excited to hear how's your DX in your projects with Storyblok!