Hugo website CMS

Introduction

In my previous post, I successfully deployed a Hugo static site through Netlify, you can read all about it here. I managed to create the post with ease using Markdown, but, despite the relative simplicity, it got me thinking. Is there some kind of Content Management System (CMS) for static sites? To my surprise, YES there is, but before we get all excited and dive in into this, lets put up some context of what a CMS is, and why it could help you with your own blogs.

What is a Content Management System?

A Content Management System (CMS for short) is a software application that allows users to build and manage a website without having to code it from scratch, one of the big ones in the CMS space is Wordpress, you can easily create a websites and also content for it. The CMS are usually a little to no code solution for people who wants to have a website without dealing with the complexities of web technologies like HTML/CSS, JavaScript, PHP etc.

In this case, I’m looking for a different way of managing my content, don’t get me wrong, I like how I set my blog site up, and writing in Markdown is really cool, but if I can find a way to enhance it, I’m all in for it. The Hugo website has some recommendations for CMS, you can check out in the documentation.

After glancing over the different suggestions, the one that caught my eye was Netlify CMS, it is funny because I am starting to feel like a Netlify fanboy, but hey, they make interesting stuff.

Netlify CMS

Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects.

Sounds fun, for this experiment I’ll be implementing it on an existing Hugo site.
If you want to learn more about Netlify CMS you can check it out here.

Adding the CMS on an existing Hugo site

For the purpose of this post, I’ll use the Hugo quickstart site, you should have something like this.

Now, let’s deploy our site through Netlify, I went with it due to its ease of use and the fact that I deployed my blog through it. You can use Netlify CMS with other hosting solutions, but I’ll be using Netlify since I already know the very basics of it. If you want to know how I did it for my blog, check out this post, or you can always check the documentation here.

With the site deployed, It’s time to start implementing Netlify CMS.

I followed the instructions from the documentation, and I have to say, it was really easy to implement, the documentation was easy to follow, and I had the CMS on production very quickly. Keep in mind that I did host the site on Netlify which made it easier, so you millage may vary depending on the host you choose.

Here is the admin panel working on the website

Create Post page

I also tested the Editorial Workflow which is available on GitHub hosted repositories and it is on beta for GitLab and Bitbucket. This lets me save drafts, review changes and publish when the article is ready.

Now, I will hit publish, this will create a new commit on our master branch, that Netlify will take and deploy.

A great success!!

Closing thoughts

I enjoyed this experiment a lot, a CMS can certainly help you if you need some visual aid while editing content, or you simply don’t want to deal with Markdown directly. Netlify CMS was a surprise for me, because I thought it would be way harder to implement, but thankfully it wasn’t, and I will have on the back of my head if I ever need to make another website with a static site generator and need a CMS. Maybe in the future, I’ll try another CMS, or another static site generator, but for now, I’m really happy with my current setup, Hugo, Markdown, VS Code and Netlify.

Hope to see you around for my next post.