Self Hosting a Blog - BookStack vs Hugo vs Ghost
I tried out BookStack, Hugo and Ghost to find out which one I wanted to use for my blog. I ended up keeping BookStack for personal docs and you are reading this on Ghost.
After years of not bothering with my own web presence, I wanted to start my own site to play with new web technologies and as a dev site.
It will be self hosted as I also want to play with different cloud hosting providers and NGINX.
Requirements
My requirements were for it to be:
- Fun to play with
- Enjoyable & beautiful editor
- Must be able to copy-paste images from the clipboard
I am happy to work in text files for code, but personally if I'm writing I find that markup or html or whatever gets in the way. And I want a UI where I can paste images into the editor and it just works. After enjoying BookStack's editor for other projects I won't go back to save a screenshot, upload and link it manually.
WordPress
There is nothing wrong with WordPress if you stick with the core and avoid plugins. But I think it's boring and I've used it loads so it wasn't on the list.
BookStack
I wanted to use BookStack as I use it for documentation and the editor is a joy to use. In the end though I wanted something more for the front end, and didn't want to spend the time forking and modifying it myself when there are so many other good options out there. The BookStack creator even uses Hugo for his own website.
It is an awesome option for documentation though, and I will be still be using it for personal stuff. In the end, I decided to keep it on a subdomain after spending the time setting up an internal proxy in nginx to make it work as a subfolder :)
I think it looks great, the UI is very simple to use, copy-paste works properly for images and links (if you select text then paste a link it adds the link to the text) and it has built-in support for diagrams.net. You insert new diagrams from the editor or double click a to modify it. This is a killer feature for me when creating technical docs.
I also really like the callouts (the blue info, red warning etc) and I found them one of those simple things that really help make your docs look good. Once I started using BookStack for work I actually enjoyed writing documentation.
It's a very simple setup once you have a LAMP stack, but in the end it was never going to be pretty enough to be my website and falls slightly into my boring category. In a good "it just works" enterprise way.
Hugo
Hugo is a static site generator and looks to be immensely powerful.
Again install was very easy once you have a LAMP stack, and it seems most people test it out by deploying Hugo to Netlify which really is a one-click and is free to use. Pretty awesome that if you have a domain name you can get everything else you need to host a website for free.
A big plus is that everything is committed to your repo including the posts as they are just md files. It really is a static site go you can just grab the output public folder and throw it on any web server and it will work.
I used the NorthendLabs-Light theme.
The NorthendLabs Light theme
https://github.com/gethugothemes/northendlab-light
And I also really like this theme.
The Creative Portfolio theme:
However there is no CMS or editor for Hugo by default, so I ended up using Forestry as a CMS. The theme I used came with a config for forestry so the setup was painless.
Forestry CMS
The Forestry CMS editor looks fine enough but is not what I want to use with a lack of copy-paste images and formatting needing to be done by hand.
I played with Hugo and Forestry for a day before moving on and deciding the editing experience was not as good as WordPress, so a fail.
Ghost
Which brings me on to Ghost. Again super easy to install, and clearly the most polished of the lot. I mean I love BookStack but feels like, and is, a one-man project. This feels like they have investor money to spunk away while making no profits. (Neither is a bad thing)
It even did a good job of creating nginx config files as part of the install process.
What a standard theme looks like:
The editor is very clean and nice to use. By default there is nothing on the screen but the below:
The editor used a context-sensitive pop-menu:
And copy-pasting works!
If you paste a link from a supported site you also automatically get a nice card like the GitHub link below. They now do cards for video, audio, Soundcloud and more.
Disqus
You can connect to Disqus pretty easily by following the official Ghost guide and pasting a code block into a nice space they left in the default theme content/themes/casper/post.hbs
Conclusion
I am very happy with Grammerly and Ghost so far and my next steps are to look at theming it.
Another fun project will be to try to export the Ghost content through Hugo as a static site and use Ghost as a headless backend and CMS for Hugo.
jbaroneThe only thing I wish Ghost had was a Git setup like Hugo, so all your content is committed to your repo. But then there is this pretty cool looking guide on auto-deploying the theme from github. At the moment I committed everything to GitHub and excluded some module folders.
Finally using a full fat database is possibly a bit heavy for a blog which is a tick in Hugo
