Vue Static Site Generator with Nuxt and Mardown. Let's Create a Serverless Blog. Part 5


This website you are visiting have been created using Nuxt and Markdown and is serving SEO-friendly blog posts without the need of a server. Want to learn how to do it? Keep reading...


Published date: March 28 2020

In Part 1 of this article we talked about what are static site generators and what are teh advantages of using them when working with Javascrip frameworks, we learned the basics of Nuxt, created our nuxt project and added a navbar and a footer component, learned how to use sass, and started to create our serverless blog using Markdown and FrontMatter.

In Part 2 we saw how to add internationalization to our static site —including the blog— using "Nuxt-i18n".

In Part 3 I show you how to create a home page like the one in this site.

In Part 4 we finished our blog pages, adding some final touches like search and filter functionality and pagination.

In this final part, I'm going to build the production files and deploy the site to Netlify.

Index

Complete Project Code: You can get the source code on GitHub

Prerequisite: HTML, CSS, JavaScript, Vue.js, and Markdown.

Creating the Production Files

We need to build our application for production. When creating static sites with only static routes, we run npm run generate and that's all. This command will create a dist folder ready to be deployed.

But as we have dynamic routes for our posts we need to do a little configuration to define our dynamic routes. We need one route for each of our posts, and we have to specify them in the nuxt.config.json file, in the generate property. Something like:

generate: {
  routes: [
  'blog/post1',
  'blog/post2',
  ...
]

You can add the routes manually if you have few posts, but I prefer to do it programmatically.

This is how I finally did it:

In nuxt.config.json I created a method to get the name of all the .md files in the content/blog folder. Then, I will create the routes using this filename, which is the same that the blog slug.

The code is pretty straight forward. I'm using path and fs to access the directory where the .md files are and get the filename, which I'm using to create the routes, both for English and Spanish.

const path = require('path');
const fs = require('fs')

const getDynamicRoutes = function() { const postsDirEN = path.join(__dirname, ‘/content/blog/EN’); const postsFilesEN = fs.readdirSync(postsDirEN);

const postsDirES = path.join(__dirname, ‘/content/blog/ES’) const postsFilesES = fs.readdirSync(postsDirES)

// map the contentFiles to get an array of objects instead of an array od string, // which is provided by fs.readdirSync(contentDir) const routesEN = postsFilesEN.map(filename => { return { route: /blog/${path.basename(filename, '.md')}, //payload: fs.readFileSync(path.join(postsDir, filename)) } });

const routesES = postsFilesES.map(filename => { return { route: es/blog/${path.basename(filename, '.md')}, } });

return routesEN.concat(routesES);

}

Then, we call the method in the generate property to set the routes

  generate: {
    routes: getDynamicRoutes()
  },

An this is it. Run nmp run generate and Nuxt will generate all the static pages for your site.

generate dynamic routes nuxt markdown

Bow we are ready to deploy our site.

Deploying to Netlify

I'm going to host my site in Netlifly, basically for two reasons: continuos deployment is a breeze and it is free.

You have the option to deploy your site by uploading your dist folder, but I prefer to automate deployment so that every time I push to master the code gets deployed.

To use continuos integration there are two thing you need to have:

  • a Netlyfly account
  • an account in a remote repository site like GitLab or GitHub.

Let's create a site in Netlify by clicking in New site from Git.

generate static site markdown

Connect it to your remote git repository.

markdown nuxt netlify

Configure the deploy settings.

deploy to netlify

Click on Deploy site and wait until Netlify does all the magic for you.

From now on, every time you push to "master", your site will be deployed. Keep in mind that you don’t need to run the npm run generate command anymore. Netlifly will run it for you when taking care of the deployment.

Once you are done, you will see a screen similar to the one below. As we haven't set a custom domain, we'll get one from Netlify. You can click on the link and navigate to your site

static site markdown nuxt

You will probably have your own domain. Follow the instructions that Netlify provides to do it. It's really easy.

If you want to add an email server, you'll need to add the MX DNS with the info from your provider. I use Zoho, which has a free plan that is enough for me.

On your Netlify site, go to your domain and on DNS records, click Add new record and fill the settings. In "value" enter the name of your email server (ex: mx.zoho.eu for Zoho)

netlify email server

And this it it. Thanks for reading muy post and hope it helped you to create your static site.