Reworking my portfolio with Nuxt.js and Storyblok

2024-10-10 15:51

My portfolio was in need of an update. And honestly, I've been feeling like setting up a blog for a while now. So why not combine that?

The stack

For the last couple of months I've been mainly working with Vue.js and Wordpress at work. I've had the idea of creating a blog for a while now but never really know how I wanted to do that. I always imagined I'd have to change my hosting subscription to support a dynamic website so I could at least run it with Vue.

Well, a while ago, a colleague at work recommended I'd use Storyblok with Nuxt. I had never heard of Storyblok before, and Nuxt I only knew of by name.

Looking deeper into Storyblok (and continuously typing "storybook" instead of "storyblok") I found it to be quite interesting. And apparently using Nuxt you could generate a static site from Vue. Cool!

Storyblok

Storyblok is a Headless CMS(Content Management System) with a visual editor. Which makes it easy to see your content reflected directly on the page you're editing.

Nuxt

Nuxt is an open source framework based on Vue. Basically, Nuxt has some nifty out-of-the-box features which gives it an edge over plain Vue. In my case I've used Nuxt specifically because it offers Static Site Generation (SSG). SSG does what the name says, it generated a static site from your Vue project. This is particularly useful in my case because I don't want to pay extra for hosting dynamic sites. This way, you could even use Github Pages to host!

I'm a little stubborn

I didn't quite know what Nuxt was all about, and I didn't really feel like learning two things at the same time (Storyblok AND Nuxt) so I tried working with just Vue and Storyblok first.

What I quickly learned is that there aren't very many people using just Vue with Storyblok. There is some documentation which did get me somewhere but I got stuck and annoyed pretty quickly. This might have been just me though, when I'm excited about a project I want to get it done quickly, so instead of properly diving into the docs, I skimmed over it and tried to depend on AI and Youtube videos.

Doing it properly

After a while of messing around with Vue and Storyblok, I decided to take a step back and restart my project. This time with Nuxt.