How I build and host this website

Building the Website

I used Hugo to create this website. Hugo is a development platform known for its incredibly fast build times (my site takes milliseconds to build). Hugo also comes bundled with its own server, so it can provide a live preview which reloads every time you save changes.

One downside to Hugo is its complexity, especially when themes are involved. It requires a specific folder structure and relies heavily on template files to render different parts of the website. In future, I may write a post about my struggles with the Hugo directory structure.

I chose a theme called KeepIt for this site, customizing the .scss files to use custom colors and icons.

Why not regular .css files?

Because this theme uses Sass instead, otherwise known as “syntactically awesome style sheets”. Because Sass compiles down to regular CSS, the syntax is similar. You can usually make do with whatever existing CSS knowledge you have.

Hosting the Website

I purchased the domain from a hosting provider (currently HostGator). The company provides a File Manager portal so I can upload my content.

While I am able to develop all my site content locally (in Vim and using Hugo’s live reloads), the publishing process is still pretty manual.

Updates

Creating new posts

Hugo automates the creation of new blog content from pre-made templates:

hugo new posts/name-of-post.md

These auto-generated markdown files also include an array of file-level metadata/settings, in YAML format. For example:

---
draft: true
---

If this is included in the TOML metadata for a post, the Hugo site knows not to display it on the homepage.

Building and zipping the project for upload

PowerShell script

Saved as a .ps1 file in the project’s root folder.

# Update source control
git pull

# Build static site
hugo

# Delete old zip
Set-Location ./public
Remove-Item ./jtrm.zip

# Create new zip
Compress-Archive ./* ./jtrm.zip

# Prepare for upload to server
Start .
Start "https://www.hostgator.com/my-account/login"

# Return to top level
Set-Location ..
exit

Explanation of the script

Start is an alias for the Start-Process PowerShell command.

• If you pass a local directory path, Windows Explorer opens to that location.
• If you pass a URL, it will try to open that URL in your default browser. (If you’ve ever tried entering a URL in the address bar of Windows File Explorer, the same thing will happen).

So start . opens a Windows File Explorer window in the current folder (.\[site-root]\public), which will make it easy to drag-and-drop the zip into the server’s file manager.

The second Start command opens Chrome to the login screen of my hosting provider.