Building a Static Website Hugo Tailwind and AlpineJS - Part 1

3 minute read | | Author: Murtaza Nooruddin

This is a comprehensive multi-part guide on setting up a blazing fast static website and/or blogs using TailwindCSS 3.x, AlpineJS 3 and Hugo, arguably the fastest static website generator. Then host it on AWS S3 and Cloudfront for virtually free for global CDN and near 100 score on PageSpeed. A serverless contact form with Google recaptcha is also included. Please note, I have an older but relevant article on hugo+bootstrap

Difficulty Level: Medium - You need to be technical with programming background in HTML/CSS


  • Basic understanding of Hugo , check out the website and read up a little. There is a good video series it will help.
  • Know how to use tailwindcss , but if you do use bootstrap or materialize or any other CSS framework, you can easily adapt it instead
  • Understand basic javascript as we will use to inject code using basic + Alpinejs to make basic stuff like menus work
  • Very basic knowledge of node package manager (NPM)
  • (Optional) Markdown syntax if you want to use it as a format for creating blogs
  • (Optional) Basic understanding of GIT to source control your project.
  • (Optional) knowledge of either hosting it on a traditional hosting service or AWS S3 & Cloudfront

What you will learn

Why use static site generators?

This all seems a lot of work compared to spinning up a wordpress site? True, but it sure has its benefits:


  • Unmatched website loading speeds, it’s bleeding fast! Try running this site on gtmetrix
  • Cleaner HTML code and no bloatware from plugins or heavy themes, google loves that
  • Super secure, virtually unhackable
  • Serverless hosting and global CDN, pay nothing with free tier on AWS (unless you expect millions of visitors)
  • Full control - you know what’s going in your HTML, meta tags, structured data schemas
  • No patches, backups, maintenance required


  • There is a steep learning curve, but becomes significantly easier once you are through
  • Updates usually require re-deploying entire website (however, if you choose AWS hosting, can be done in seconds using AWS console commands, will show later)
  • No WYSIWYG interface, you need to have HTML/CSS skills


So Hugo is clearly not the only static website generator, alternatives are Next, Jekyll, Gatsby and more coming out. They all have similar functionality and there are plenty of articles on the internet explaining the differences. I picked Hugo due to unmatched build speed and relative ease of use.

What I will show on AWS, can possibly be done on other cloud platforms, so adapt if you will.

Continue to Part 2

decor decor

Have a great product or start up idea?
Let's connect, no obligations

Book a web meeting decor decor