It was finally time for me to set up a blog. I have written posts on blogs for companies that I have worked for in the past, but I thought that this would be a good exercise in improving my storytelling, sharing some knowledge, and maybe even making some connections to other people along the way.

Why had I waited so long? Well, I wanted a blog that was simple to use, easy to maintain, and free to setup. I had gone down the road of Wordpress & Medium, but I grew tired of needing to manage a plethora of security issues or needing to deal with popups & banners.

Then I saw a tweet in my feed that mentioned Hugo.

Hugo

Hugo is an open-source static website generator. A static website is written in plain HTML (likely styled with CSS and might use some JavaScript), whereas a dynamic website would be written in a server-side scripting language such as PHP. The benefits of using a static website are that they are faster to load, simpler to maintain, and cheaper to host. This was already looking good to me, but I didn’t want to deal with HTML. This is where Hugo comes in.

Hugo takes care of generating those static HTML pages for you using a templating system. You provide it with a config file that specifies a theme, and then write your pages & posts using Markdown. There are hundreds of themes to choose from on Hugo’s site, plus even more are available on GitHub. Since the content is Markdown and separate from the theme, its easy to change up the look and feel of your site without needing to change any of your pages or posts. Usually the website theme and content are saved in a Git repo, which provides an easy way to get version history on your site.

After you download your theme, configure it in Hugo’s config file, and create a new post, you invoke Hugo by running hugo (from Homebrew). This will take your post content as input and generate the HTML pages (using the layouts and styles from the theme templates) in the public/ folder.

So, where does this folder go in order to create a website?

Netlify

Initially I was going to create a git repo out of the public Hugo folder and push it to GitHub so that I could host it using [GitHub Pages]. But, by going this route, I would then need one repo for the site content & config, a subrepo that linked to the theme content, and subrepo for the generated HTML files. Instead, I found Netlify which can listen to the GitHub repo for the site content & config via a Git hook, and it will run the hugo command to regenerate the static site from the updated template & content. Netlify will even host that generated content for you, too.

So far, the new setup is pretty nice, but what if I don’t want to deal with Git every time I want to create a new post?

Forestry

Forestry.io connects to GitHub and displays the blog’s Markdown content & config in a nice UI. It understands the format of Hugo’s posts, so it can provide metadata config fields plus a WYSIWYG editor alongside it (with an option to still use Markdown if you prefer). After you are done creating your first post, you just hit Save and Forestry will make a commit to the GitHub repo with your website content. When that happens, Netlify will detect the new change, rebuild your website, and publish the contents.

Voilà! Now I’m ready to start telling my story.