Rewriting my website using NuxtJS

A few days ago I published the latest version of my website, completely redone using NuxtJS.

You're probably saying to yourself, "Why Chris, why rewrite your website AGAIN?", and I hear you dear reader, I truly do, but please keep on reading as I'll explain my reasoning as best I can.

This article will explore the following topics:

What is NuxtJS?
Why use Nuxt in this scenario?
How I integrated my blog directly to my website

What is NuxtJS?

To quote the official doc,

Its main scope is UI rendering while abstracting away the client/server distribution.
Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.
Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

In other words, Nuxt uses:

Vue 2
Vue Router
Vuex
Vue Server Renderer
vue-meta
webpack

And some other tools in order to facilitate the development of your Vue application.

All of this for a total of only 57 kb min+gzip.

Why use NuxtJS for my website?

Oh boy, where to begin, it all started with a project at work that made me discover the power of this framework, especially the following points:

Automatic route generation
Server-side rendering
Static file serving
The ease of pre-processor use (Sass namely)
Useful commands such as nuxt generate

And many, many other quality of life improvements.

But a very prevalent reason was my wish to integrate my blog directly to my project's repository, by serving my markdown articles via automatically generated routes (just like this one!).

How I integrated my blog directly to my website

A few weeks ago I still had a blog generated by Jekyll and served on blog.christopherkade.com, which meant a less hands-on approach to the design and utilization of the blog itself.
From there came the idea of having my blog directly here, with articles in the same repository as my website and served directly using the markdown format.

Step 1: Set up the articles

My articles can be found in the /static/articles/*.md folder, and will be served directly from there.

Step 2: Automatically generate routes based on the articles

Check out the current URL, it should be christopherkade.com/blog/website-nuxt, this route is automatically generated based on the article's file name. Here's how I did it:

1// nuxt.config.js
2const glob = require('glob')
3
4let files = []
5
6glob('static/articles/*.md', function(err, output) {
7  files = output
8})
9
10function getSlugs(post, _) {
11  let slug = post.substr(0, post.lastIndexOf('.'))
12  return `/blog/${slug}`
13}
14
15module.exports = {
16    ...,
17    generate: {
18        routes: function() {
19            return files.map(getSlugs)
20        }
21  },
22}
23

Step 3: Handle the markdown format

To do so, Nuxt has a very practical module called markdownit.

To use it, start by installing it like so:

npm install @nuxtjs/markdownit

Then add it to Nuxt's configuration file as a module:

1module.exports = {
2    ...,
3    modules: [
4        ['@nuxtjs/markdownit', { linkify: true }]
5    ],
6}
7

Step 4: Create the pages that will display the articles

Nuxt generates automatically your routes based on the files in the pages folder.

Knowing that, start by creating a blog folder under pages that will contain the following:

+-- blog
|   +-- _slug
|       +-- index.vue // The page that displays a single article selected
|   +-- index.vue     // The page that lists all my articles

The base index.vue will display our list of articles that can be found here. Whereas the index.vue's route inside the _slug folder will be given the name of the article selected (as generated in part 2) and will display its content like so:

1<!-- pages/blog/_slug/index.vue -->
2<template>
3  <div :key="$route.params.slug" class="articleSlug">
4    <div class="container">
5      <div v-html="file" class="content"></div>
6    </div>
7  </div>
8</template>
9
10<script>
11  export default {
12    computed: {
13      file() {
14        const fileContent = require(`~/static/articles/${this.$route.params.slug}.md`);
15        return fileContent;
16      },
17    },
18  };
19</script>
20

And that should be enough ! Navigate to /blog/article-name and your .md document should be displayed proudly on your page ! Easy, wasn't it?

I hope this article was useful to some of you,

Until next time,
Have a good one :-)
@christo_kade