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...
Some prerequisites before we get started:
- A computer to set everything up initially e.g. Hugo, source code repo
Gitlabaccount to keep the source code of the site
Github pagesor any alternatives supported by
- And finally
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 a repo on any source code hosting site of your choice. I'm using Bitbucket because it offers private repo hosting for free.
git clone the repo into a directory on your computer.
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
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!
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!
The last step is off course migrating from which ever platform you are using right now.
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!