Creating a Portfolio with Nuxt.js and Storyblok

If you’ve been checking off the topics from the to-do list of applications from Chapter 1, you may have noticed that we’ve reached the final chapter. To celebrate our achievements, we’ll create a portfolio where we can showcase our completed projects from the past, with the flexibility to add future projects as well. We’ll also look into deploying the portfolio to an online space via an automated process.

We’ll build the portfolio using Nuxt (https://nuxt.com/), which will greatly speed up our development process. The content will be stored in a Storyblok (https://www.storyblok.com/) space. For publication, we’ll make use of Netlify (https://www.netlify.com/), which is a very developer-friendly platform for hosting modern web apps.

In this chapter, we’ll cover the following topics:

• Refresher on using Nuxt and using Nuxt as a static site renderer
• Learning to apply a headless...

Technical requirements

Like in Chapter 8, we’ll use Nuxt (https://nuxt.com/) as the framework to build our portfolio website. For our styling and interactions, we’ll use a UI library that is part of the Nuxt ecosystem: Nuxt UI (https://ui.nuxt.com/). We need to run our local development in SSL mode, for which we will use mkcert (https://github.com/FiloSottile/mkcert) to generate a locally trusted development certificate.

Our content will be managed and stored using Storyblok (https://www.storyblok.com/), which offers an excellent headless Content Management System (CMS) solution with a free tier we can use. A headless CMS is a system that focuses primarily on the content and aims to separate the content from the presentation. In our case, our presentation is handled by Nuxt, but it could be any application that we grant access to the content. This separation of concerns is a concept that helps in building scalable applications. Once we have built our portfolio, we...

Setting up Storyblok

Registering on the Storyblok website is pretty self-explanatory. After the initial registration, you will end up in a demo space. We will skip the demo (you can always revisit this as part of Spaces) and choose to Create a new space, where we will choose the appropriate name and server location:

Figure 10.1 – Creating a new Storyblok space for our portfolio

After creation, you may encounter a modal referring to a trial period. You can select the free community plan directly or after the 14-day trial period.

The welcome screen will look like this:

Figure 10.2 – The Storyblok dashboard

For the sake of our portfolio, we can close and ignore the Get Started section. We’ll mainly focus on the Settings, Content, Block Library, and Assets sections.

If we open the Content section, we’ll see an entry titled Home. Let’s open it and take a look:

...

Working with multiple content types

To define the types and content to use on our pages, we can navigate to Block library in Storyblok. By default, you will see four existing blocks: feature, grid, page, and teaser. Between the blocks, there are two different types. page is of the Content type, while the rest are of the Nestable type. The key difference is that Content type is a top-level type of content. You can consider it a sort of page with a unique URL. You use this to hold different compositions of the lower level of content type – that is, Nestable. These are the building blocks of the pages: you can add them to a page to build the content you like.

There’s also Universal type, which can act as either of the aforementioned types. We won’t use it in our example, though.

Let’s create a new block for our portfolio purposes by clicking on the + New Block button. For the technical name, we’ll have to fill in how the content will be identified...

Modifying the content model

Our headless CMS is now able to present basic layouts and contents to our portfolio. It’s still very limited this way, so let’s find out how we can work with the content model so that it supports new features.

Updating existing types

Let’s assume that our Teaser block is a Heading block. I would recommend trying to keep blocks as static as possible, but let’s see what we need to do to change a name. If we navigate to the Block library in CMS and hover over the Teaser block, we can enter edit mode with the context menu. In the Config tab, we have the option to update the name:

Figure 10.13 – Updating an existing block’s name

The next step is simply renaming the Teaser.vue component to Heading.vue in the ./storyblok folder. To keep stability in mind, I would strongly recommend planning ahead with content modeling instead of relying on rewrites of existing content types.

A rule...

Generating a standalone website

We now have a functional portfolio. This type of website has very static content: it doesn’t change depending on the visitor and will probably not receive daily updates in terms of code! This means that we can optimize the output of what we will deploy to the public.

The portfolio we’ve created is a perfect use case for static site generation. Normally, Nuxt would run as an active process on a server, where it can respond directly to requests and fetch data in real time. A good example is the Quiz server we built in Chapter 8. But since we don’t need real-time data when publishing, we can leverage another capability of Nuxt. When generating a static site, Nuxt runs as an application initially and indexes all of the internal links. For every internal link, it will retrieve the data from the server once and then write the output to a static collection of files.

Let’s see this in action! The command is already part of our...

Publishing the static site

Any web host would be capable of serving these static files now. That’s one of the benefits of a static-generated website: the amount of freedom when it comes to hosting them. We do have some requirements down the line, however, so we’re choosing Netlify (https://app.netlify.com/) for our use case. If you register, you should be able to enter the free tier without any cost. While signing up, pick the categories that suit you best and pick a name for your team.

On the next screen, we’ll go with the Netlify Drop way of deploying:

Figure 10.15 – Choosing your first method of deployment

Choosing Try Netlify Drop redirects you to a drag-and-drop space where you can simply drag the output files from our project’s ./output/public folder. Make sure you drop the public folder and not the separate contents!

Once you’ve finished uploading everything, you will enter the dashboard for the first...

You made it!

In this chapter, we’ve been working with different platforms and systems to connect them into a single application that renders a static website. One of the key takeaways is that we can combine the strengths of many specialized solutions to build a robust product we can deploy. I highly recommend checking out more resources on both Storyblok and Netlify since they work well with this type of web stack.

The combination of the live preview of Storyblok and the developer experience of using Nuxt as a framework makes these sorts of projects very easy to get started with and build something we can use! We’ve seen that Nuxt doesn’t always have to run as a server – it can be used to generate the data from the server once and store the output. This approach is more sustainable and offers better performance than real-time data fetching.

With the way we’ve set up Storyblok and integrated it with Nuxt, it’s a very accessible way for...