Creating a Static Blog using Nuxt.js and Markdown
A guide on how to create a simple static blog without the need for a CMS using Nuxt.js and Markdown.
Published on Jun 4, 2020
![](https://d33wubrfki0l68.cloudfront.net/9b3e74d94b90c1191fa5e3ae4f034b61b8260a98/81ac5/_nuxt/images/creating-a-static-blog-using-nuxtjs-and-markdown-320.9263ba8.jpg)
A few months ago making a simple static blog using Nuxt was very stressful, you would needed to install a bunch of packages and write monkey patch solutions to make it work and in the end it wasn’t even that good, but now everything has changed, with the release of the content package, an official package from the Nuxt team, creating a blog is really nice and easy.
In this article I’ll show you how you can create your very own blog using Nuxt.js and Markdown with just a few steps.
Setup
First things first, we need to create a new Nuxt app:
yarn create nuxt-app my-project
A prompt will appear, asking what do you want to use in the new app.
Choose as follows:
- Javascript.
- Yarn.
- Up to you.
- None.
- PWA and DotEnv.
- Eslint.
- None.
- Universal.
- None.
Great, now that we have a project we can start working on our blog.
Required Packages
In order to use the magical content
package we must install it first, let’s go ahead and do that now:
yarn add @nuxt/content
And to finish it off, register the new package as a module in the configuration file:
// nuxt.config.js
export default {
modules: [
'@nuxt/content',
// other modules...
]
}
Fetching Content
In order to display the content we must first fetch the data right?! Create a new folder under the pages
directory called blog
. In that folder create a new file named _slug.vue
, this will take care of our content.
Let’s edit the slug page so it retrieves our posts:
<!-- pages/blog/_slug.vue -->
<template>
<nuxt-content :document="article" />
</template>
<script>
export default {
async asyncData({ $content, params }) {
const article = await $content(params.slug).fetch()
return {
article
}
}
}
</script>
Writing Content
By default the package will fetch Markdown files found in the content/
directory, make sure to create it at the root of your project.
assets/
components/
content/
...
Create a new file in that directory. I’ll just use random-post.md
for the sake of the tutorial. Front Matter (metadata) is also included, just wrap the content around triple-dashed lines ---
.
---
title: Random Post
---
# Random Post
Nothing to see here actually...
Displaying Content
Since we have included a <nuxt-content>
tag in our template section earlier (on _slug.vue
) you should be able to see the post now. Browse to /blog/random-post
and check the page contents.
Final Words
There are a lot of things you can do with this package, advanced configuration, hooks and etc. Feel free to check the documentation here.
Thanks for reading, cya in the next post!