First Impressions: Using Hugo, Tailwind, Netlify, and Gitlab CI/CD Hello, World!

The last time I created a portfolio website 6 or so years ago, it was an excuse to learn angular and manage a server for the first time. The technology choices were driven by my interest, not the problem being solved.

A little older, and (hopefully) a little wiser, I’m building a new portfolio website/blog (the one you are reading!). This time around I’m choosing a tech stack that is much better suited for delivering simple web pages and solving content management problems:

1. Hugo
2. Tailwind CSS
3. Netlify
4. Gitlab CI/CD

Here are my first impressions of these tools:

When I decided that I wanted to build a portfolio/blog I wanted to choose a technology that was well suited for SEO, caching, and page load times. Knowing that I wasn’t building a complicated UI I wanted to use something as close as possible to vanilla html/css/javascript as possible. I read through the hugo documentation and fell in love with the design goals. A couple features that sold me:

1. Uses git and file hierarchies as a way to manage content and site structure, whereas the rendering of the pages is handled in templates of custom html/css.
2. Hugo build system outputs plain ol’ html/css. No server side dependencies to patch (especially if you use netlify or another CDN that is in charge of serving files securely).
3. Complete theme-ability and customization with a library of helpful functions

As someone who is predominately interested in back-end development, I usually look to styling frameworks for a lending hand. I have plenty of experience using and customizing bootstrap, but I’ve also heard great things about tailwind. Digging into the differences between tailwind and bootstrap, I noticed that tailwinds focus is on providing a set of utility classes to easily style content. This immediately resonated with me. Bootstrap’s utility classes are probably my favorite part of that library. I usually end up fighting bootstraps pre-defined components when I need to style them a specific way. Tailwind on the other hand seems to get out of the way. I’m still learning how to effectively use tailwind, but as of right now I’m a convert.

The first website I deployed was on the cheapest server I could find, and the speed was atrocious. When starting this project, I knew I had to use a CDN that could get content in front my audience faster. The first website was embarrassingly slow. If someone thought that was the quality of work I deliver, there is no way someone would want to hire me. Yes – it was that bad. Jokes aside, the move to netlify was totally worth it and considering it’s free for my current use case: can’t beat it. They have a lot of features that are worth exploring if you work on a team, but the caveat is you have to use their build system. Looks super easy to set up, so no fault of their own, but I wanted to dive into a generic build system (Gitlab CI/CD) for other projects. The netlify CLI provides deployment tools, which is enough to plug into other CI/CD platforms and get branch previews of website changes.

Given the nature of a CI/CD product, jumping into gitlab can be pretty complicated. Figuring out the magic YAML to do what you want can be frustrating, however the docs and templates are easy to follow to get started. Deploying to netlify from gitlab has also been written about elsewhere, so you should be able to find a guide relatively easily. The CI/CD strategy I went with is:

1. On merge request events, build and deploy changes to netlify for review.
2. On merge to master, build and deploy to netlify production.

So far, no issues. Excited to see what happens when I reach for Gitlab during more complicated CI/CD workflows.