I usually read on flights. A flight is the best excuse to disconnect and spend time on a book I’ve been putting off. With no distractions. And with ginger ale.
But on the night before a recent cross-country flight from Oakland to Baltimore I decided I wanted to finally create a personal site. I had heard of static site generator tools like Jeckyl and Hugo before, but had never tried them. After 10 minutes of scanning how-to articles I figured I would give it a shot the next morning.
As soon as the wheels were off the tarmac I pulled out my laptop and started reading through the first article I had opened up the night before: Hugo vs. Jekyll: Comparing the leading static website generators. This was the most detailed comparison 2 minutes of googling pulled up for me. It describes how Hugo and Jeckyll handle themes, workflows, and extensibility. After finishing the article both seemed like fine options so I just chose the one I had heard my coworker recommend: Hugo.
If you aren’t familiar with static site generators like Hugo, they enable you to quickly generate a static site (shocking I know) by editing only markdown files and downloading easy to edit themes. All of the HTML, CSS, JS nonsense is abstracted away.
To get started I followed the Hugo official quick start guide. Within a few minutes I had brew installed hugo, initialized a new project, and had the dev server up and running.
brew install hugo # `snap install hugo` for Ubunu
hugo new site <your-site-name>
cd <your-site-name>
hugo server -D
After we had reached a safe cruising altitude of 35,000 feet it was time to understand how Hugo projects were organized.
The important pieces are:
config.toml - the configuration for the project/content - all of the markdown pages that will populate the content/themes - where themes are storedThe next step was finding a theme I liked. themes.gohugo.io has lots of different community made themes to choose from. Looking for something simple I went with the hugo-goa theme.
To install the theme you just need to copy the contents of the theme’s repo into your /themes repo. In my case I decided to fork the repo and add it as a git submodule. There was no real reason for this, but now I have my own forked version of the theme. After installing my theme I was not really sure how to use it. Fortunately, Hugo themes come with an exampleSite directory that has sample code for the config.toml and content pages.
After a quick copy-pasta and editting of the details I had built my landing page. This theme made it easy to plug in account info for Twitter, Linkedin, and Github. Outside of the landing page the rest of the site was just lists of links to content I had been a part of.
I now had a site running locally and an airline bag of Fritos. Next step was to figure out how to get this thing hosted. Github Pages to the rescue. Hugo even has official documentation on how to set up hosting via Github Pages. Github Pages allow you to host one site per account by publishing the contents of a repository. If the repo is public than the hosting is free, if not you’ll need Github Pro at $8 / month. Considering that the content is just staticly generated web pages that will be public anyway, might as well save that burrito money!
The docs make the connection between Hugo + Github Pages seemless. When generating the static files from the markdown, Hugo saves them to public directory. So to connect that to Github Pages you just have to setup the public directory as a git submodule that is connected to the Github Pages repo! This means when I generate the static content and it gets dumped into public, I can just commit the changes in there and they’ll automatically get pushed up to my githubpages repo and be deployed! A bash script makes the process even simpler. ./deploy "commit message".
Now I had my site on the internets. Almost there…
The last thing I needed was that vanity domain: davidscrobonia.com. 5 minutes and $12 later I was ready to integrate my new domain name with Github Pages. Following this simple guide I was able to easily see how to add my new domain name in the Github Pages settings and added an pointed an A record in Google domains to the Github Pages’ IP addresses. Github Pages will even manage TLS for you! Just check the box. No CA’s, uploading certificates, nothing.
Just as I was about to finish configuring the A record the flight attendant once again asked me to stow my electronics for landing. Of course as soon as we had landed and were shuttling towards our gate I had to pull the laptop back out. And before we had arrived at gate A-11 davidscrobonia.com was live!
In just about 5 hours I was able to create and customize a site using Hugo, configuring free hosting and deployment with Gihub Pages and a bash script, and connect a custom domain with Google Domains. It will only run me $12 a year to maintain and takes less than few minutes to deploy changes. For somebody who had never used these tools before I was amazed at how easy it was.
Before grabbing our carry ons and exiting the plane I made my partner go to davidscrobonia.com to show off how cool this was. “Are you sure you want to use that picture?”
https://gohugo.io/getting-started/quick-start/
https://gohugo.io/hosting-and-deployment/hosting-on-github/
https://dev.to/trentyang/how-to-setup-google-domain-for-github-pages-1p58