Migrating to Hugo

Last updated at 26 September 2020 at 7:00pm


As from the title you might have already guessed, I’ve successfully managed to move from django to a static website generator.

# Previously

Previously, this was a django application, running on the default sqlite3 database served by an apache2 server on some VPS. Django is a very nice web framework that is very easy to learn and very well documented. Django comes with its own admin dashboard which I really love. It’s very easy to set up and takes away a tone of work off your hands. I didn’t even bother to customize any of it, it remained as it was and I used it as my CMS.

Apart from maybe the sqlite3 database part, this seems like a good set up, why the change?

To understand this let me take you through a typical upload of a blog post.

In the upload process, the first step was to write the actual content. This was not really a problem. So I’d write the content in markdown format on a very slick markdown editor, typora, and then move on to publishing. This is where the issue was. On the app side I had to upload the content in html format. So from typora, the next step was to export the content to plain html. Then I had to add some bootstrap 4 classes for the styling. Next step was to upload it to the system.

For security reasons, the admin route was disabled. So for me to add the content, I had to ssh to my server open a port and then run the app using django’s development server with a different settings.py which had the admin route enabled. This would then allow me to access the admin dashboard and create the post. I had set up a WYSIWYG editor, summernote, which was really helpful with the previewing of the content. This procedure was very tiresome. I have not even mentioned image uploads and syntax highlighting for code snippets.

As you can see this was a very poorly designed architecture that was not thought through and that’s why it had to go!

In my defense though, this was the very first web app to have hosted so don’t judge too much ;)

# New tech

Right now this is a static website. Powered by hugo, a static site generator I came across not so long ago. Hugo is very easy to set up and to use once you get to understand the basics. This was really a big step for me because I didn’t even know that site generators existed, all I knew was that client, server and database was the standard.

Hugo has a lot of themes created by the community that anyone can use for their sites. But I like doing things from scratch, that way I get exposed to more stuff and learn more stuff. I used zwbetz’s make a hugo blog from scratch tutorial which I’d recommend if you want to go the no theme way. After the tutorial, I read through the documentation and I was good to go. I started with the page layouts and then went on to styling.

I didn’t retain the original design. A few things changed. In the previous system each post required an image. This approach was not ideal since I wanted to reduce the effort to post something. So I got rid of that part. I also decided to use a different css library, just to take a break from all the bootstrap and to give other things a try. I came across bulma which at first glance won my heart over.

Again to simplify the effort of posting content, I set up a post-receive git hook that builds the website every time I push changes to the website. So the procedure was now reduced to only one command:

git push live master

What else do you want in life, other than one command to publish your articles?

So from now on there are no excuses of not writing. I’ve got some good stuff lined up, so subscribe to my rss feed!