How I Built This Blog

“Building a blog has never been easier”…is a sentence you could probably write at any moment in time and it would be accurate.

But that doesn’t mean it’s any less accurate now.

So you’re probably asking, “Jerry how did you build such a beautiful blog? You must be spending money. Did you use my offer code when you signed up for square space?”

The answer may surprise you.

I am indeed paying money, only to Google Domains for the jeremysearls.com domain. The rest is 100% free, and took about 30 minutes to set up.

I’ve owned jeremysearls.com for quite a few years, but wasn’t doing anything productive with it. It was time to build a home for all my hottest takes.

This blog has 3 main components.

  1. A github repo that contains the code generated by Hugo, a static website generator.
  2. A free netlify account.
  3. A google domain.

And that’s it! Those three things allow for a fully fledged web app that features SSL as well as a CI pipeline integrated with the github repo.

Here’s a simplified rundown of the steps needed to set up the site. For more information and a much better step-by-step tutorial check out these docs from Hugo for building the blog and hosting it on netlify.

  1. $ brew install hugo
  2. hugo new site <name your blog>
  3. cd into your site folder
  4. Initialize a git repo
    • $ git init
  5. Add a prebuilt “theme”
    • $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  6. $ echo 'theme = "ananke"' >> config.toml
  7. $ hugo new posts/my-first-post.md
  8. Log into github and initialize a new repo for your new site
  9. Set the upstream branch and make your first commit using the provided instructions from github.
  10. Visit netlify and create an account using your github credentials.
  11. Authorize netlify access to your blog repo
  12. Click “New site from Git” on the netlify landing page.
  13. Netlify will walk through the process of hosting your repo, including adding git hooks that will build when the main/master branch has been pushed to.
  14. Visit this link to view a sample hugo configuration for netlify. You can copy this configuration and paste it into a file named netlify.toml you’ll create at the root of your blog repo. This will enable the netlify builds to occur on “push” from your local git repo.
  15. Netlify will give a list of name servers. Visit Google Domains and under your domain click Manage > DNS > Use custom name servers. Enter in the supplied netlify name servers.
  16. Finally, back on netlify, after a few hours the name servers will be verified and netlify can have an SSL certificate issued on your behalf for free from “Let’s Encrypt”. This will allow for HTTPS connections.
  17. And that’s it! Pushing a commit to your new repo should trigger a build from netlify which will propagate the new build of your static site to the domain provided to netlify.

I would highly recommend this setup, even for someone with minimal programming experience. The setup not costing anything more than a domain name, and the experience of working with github, continuous integration, and a simple web framework are hard to beat. There’s a lot more to go from here, including working with the provided tachyon CSS from pre-built themes, as well as the nuances of hosting your own images, but we’ll save that for another post.

Catch ya next time! -Jerry