There are so many different ways, languages and frameworks out there to build and publish your site that you might feel overwhelmed by the choices. It’s easy getting swamped in why React or Vue, using Bootstrap for your CSS needs, and building static pages with Jenkyll or Hugo. And that’s not even mentioning CMSs like Wordpress, Drupal or Joomla. I’ve experimented with my fair share of these and it never moved forward. In this post I’ll try to reason why I decided on Hugo for building my site with static pages and Tailwindcss to design and layout it.
Hugo
Hugo is awesome. It an extremely fast site compiler based on markdown files and layouts. According to the creators:
The world’s fastest framework for building websites.
It builds thousands of pages in miliseconds. Not that I really need all that power, but it’s good to have it laying there just in case.
After so many years of hankering for a good system that would let me take control of my posts and my files, I decided to try something different. My main needs were:
- Serving a static site, gaining on the speed of not having to deal with databases and python-based servers;
- Being able to build a custom template that I could style with CSS of some sort;
- Allowing me to showcase blog posts and photosets
- Did I say being wicked fast?
Hugo checked all the boxes and would make for a heck of a fun project.
Learning
The only way I really learn is by doing. To start off I bought the Build Websites with hugo from Brian P. Hogan and completed the project. It tought me to style, to template, to add CSS and JS, to use Hugo’s Pipes and to eventually deploy the site. It’s a pretty good learning asset to start if you want to get into Hugo.
When I start a project I often rely on hundreds of internet resources and smart blog posts. This time it wasn’t different. Creating partials, navbars, single and list templates, shortcodes and of course my home page.
But I also didn’t want to just get a ready-template and post. I wanted to make a template, even if by copying some ready design. Making it myself from scratch is the best way for me to learn.
I started a build from zero and using Brian’s workflow I styled my own template. At first I was using Bootstrap, but it quickly became apparent to me that Bootstrap has a very standard feel to it and that it would be hard to make future customizations or changes to the layout.
By mere luck I stumbled upon a tweet from a fellow LGO, @ItsTayFay.
It’s funny how now that I use @tailwindcss , I understand css WAAAAYYY more than when I had a million css files floating around my project.
— Taylor Facen (@ItsTayFay) January 1, 2021
Well, coming from Taylor “TwoLines” Facen I take it as the truth.
TailWindCSS
Styling with TailWindCSS is a breeze. See what I did there? Anyway, it makes styling so easy without you mostly ever needing to leave your HTML. Of course there is a learning curve and getting to understand and know all of its classes syntax takes a while. But then it’s just full speed!
Want to make it a lighter but bigger font? Just add text-2xl font-extralight to your class and you’re done.
Weird color and rounded blob? text-indigo-500 border-2 rounded-lg inline
Looks awesome, right? I know. There are still a few things that bothered me but that have easy workarounds. Especifically speaking, TailWindCSS’s extensions, variants and the @apply feature mostly fixes it all.
If there was one thing I might want right out of the box, it would be a bit more options for widths and more colors to choose from.
Conclusion
After the initial setup everything seems to be working pretty well. From time to time I have to adjust something either on mobile or desktop versions, or add a new shortcode to Hugo. It’s something that will give me the joy to write and exercise my desire to build new things.
I might do a bigger post detailing my setup for the blog, including Netlify’s integration and serving media through S3 and Cloudfront. I even wrote a small shortcode that changes the media url’s from my local draft’s folder to Cloudfront when the post’s front matter changes from draft to published.
For now, thanks for following and til later!