What’s a nice kid like you doing in a place like this? Come here often?
If so you may have noticed how clean and snappy it is, with almost no-load times at all! In this day and age where we have embraced the loading screen, I say fuck that, I wanna give my readers a reading experience second to none!
In this article, I wanna tell you how I achieve sub-millisecond build times with such a interactive site! (I’ll try to do it like you are 5 so dw about it)
Web Dev 101
I am dying to talk about the tech behind this blog because it is certain to take your breath away. However, let’s begin with a little web dev GK.
If you were to pop open the hood of any website or modern day application, it is usually made up of a frontend and backend. The front end determines the logic of what is going on in front of you and what you see. However, the backend is what is usually used to populate the screen with new data each time you open it.
This is how websites like Facebook, Instagram and reddit are able to generate new content specific to every viewer thus making them a dynamic website. On the other hand, back from the ancient time period of early 2000s, static websites were far more common.
A relic from the desecrated era…
In a static website, what you see is what everyone gets ;)
Essentially, it eliminates the need of a backend entirely, as the information will be same for every user. Thus saving time on on fetching data from the database, and also allowing the developers to focus on optimising and improving the frontend UX.
While websites have evolved from the archaic wild wild west from what they once used to be, the general concept of a static website remains the same.
Just host your HTML, CSS and if you are a true elite, throw in some console.log(‘Hi Mom’s’) in your Javascript and host it on a server. It’s all what everyone gets, therefore only thing people need to load is a few KBs worth of text files and it is an elegant solution to most problems.
The Problem
Now that you understand the underlying principles, perhaps you are wondering that why don’t more people, especially bloggers, opt to make static websites? In short, it’s an extremely tedious job to make and maintain such websites!
Even if you are an amazing frontend web developer, using a completely static content manager can tend to become a very laborious activity. To make a single change in the UI, or to speed things up, or add a new feature, you may have to 100s of changes in your website to make it work.
Trying to ignoring the humdrum nature of the work, most people would not know how to make a good website to begin with. So, they usually stick with web applications that allows them to easily setup their website or blog. This is usually coupled with lack of freedom, paid features and those god-awful load times.
The Blazingly Fast Hugo
Hugo made a big entry into the market in 2015 as an open source static website framework. A web development framework gives you the tools to make complex websites much easier. Even with no programming experience, it is very easy to setup and deploy a hugo website for free with github or netlify.
It has an easy to use content tree which allows you to manage your content. You can add in your own html css code in its templates or pick some components from Hugo’s amazing open source theme packages to use directly for free, or edit them to your liking. Throw some stuff together to get the look and feel you want.
But why is it so fast? You see, the GO programming language is built for efficiency, and it is used to get the templating end of things done.
This allows the data you have in your content tree to be dynamically interpolated via GO using variables and loops to handle a lot of the heavy lifting Hugo provides you with a lot of built in tools to make this process easier and resulting in an optimized output and a fun experience for the content managers.
The templates you can build with the framework help you create a great workflow later on, where you only need to add markdown files in the content and make your content tree.
Then when you build the website to get the final html css stuff out, it figures out all the complex bits using it’s taxonomies that help define relationship between contents such as tags, multiple authors, breadcrumbs and even the handy search bar I have.
It compiles it all into a static website aka just HTML, CSS and Javascript that is optimized to support blazingly fast build times even if you have a blog with over a 1000 posts!
To Sum It Up
If you made it to the end of the post do remember that it’s not just the blog, but you are also …
Hugo is great for making blazingly fast static websites, and you can even get started without any coding experience. It is one of the major motivators for me to start my own blog too, and I believe having Hugo experience is certainly going to pay off in the long run.
Hope you liked this content! I would share more amazing tech as I come across it along with my arts and fitness esapades so stick around!