Going live in two hours with Hugo and Netlify

This is a general overview of how the first version of my website went live. This is not a tutorial.

For the longest time, I wanted to do a personal website. I kept looking for the right approach, the right amount of content, the right libraries. Should I do everything myself? …so many questions, so many decisions.

When I finally decided that it was time to do it, I’d start small, then expand as needed, an MVP if you will (Minimal Viable Product).

Over the past couple of months, I had been using Netlify and Hugo to migrate a WordPress site to a static site for a friend. It was easy to setup, fast to develop with, quick to deploy, free hosting and zero-hassle to manage. I loved my experience with both.

I want to showcase how fast and easy it is to develop a website with these tools. It took me less than two hours to go live with my personal website. Funny thing is, it took longer to write this blog post!

At this early stage, there isn’t much content; it’s a base. I can do a lot more with it, over time and as needed.
What I did can be found here.

Boilerplate

I have used Hugo alone in the past to start developing. The victor-hugo boilerplate adds Webpack configuration, which is not fun to setup manually. Plus, it comes with a netlify.toml config file that plugs right into Netlify when you deploy. A simple yarn install and my playground is ready!

For more details, please consult this blog post.

Choosing a theme

The example site for this hugo theme checked all my initial requirements — a card, where you put your photo and contact information. The theme comes with a lot of scripts and styles that I didn’t need. But, I chose not to do premature optimization, deciding to clean the code at a later point.

Note: It is easier and faster to download the theme repo zip instead of cloning it into your workspace.

Deploying with Github and Netlify

So I push to a Github repository and import the site using Netlify. I had my preview site up and running within 2 minutes. Hugo has fast build time and Netlify has fast deployments. Every push to my repository triggers a deployment and a new version goes live within seconds. This is good stuff!

We are at the one hour point. I have everything I need to go live.

Setting up the domain

I had previously purchased my domain through Google domains. With Netlify, I set up a custom domain and set up the DNS information for my domain to point to the Netlify server. I then set up my https in one click. Done.

The second hour was spent waiting for the DNS and https steps to be fully registered, during which time I changed some minor styling issues I found.

Conclusion

Tools like Netlify and Hugo help us reach our goals faster, and at a much lower cost. I don’t need to pay for hosting. I don’t need to manage deployments, databases, SSL certificates, etc. Without this overhead, I can focus on delivering content. And that’s valuable to me as a developer!