Headless CMS for small websites with Nuxt Content

Problem

Nowadays small companies struggle with the necessity of having a website that is easy to maintain, doesn't cost a fortune and is easily editable. Considering the above requirements, the first solution that comes to everyone's mind is Wordpress. It's one of the most popular content management systems, which is free. Secondly with, in many cases, paid themes and extensions, users can create a website without coding knowledge just by dragging and dropping blocks around. 

There are also many companies specializing in Wordpress development, since it's been around for almost a decade now, so there is no problem with creating a tailored solution if the user does not have time or skills.

However I do find Wordpress not as user-friendly as most would think and not solving all the challenges in modern web development and UX. Its extremely heavy codebase and overwhelming amount of plugins and settings, makes my common sense tingling. Another challenge is the security issue - Wordpress is exposed to a large number of hacker attacks, since it's so popular, and if you're not careful with software updates you may end up with a server crash or an infected website.

So how can we deal with that?

Solution

For a couple years now I've been developing applications in Vue. It's a lightweight framework that doesn't feel that heavy as Angular, and (for me) is more approachable than React where everything is a function (personally I don't like that).

There is a framework that works on top of Vue called Nuxt, that gives us a tool of SSR (Server-Side Rendering), and dev-friendly solutions with like routing. Believe me, once your theme is poorly configured or you install too many plugins on your Wordpress website it may be even too heavy to load on the newest devices with fiber-optic internet..

At this point you are probably still weighing pros and cons of both platforms. I bet that simple content management is on your requirements list.
Great news! What also comes with Nuxt is a Nuxt Content - a brilliant module that acts like a headless CMS. Basically it fetches files in yaml, md, json (you name it) through a MongoDB like api, and creates a 'fake' backend which would usually take time (and money!) to make.

Having that in mind I came up with an idea. What if I create an application:

• that is a static Nuxt application

• where end-user (client) will make their changes in easy to learn md/yaml files

• that is hosted on a basic server

• where repository is kept on Github

• where push to repository updates files on FTP server

I believe that it could be a perfect solution for a small company (e.g. restaurant where only editable elements could be menu or contact), and it would require only one (frontend) developer to create one.

How To

First of all I'd recommend creating new repository on Github. It will be so much easier to clone existing repository, rather than creating a local one and connecting to github.
All you've got to do is login to your github (or create a new account), navigate to your repositories, and click a "new" button like so:

and create new repository:

Since there is no .gitignore template for Vue projects, let's skip that step.

After that we can simply clone repository and copy our project or set new remote.

PROJECT CONFIGURATION

First of all we have to generate a new Nuxt project:

>> yarn create nuxt-app headless-cms

with options presented below:

Now let's break it down:

• Project name - it will be prefilled

• Programming language - personally I only code in static typed languages such as Typescript, however application is meant to be super small and we have no backend integration, therefore I do not anticipate any complicated nor useful interfaces

• Package manager - your choice. I do however choose Yarn for its deterministic nature

• UI Framework - for quite some time I've had ambivalent experience with Tailwind. However I can't deny it's main purpose (dev speed) so let's stick with it.

• Nuxt.js modules - Content obviously.

• Linting tools - One could argue that for such a small project linters would be simply annoying, but it's engineering so let's keep it for good measure

• Testing framework - Since our app is readonly i find unit tests useless here. And I'm pretty sure that client won't have budget for good quality e2e tests :)

• Rendering mode, deployment target - it's a static website, no server.

• Deployment tools - we have an option to include github actions here, but we will configure that manually

• Continuous Integration - none.

• VCS - Git obviously.

After that our app will be installed and we can simply start our application with

>> yarn dev

Now let's configure our content.

CONFIGURE CONTENT FETCHING

First of all let's get rid of Tutorial component

components/Tutorial.vue

And then we can delete its declaration in starting page. 

Please do however insert an empty div for example, otherwise you will end up with linter error ​​"The template requires child element ".

pages/index.html

<template>

 <div></div>

</template>

<script>

export default {

 name: 'IndexPage',

}

</script>

Thanks to our previous configuration we have a content folder and sample file which we can test like so:

<template>

 <div>

<nuxt-content :document="hello"></nuxt-content>

 </div>

</template>

<script>

export default {

 name: 'IndexPage',

async asyncData({ $content, params, error }) {

   const hello = await $content('hello')

     .fetch()

     .catch(() => {

error({ statusCode: 404 })

     })

   return { hello }

 },

}

</script>

All we had to do is add

After that you should end up with something like this:

That means that our content module is working indeed. Please make some changes in hello.md file just to make sure that your content is editable.

After that commit and push your changes to remote.

CONFIGURE GITHUB ACTIONS

Now here comes the magic part.

First of all we have to use FTP-Deploy-Action by SamKirkland https://github.com/SamKirkland/FTP-Deploy-Action

It's very easy to configure. Note that v 4.1.0 had a bug with files synchronization, therefore you can use version 4.0.0. or 4.3.0 (I personally use v 4.0.0)

now all we have to do is create file main.yml in direction /.github/workflows/main.yml

and place following code which I will break down:

on: push

name: 🚀 Deploy website on push

jobs:

 web-deploy:

   name: 🎉 Deploy

   runs-on: ubuntu-latest

   steps:

- name: 🚚 Get latest code

       uses: actions/checkout@v2

- name: Use Node.js 12

       uses: actions/setup-node@v2-beta

       with:

         node-version: '12'

     - name: 🔨 Build Project

       run: |

         yarn install

         yarn generate

- name: 📂 Sync files

       uses: SamKirkland/FTP-Deploy-Action@4.0.0

        with:
         server: server1234.123demo.com

         username: test@server1234.123demo.com

         password: he4dle$$123

         server-dir: /headless-cms/

on - it says which git command triggers our action

name - description which will be shown in our action

jobs - its a list of all the things happening during the deploy process

runs-on - machine that do all the jobs mentioned above. Ubuntu is chosen by default.

steps:

1. It gets the code from master/main

2. Setups machine with Node.

3. Builds project with yarn install and yarn generate  (important)

4. Sync our files with FTP Deploy Action (here you can also configure its version). Here you also configure your FTP access.

And that's basically all there is to it.

Now we commit this file and push to the remote.

Right after that we should see an action happening.

It's a success!

Now you can go to the url connected with your FTP server.

EDITING OUR CONTENT

Github comes with its own IDE so its very simple to edit content right like so.

First we click on the file we want to edit and then we click on the pencil icon

And then we make our desired changes.

After that all you have to do is commit this change, and action should happen immediately.

Conclusion

Nuxt content with github FTP action should feel like a right choice. There is however a downside where client do have to be trained with markdown and yaml editing.
I do find that much easier then Wordpress usage though.

One word of advice - make sure that client is willing to learn yaml and markdown. Mistakes can happen but code won't be deployed with any error (thanks to our Github action). 

From my experience - it takes one to two short training sessions to get it right.

Subscribe to Sunscrapers Newsletter to find more Vue articles. There is more to come from me!