My static website updates in 2020
Implementing more advanced features to the static website made with Hugo
Some time ago I decided to build a personal website that would last through time. So nothing fancy, no cool animations, no pages, almost no JavaScript and 3rd party services just a plain single page with my basic who-i-am Infos and contact information. And I realized that plan with a static website built with Hugo.
But today after some planning and brainstorming, I decided to make updates to this website but keeping in mind the principles I’ve set to myself from the begging.
So here is what’s changed…
Hosting
I have had my website hosted on Firebase for more than a year or two because it was free and with a pretty simple deployment procedure using their CLI tool. After some research, I decided to give a try to Netlify, which has a much more generous free plan than Firebase. But what really made me switch to Netlify was their automatic deployment. After setting up the build commands, Netlify would make a new build and deploy on every git commit, so cool!
Optimizations
Initially, I would build a website and pass it through some Gulp modules for code minification and optimizations. But that operation could be expensive on Netlify since on a free plan you have only 300 minutes of monthly build time. This is more than enough for this kind of website but I wanted not to worry about that in the future, so I removed gulp and moved all minifications and optimizations to Cloudflare, which also takes care of caching and content distribution across their CDN network.
Content management
The biggest change was the implementation of blogging functionality, which I was missing right from the begging. Doing this was fairly straightforward in Hugo, I even made “works” section to share past and current projects. Hugo also provides out-of-box shortcodes for more dynamic content like YouTube, Twitter post.. etc. Everything went flawlessly.
The only thing I wanted less “technical” was how I was managing content. Which is, I would open Vim, edit content, and push the change to GitHub. This approach is ok, but I wanted to edit the content from anywhere and without CLI.
So the solution was Forestry, which is Git-based CMS with support for Hugo. It’s a free service for up to 3 websites, and it does just what I wanted.
Images
Adding blogging functionality also brings images and this where it can get tricky. Hugo already provides some basic image processing functionality but the implementation is not that easy and if not handled well all of the free build time and bandwidth would be used. So I moved all of the images hosting and manipulation to the Cloudinary service.
Cloudinary has a powerful manipulation API, where I manage all placeholders and responsive images through their HTTP-based API parameters. Besides that, with their free hosting plan I would off-load the unnecessary bandwidth usage from Netlify.
Conclusion
That’s it as of the upgrades, I hope you like and found useful my first blog post.