Nuxt Blog: Overview

In this tutorial series I will cover how to create a Vue.js and NuxtJS based blog. As this is a personal blog I won’t be using a CMS (although one can be easily integrated). Instead we will be populating the site with markdown files. To help deliver a more integrated experience it will also be possible to render vue components in the markdown files. When complete the blog will be Static Generated for speed and ease of hosting (although this could be easily changed to be Server Side Rendered should you prefer).

- Goals

The main goal of this tutorial series is to build a functioning blog. The success of which will be measured against these goals:

• Speed. Load the posts as fast as possible
• SEO. Make sure the posts can be indexed by a webcrawler
• Ease of use. Adding a new article needs to be as simple as possible
• Responsive. Give the user a great visual experience regardless of the viewing device
• Flexibility. Vue components can render within the post

- Prerequisites

• VScode. All code and markdown will be written in VScode. I assume you already have this up and running.
• NodeJS and NPM. You will need the latest versions of NodeJS and Node Package Manager (which comes bundles with NodeJS) installed on you system.
• Vue.js. Some basic understating of Vue.js would be helpful but not essential.

Now is a good time to check and update all the library’s and packages we require. I’ve put the version I used in square brackets in the list below. In the command line check you have the following:

• node -v NodeJS v12 or higher. [12.18.0]

• npm -v npm v6 or above [6.13.7] (comes with NodeJS)

• npx -v npx v6 or above [6.13.7] (npm package runner)

- Tutorials

• NuxtJS Project Setup
• Create Posts
• Automate Content

- Technologies Used In This Series