Git based Headless CMS

Traditionally when you create a blog site you would go for CMS platforms like WordPress, they are still widely used and offer many benefits, such as an easy-to-use interface, a vast array of plugins and themes, and a large community of users and developers.

However, Git-based CMS systems provide some advantages over traditional CMS platforms, such as better version control, easier collaboration among developers, and the ability to work offline. Additionally, Git-based CMS systems can be used to build more flexible, customizable and scalable websites that can easily integrate with other tools and services, I think it is a really good option for developers to have full control over website.

Don't get intimidated by the terms, it is called Git-based CMS because the content and files are stored in a Git repository, and headless because the posts are not stored separately from presentation layer, which allows for version control and does not require creating & hosting a database.

Interested? here are some steps that I took to build this site, but first note that there are some background required to continue.

Prerequisites

To follow this tutorial, you will need the following tools:

• Node.js
• Vue
• Git
• A text editor (such as Visual Studio Code or Sublime Text)

Nuxt.js is a framework built on top of Vue.js that allows for easy creation of server-side rendered (SSR) applications. Vue.js is a lightweight front-end framework that makes it easy to create reusable components.

In this tutorial, we will be using Nuxt.js and Vue.js to create a Git-based CMS with markdown. We will also cover how to deploy the website using Netlify.

Setting up the project

To start, create a new Nuxt.js project by running the following command:

npx create-nuxt-app my-cms

This will create a new Nuxt.js project in the my-cms directory.

Next, install the markdown-it package by running the following command:

npm install markdown-it

This package will allow us to parse markdown files and convert them into HTML.

Alternatively you can use an already created blog theme like I did here

npx nuxi@latest init -t themes/alpine

Creating the content

Create a new directory called content in the root of the project. Inside this directory, create a new markdown file called index.md. This will be the homepage of the website.

Add some content to the index.md file:

# Welcome to my website!

This is the homepage of my website. Check out the [about page](./about) to learn more about me.

Create a new markdown file called about.md inside the content directory:

markdownCopy code
# About Me

I am a web developer living in San Francisco. I enjoy hiking, reading, and spending time with my family.

Creating the pages

Create a new directory called pages in the root of the project. Inside this directory, create a new file called index.vue. This will be the layout for the website.

Add the following code to the index.vue file:

vueCopy code
<template>
  <div>
    <nav>
      <ul>
        <li><nuxt-link to="/">Home</nuxt-link></li>
        <li><nuxt-link to="/about">About</nuxt-link></li>
      </ul>
    </nav>
    <nuxt />
  </div>
</template>

<script>
export default {
  name: 'Layout'
}
</script>

This will create a navigation bar with links to the homepage and about page.

Create a new file called about.vue inside the pages directory:

<template>
  <div>
    <h1>About Me</h1>
    <div v-html="about"></div>
  </div>
</template>

<script>
import axios from 'axios'
import MarkdownIt from 'markdown-it'

export default {
  name: 'About',
  async asyncData () {
    const response = await axios.get('/content/about.md')
    const md = new MarkdownIt()
    const about = md.render(response.data)
    return { about }
  }
}
</script>

This will create a page that displays the content from the about.md file.

Deploying

There are many options for hosting your blog, you can go with a cloud solution like AWS or GCP directly but people usually use faster deployment solutions like netlify or vercel, for me I used netlify.

To deploy the website to Netlify, create a new Git repository and push the code to it:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-cms

Create an account on netlify and follow their docs to deploy the website.

Thanks for reading ❤️