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!
What I did can be found here.
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.
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!