Hello Hugo and Netlify CMS
Sometimes you’re just wanting change. I decided to go through the process to move away from Ghost to try something new, and I think I found something I loved.
Why Move?
Ghost worked well enough, actually better than that. Ghost is a great platform, and is miles ahead of Wordpress for simple blog content management. What I wanted though was a system that I could manage the content either through Git, a favorite tool, or a GUI.
Recently, Ghost has added some ability to do this, though I haven’t tested it yet. Instead, I decided to give a newer tool on the block a go, Netlify CMS.
Netlify CMS is a very configurable administration tool that allows you to write and edit any number of content on a static site based on the configuration you give it. They provide some basic examples on their site, but I wanted a touch more control so I started from a basic Hugo install.
Installing Netlify CMS
All you have to do to install Netlify CMS (if you’re using it on Netlify, which I opted to do), is add a couple static files to your static directory under /admin
(or really, any directory you want the admin console at). One of them is a basic html page to load in the required Javascript for the single page app, the other is the configuration for the SPA.
The configuration is also how you inform Netlify CMS what types of content you wish to manage and how to manage them. Netlify CMS calls different form fields “widgets”, but I found I could quickly setup all of my Hugo frontmatter with just a couple lines.
It also supports media uploads if you configure it properly, which is just setting the directories that it should deploy into.
Netlify CMS, when connected via Netlify, uses Git Gateway to push your finished code.
Results
I found it took me a couple hours to really get everything working and writing this blog post about the experience. I was able to move all of my existing ghost content and make sure that my existing page links still worked after migration.
I was also able to hook up some other features I didn’t have before:
- There is a shiny new contact form at https://davidops.com/contact
- I added a small little intro panel to the main blog page.
- The About page finally has a photo of me again.
Limitations
There are a couple things I have lost, but some of it I may be able to recover with time. One thing that is kinda a bummer is the editing experience leaves something to be desired. It feels like a very basic markdown to HTML editor, it would be nice if we had the ability to pull in base styles so I could see in the preview exactly what the final page would look like.
Also, when it comes to page layout, I had to make some changes to support the new theme. I think there are some more changes I want to make, but they will require some extra work on extending the theme I’m using.
Conclusion
This is awesome! I was able to accomplish my goal in a very short amount of time and the product overall seems to look fantastic. It’s very obvious though that Netlify CMS is designed with Netlify as a first class citizen, and there are many things you get easily by deciding to deploy NetlifyCMS onto the Netlify platform.
Thanks for taking the time to read about my migration. If you want you can check out Netlify CMS here: https://www.netlifycms.org/ and Hugo here: https://gohugo.io/ . The theme I am using is a customized copy of hello friend
, you can find the original here: https://github.com/panr/hugo-theme-hello-friend