written by Andre Liem
07/20/2017

Improving the deployment of a Nuxt site using Netlify

TL;DR
Learn how easy it is deploy a static site built with Nuxt JS to a CDN using static site deployment tools. (note: I have no affiliation with Netlify)

If you have been following along the previous posts here you'll know that I've been live experimenting with Vue+NuxtJS on this site. First I began with attempting to create a basic system for using VueJS as a static blogging/CMS platform. Not long after that I realized that Nuxt_JS solved all of these issues already. The result is the current site you see here which is ran as a static site serving markdown files via dynamic slug based URLs.

In case you haven't read the previous blog posts here, you can fetch a repository with boilerplate code to get you setup here

One aspect that was missing from my stack was an elegant deployment system. Up until this post I had a very hacky and clunky deployment system.

Here's the general flow for creating a new blog entry.

  1. Setup Dev + New Markdown file
npm run dev
touch /content/posts/5.md
  1. Add entry in the Vuex store /store/index.js
{
  id: 5,
  is_published: true,
  slug: 'netlify-nuxt-is-fast',
  title: 'How to have a blazing fast site with Nuxt + Netlify',
  created_at: '07/20/2017',
  meta: {
    id: 5,
    name: 'How to have a blazing fast site with Nuxt + Netlify',
    content: 'How using a CDN service with Nuxt will outperform most sites out there.',
    keywords: 'vuejs, nuxtjs, netlify, deployment, speed, cdn'
  }
}
  1. Write Blog Post using with markdown in new file 5.md.

  2. Generate distribution folder

npm run generate
  1. Commit + Push this to github
git add -i #add all the new stuff in .dist
git commit -am "new post"
git push origin master
  1. Wait for a git deployment hook to run a git pull on the live server.

The Problem

The only aspect of this that I don't like is step 4 and step 5. As I have mentioned in a post, this is hacky. Why am I committing the dist folder to the repo. In short, because it is the quickest solution I have without attempting to build my own custom deployment uploading script.

Also, there is no real reason why the live server should have to contain anything but the contents in the dist folder. Right now, the structure of the site would be something like this

/var/www/vuejsradar.com/dist/

When it should really just be

/var/www/vuejsradar.com/

And the contents of this folder would just be the latest distribution files in dist.

Or perhaps if you have a fancier system, it could store timestamped versions and use symlinks to easily rollback and launch new deployments.

/var/www/vuejsradar.com/current
/var/www/vuejsradar.com/releases/2017070523550
/var/www/vuejsradar.com/releases/2017070523551
....

This is how envoyer.io for Laravel works.

But Envoyer is meant for Laravel, and what you need for Nuxt is a process which can run npm on a remote server and upload the files to a static server.... we don't need a traditional web application server.

A Solution - Static Deployment Services

There happens to be a lot of relatively new products which make deploying and continuous integration fairly painless. Here are a few I've seen recently:

These services vary a bit, but the idea behind them is the same. Make deployment dead simple. With Netlify in particular, all I do is git push origin master and it takes care of the rest.

I decided to try out Netlify because of it's free tier, support for SSL and custom domains.

I have no affiliation with Netlify or any of these organizations.

Here is an illustration and overview of what you need to do to get going with Netlify.

1. Setup an account

2. Connect your git account

Connect Repository

3. Configure build to generate after pulling

Configure

Remember to enter the distribution folder into the Publish Directory field. Most likely dist for standard Nuxt sites. This is what it looks like for this site.

3

4. Click deploy and watch the build happen

4a. It's deploying

1

4b. npm run generate is running and deploying is completing!

2
(I do have some warnings to take care of here)

5. Site is available on a temporary domain

You'll probably have to wait a while for the first deployment to finish.
Config

6. Configure Domain + DNS

From here you can easily setup your own custom domain using DNS servers provided by Netlify. In addition, SSL is free if you opt to use LetsEncrypt as the certificate solution.

This process should only take a few minutes at most and it's free. Now you can easily push updates without having to ever run npm run generate again.

Speed

On top of speeding up your actual workflow you should notice that your site is running pretty fast.

For example, a very unofficial speed test with pingdom gave my landing page a pretty high score... even with a Page size that should be reduced significantly.

Speed

And Google Insights has a score of 85 / 100

Speed

Keep in mind that Nuxt is responsible for most of these results, it's primarily the response time from the server that will be improved by using a service like Netlify.

Wrapping Up

If you are running a static blog site, or thinking about it, this gives you all the more reason to do so. Not only can you run a site that will be considerably faster than any standard WordPress blog, your actual overhead costs on running it could be very low.