The tech stack that powers DavidWinslow.com

TL/DR
Hugo -> GitHub -> Cloudflare Pages  
 

Background

I wrote this post on the Saturday after the Thanksgiving holiday here in the US. My laptop remained off all day Thursday (Thanksgiving) and Friday (Black Friday). By Saturday, I was itching to fire it up and play with some new tech. So, I decided to take on a small side project I’ve been kicking around for a little while. I decided to work on a new personal web site. I’ve got an old one, but most of the content is pretty stale and overall it was just time for a big refresh. So, I decided to start completely from scratch.  
 

Domain Name
I started by looking for a new domain name. I discovered that DavidWinslow.com was for sale. I attempted to buy it using Google Domains but kept getting an obscure message to try again later. After a few attempts over the course of an hour or so, I decided to just grab it with GoDaddy.

I already own a bunch of domain names. Too many actually. However, I decided if I was going to put some decent effort into this, that I really wanted this particular domain name. My hope is that it will give me an SEO advantage when people search for me by name. So, I went ahead and purchased it.

GoDaddy has some room to improve the user experience when buying a “premium” domain. There is no notification during the purchase process that a “premium” domain name like this might take a while to actually become usable. It makes sense that it would based on the ownership transfer happening under the hood. However, that was not clear at all during or after the purchase process. So, I hopped onto GoDaddy chat support and a rep confirmed it could be as long as 7-14 days before I could use the domain name. So, I moved on to other things. Ultimately, a couple of hours later, it was ready.  
 

Static Site Generator
My previous blog was created with WordPress. Overall, I think WordPress is a decent CMS platform. I did briefly consider using it again.

In the past, I’ve advocated that clients who already have WordPress consider using Simply Static to generate static HTML / CSS content for sites that don’t require interactivity (comments etc). Doing this:

• Meaningfully reduces the WordPress attack surface - which can become quite a beast once you have a decent number of plugins.
• Results in much faster page load times, since loading a page no longer requires WordPress running PHP and doing a bunch of MySQL queries.
• Results in the ability to host the static content on a variety of very fast hosting platforms.

So, while I think WordPress and Simply Static can actually result in a great combination, I really wanted to try something new that had generating static content built in from the beginning.

My requirements for the static site generator and related template, which I came up with on the fly, were:

• Must have a decent set of templates available so that my site could have a nice, responsive user interface, without me doing HTML / CSS from scratch.
• Must work well generally with version control. In my case, GitHub.
• Must generate clean static content that will be very fast to load for site visitors.
• Must use a tool that has some good traction and is not likely to go away.

Ultimately, I settled on using Hugo with the LoveIt theme. Overall, so far I am happy with them. I was able to come up to speed and get a basic site done quickly. Over time, I’ll continue to improve it.  
 

Hugo Setup
Getting Hugo working was actually quite easy. I followed the process outlined here to get it installed on my computer running Windows 10. All of that worked well, other than the command listed to update the path. I ended up solving that with these PowerShell commands (below) which I found on the blogpost here.

$oldpath = (Get-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name PATH).path
$newpath = "$oldpath;c:\hugo\bin"
Set-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name PATH -Value $newPath

Hosting
I wanted to host this site on Cloudflare Pages. I’ve been wanting an excuse to try it for a while now and this was the perfect opportunity. Fortunately, Cloudflare pages has great support for both Hugo and GitHub. They also have very nice documentation on deploying sites made with Hugo on Pages. So, I added my new domain name to my existing Cloudflare account and configured Cloudflare Pages.

I did run into one issue along the way. I got the error described here. This was easy to fix by setting the Hugo version environment variable (HUGO_VERSION) to the version of Hugo that I was running locally (v0.89.4). The only downside here is that I’ll need to remember to change this as I upgrade Hugo on my local machine. Not ideal, but also not a huge deal.

After adding https://davidwinslow.com and https://www.davidwinslow.com to Cloudflare pages as custom domains. I then setup a 301 redirect to redirect visitors to https://davidwinslow.com to https://www.davidwinslow.com. I did that by using a Cloudflare Page Rule. Ultimately, this is important to do so that Google and other search engines don’t see the same content being loaded from different URLs and ding your spot in the search results. Google has a good post on this here.  
 

Results
After that bit of setup work, I can now add content by following this process.

• Add news posts by running:

  hugo new posts/post-name.md
  

• Edit the Markdown file that is created in VS Code.
• Preview the changes with a browser on my local machine after running:

  hugo serve
  

• Publish the changes via a commit to main and a push to the GitHub repo. This kicks off a Cloudflare Pages build and deploy which takes 2-3 minutes.

The end result is a nice, clean, responsive site that loads quickly and performs well on both desktop and mobile browsers. Here is what Google PageSpeed Insights shows.

All in all, I’m happy with this setup.