4 minutes
Well This Is Meta…
As you could probably gather from the title, this is going to be a blog about this blog.
I’ve been wanting to stand up a personal website for years, but kept coming up with reasons to put it off. I wanted something simple. Free to host. Trivial to update. And easy to stand up and make changes to. I’ve briefly toyed with a few different things before (Wordpress, Jekyll, Squarespace, etc), but never spent the time to make something complete that looked decent enough for my standards. Two days ago, however, I was chatting with some coworkers about a random home automation project I was working on, when one of them referenced their blog post of a similar project they had completed some time ago. I liked the look of his blog so much I asked him about it. That’s when I learned about Hugo.
Hugo
The page is built with Hugo. Which is a very simple to use static website framework built on Golang.
Installation
Installing Hugo is very simple. There are several mechanisms to install, but since I’m using a mac, I opted to go with everyone’s favorite package manager Homebrew.
A simple:
brew install hugo
And we were off to the races.
Repository
We’ve got Hugo installed, now we need a place to store the code. Github to the rescue! I created a quick private repository to store everything, initalized it with a README, and cloned it locally. I’m not going to go into how to do all of this, if you’re reading this blog, chances are you already know how Github works.
Let’s get coding!
Now that we’ve chosen a framework, and have a place to store our code, it’s time to actually start making something! With hugo, you can generare all the initial code with a super simple command!
hugo new site --force
The “force” option was required in my case because I had already created my repository, and didn’t want to create my page in a subdirectory. As an alternative, you could create your site first in a specifc location and then initialize it as a new repository afterward.
So we have a site… let’s make it look like something.
One of the things that makes hugo great is its library of themes. Scrolling through all of the themes, for now, I’ve settled on a theme called hello-friend-ng by Djordje Atlialp. Installing it is just a matter of pulling the code into the plugins directory, preferably as a submodule so we can easily pull updates in the future.
git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
Then it was a matter of copying their example configuration file into the hugo.toml
file and making a few configuration changes to display things the way I wanted.
After that, it was just a matter of generating some content, which is pretty boring, so I won’t go into it too much… but it’s basically just creating some new files and typing the words that you’re reading!
Hosting
The final piece of the hosting puzzle is actually hosting the page. I considered self-hosting it from my k8s cluster at my house, but that would involve quite a bit of additional work to make it secure. Additionally, the internet in our house in the mountains isn’t that great, so I decided to look into hosted alternatives. I considered github pages, but I’m already using my github pages account for something else, and you can only have one page. I decided to use Netlify, at the recommendation of the same coworker I mentioned earlier in this post.
Configuring a new site on Netlify was incredibly simple. Just create an account, link it with Github, point it at your repository, set up DNS and SSL and it automatically deploys your page straight from Github on push. This is exactly the simplicity that I’m looking for for this page.
Conclusion
Well that’s the end of my first blog post. I know it wasn’t the most interesting topic, but I thought it might be good to write down, especially if anyone is curious about how this page was built, so they may do something similar.
Thanks for reading!