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
Pre-requisites:
- 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
- Part 1 :: Introduction on what’s needed and what we will cover
- Part 2 :: Starting & configuring your project with Tailwind and Hugo Server
- Part 3 :: Building content pages, partials and list pages
- Part 4 :: Building blogs and extras such as 404, robots, google analytics
- (Optional) Hosting your static website on AWS S3 + Cloudfront
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:
Pros
- 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
Cons
- 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
Alternatives
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
