Blogging with Hugo & Netlify & Forestry.io

About 10 months ago I switched from Ghost blog to Hexo. I decided Hexo because it would be generating static site, which is great for SEO. It can be hosted on Github pages, which saves some £££. Then there is the most important reason: so I don't have to spend energy and time on maintaining the blog server and constantly migrating to newer Ghost versions.

So why am I considering to change to another blog tool less than a year later? The most important reason is the complexity involved just to get something published. I found myself not wanting to write any blogs not because I don't have anything I want to write, but the publish process is so complex. Before when I was using Ghost, I could go on any computer type in an URL and start blogging. With Hexo, I need to install node, hexo and etc if I am not using my main computer. Then there's the manual work such as tagging blogs, adding in images and sorting out URL path names. If that is not bad enough, recently I have been getting all sorts of errors when I try to spin up Hexo locally, then after I updated the version it now no longer serves the local development site. So I decided enough is enough and researched around for a better way.

My initial thought was maybe server Ghost blog locally then convert it into static site using buster. This would solve some of the problem, but I'm basically back to square one minus the hosting and server mantainance problem. Then I read about a CMS tool called forestry.io which sounded very interesting. It will essentially act as the CMS of the blog site, which means no more hexo new --draft "yet-another-blog-post"! I could do it with a simple click on any computer browser like I used to be able to with Ghost (I've also checked it works on mobile too). By no means is this a perfect solution, because the few pages which I had visitors will be lost after the site migration. And then there's the migration itself. But given this is the best solution I can find, here goes nothing...

Set up

Some prerequisites before we get started:

  • A computer to set everything up initially e.g. Hugo, source code repo
  • A Github/Bitbucket/Gitlab account to keep the source code of the site
  • Netlify, Github pages or any alternatives supported by forestry.io
  • And finally forestry.io

There are different ways of setting this up, by no means this is the best way. But I think this is the easiest way to follow.

Create Repository

Create a repo on any source code hosting site of your choice. I'm using Bitbucket because it offers private repo hosting for free.

Then git clone the repo into a directory on your computer.

Installing Hugo

The installation is pretty straight forward. Since I'm using a Mac, so the installation commands will be for Mac OS. If you are using Windows or Linux, please refer to the offical guide.

brew install hugo

cd ~/yourFolder

hugo new site blog

This will create a blog folder within the repo folder. It should look something like this right now.

yourFolder
    |-- blog
        |-- config.toml
        |-- archetypes
        |-- content
        |-- data
        |-- layouts
        |-- static

The next thing to do is to move everything out of the blog to the level above. It should look something like this after you are done:

yourFolder
    |-- config.toml
    |-- archetypes
    |-- content
    |-- data
    |-- layouts
    |-- static

Then follow instructions on installing theme, and update the config. There should be plenty of documentation in the Hugo offical guide.

Once everything is done push it to the master branch.

Setting up hosting

I am personally using Netlify, because it is awesome and easy to set up. But you will get everything you need using Github pages too.

This step is as easy as:

  • Login into Netlify using your Github/Bitbucket/Gitlab OAuth.
  • Select the repository
  • Then fill in these values in the relevant fields

    Build command: hugo
    Publish directory: public

I have added a netlify.toml file to the repo (next to config.toml) to state the production hugo version as well. Not sure how relevant this will be, but I just wanted to be safe.

For more information, Hugo has a detailed documentation for this step as well.

Setting up CMS

This step is even simpler! Go to forestry.io and then login with your relevant Github/Bitbucket/Gitlab OAuth. Go through the simple wizard, then you'll be taken to the CMS page. It is so simple, there's no hassle at all!

All done!

That's it, now you can blog where ever and when ever! Like I mentioned already, forestry.io even support mobile devices, so you can do that too!

Migration

The last step is off course migrating from which ever platform you are using right now.

Final thoughts

This was very cool, but I personally had some issues with theme styling and decided to stick with Hexo. But for anyone who is setting up a new blog, since this is so easy it is almost silly not to give this a go first!

Buy Me A Coffee