Hugo Extended Setup

Now that I’m on the other side of the daunting task of setting up Hugo and making an extensible enough theme, I figure I can share what I’ve done and learned.

My Design process

While envisioning what I wanted out of this, here is the process of selection and implementation.

My Objectives

When setting out to make this, I wanted a few simple things:

1. A simple way to write and publish posts.
2. Flexibility to change my mind on how things are organized.
3. Enough css control to really make it look how I want.

My Tech Selections

So from those objectives a few things I knew already or wanted to learn more about stood out:

• Github pages and actions as a publishing workflow.
• Hugo as a site/blog generator.
• Tailwind CSS for styling.

Github pages

Pages is super basic and easy to setup. I’ve already got my apex domain verified, so adding new pages under it is a breeze. Other contenders could be firebase or an s3-cloudfront combo. But it was going to use github anyway, so why not use all this and keep it in one tech stack.

Github Actions

Actions came out as I left Rackspace and so I never really go to dive into using them. They’re super powerful and similar to drone/circleci. I wanted to get back into the CI game and this is def the market leader, as well as being a part of the github ecosystem. So it’s all in one solution.

Tailwind css

This choice is more out of left field. I’ve been trying to not use bootstrap and get more hands int the engine of css usage. This is a good middleground. However, integrating it into Hugo isn’t as easy. Because it does markdown renders, you have to figure out how to inject the tailwind stuff into the context of the markdown. I’ve accomplished this by wrapping my {{ .Content }} stuff in a div with a .markdown-content class. Then I address all that in my main.css using @apply (which is a bit of an anti-pattern).

The Setup

Let’s assume you know the basics enough of Actions and Pages to auto post static html. Where this gets fancy is using two commands to generate that static content.

• First: use the npx tailwincss command to generate the css file into a dist folder. I throw it into my static folder in the Hugo site but I imagine it could also go into assets/css.
• Second: use the hugo deploy commands to generate the full site into a public folder. After that you have your Action publish to Pages like normal.

Theme’n with tailwind

I worked with ChatGPT to generate a mock up, the first one I got was actually great.

So from that you can see where my color choices came from. I still need to make up a front page and hero image, but I’m happy with where I am now. I Simple use a color picker on the various parts and ran with it. Hugo’s base theme actually makes this easy to bump out, and gpt was there to help me when I’d get stuck on a concept. My preferred way to theme html/css is to work from a mock up image like this.

I just trial and error’s with a draft page that has a lorem ipsum chain on it and here we are. Every now and again I find things I need to add (ordered lists for this post, and think I want an image lightbox type thing so I don’t just have huge images).

In Closing

This was not as easy as I thought it would be, it certainly necessitated me learning stuff I had been dragging my feet on. I’m looking forward to writing more and seeing what I produce (more RPG content!).