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
- Vue Server Renderer
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:
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:
Step 4: Create the pages that will display the articles
Nuxt generates automatically your routes based on the files in the
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
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:
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 :-)