Generate and deploy the blog as a full static Nuxt site

Congrats if you reach this point because that means you should have now a fully running blog with articles, authors and topics, as well as search functionality thanks to Storyblok. All organized in UI components with TailwindCSS and basic SEO and social media sharing covered.

Now it's the time to show it to the world!

# Generating a Nuxt.js full static site

Since version 2.14, you're able to generate full static sites with Nuxt.js. That was indeed one of the releases that I've been waiting for so badly.

If you go back to the first chapter where we set up a full static Nuxt.js site, remember that we prepared the Nuxt.js project already to be full static.

You can double check it by looking at the nuxt.config.js file:

export default async () => {
  const routes = await fetchSitemapRoutes()

  return {
    mode: 'universal',
    target: 'static',
    // ...
  }
}

The target: static part is the one in charge of making that happen.

Here's the cool part, to generate the full static project you just need to run npm run generate and Nuxt will create the HTML files for everything:

As you can see, each route we created has its own folder with its index.html file, all pre-rendered.

You can also run npm run start after being generated to see that it's working correctly.

But in order to deploy it, in the way I'm going to show you, you don't need to run these commands locally.

Hang on a second and continue reading 😉.

# Deploying the full static website

By nature, a static site, also known as a JAM Stack site, it's fast and secure because of the fact that it doesn't render on the server.

Just like ready-cooked meals, a static site is pre-rendered and there is no rendering nor processing effort on the server side.

At the end, it's all HTML, CSS and JavaScript, and to run that you just need a basic static server since all the rest happens on the client side.

Normally, a static site is served pre-rendered and from that point becomes an SPA when it reaches the browser. It'd perform API calls or whatever is needed to get the data for a page.

But when we specify that the website is a full-static site, it means that literally all API calls are performed only once at compilation.

In order to host and deploy the site, we have several options in the market and it might be hard to choose one.

I'm going to suggest to you my top 4, knowing that my preferences are:

• As zero-config as possible
• Good pricing with a free-tier option
• Friendly for frontend devs

# Hosting options

It comes without saying that probably Netlify is the top here, and the one we'll use. It's focused on static sites. It's performant with a generous free-tier and with many features covering most of the cases for static sites and SPA's.

I love using Surge for demos, because to deploy it you just need to literally run one command: surge. It's for frontend code as well and quite easy to use.

In the land of cloud servers that are not only-frontend, my favorite is by no doubt Vercel. It's zero-config, focused on DX and performance and very easy to use for one that is not used to deal with servers. It's probably one of the very few that has a free tier as well.

The last I'd suggest is Digital Ocean. You'll choose this one when you want to have more control on your server. The prices are very convenient and it's indeed a quality product. Alba Silvente has a nice guide on how to deploy a Nuxt static site.

# Deploying the site to Netlify

Netlify is where VueDose is hosted, and I'm completely happy and satisfied by it.

I have no knowledge about DevOps or system administration, so configuring servers and stuff is always daunting for me.

But Netlify makes it very easy. As easy as pushing some buttons, so let's get started.

Assuming your project is hosted on Gihub or Gitlab, you can automatically connect it to Netlify.

For that, log into Netlify and you'll see this button to create a project from Git directly:

You'll go through a step-by-step process where you'll connect to Github, Gitlab or Bitbucket and choose your repository.

At some point, you'll reach a step where you have to configure the build commands. Here's where you need to set npm run generate and the dist folder to be published:

You can also set the branch where you want to be "listened" instead of the master branch by default, so it can fit your personal workflow.

And... that's basically it! Let it run for a minute or two and you'll see...

An error!!!??? WTF?

Wait, I just forgot something important: we haven't set the environment variables.

We have them locally in the .env file, but that's not published to the repository, and it shouldn't for security reasons.

Instead, we need to do it on Netlify itself. Go to the Site settings > Build and deploy > Environment page and set the environment variables as you need:

After fixing that, let's trigger a new deploy. Go to the deploy page and you'll find this button to do it:

This time, all should work properly and your site will be live! Yay \o/

You'll see the default url that Netlify gives you on the overview page:

What I love from Netlify is that you can have your custom domain, HTTPS, redirects and much more for free! Check out their docs to know-how!

# Wrapping Up

Yes, this is the end.

It was an incredible journey to guide you through how to create, step-by-step, a full-static blog with Nuxt.js and Storyblok following the same process that we used for VueDose.

You've learnt how to create the project from scratch and how to define components based on a design system, how to build articles overview and detail pages.

We dug deep into the Storyblok and learn how to transform our/your design into the components, how to organize your content and create queries to get it. At the end we learnt how to generate and deploy it statically into the world wide web.

I feel very proud to say this was done thanks to the help and collaboration of Storyblok, a beloved sponsor of ours 💚.

If you have any questions, feel free to reach VueDose or Storyblok on Twitter and we'll answer everything for you!

Stay awesome.