This is a comprehensive multi-part guide on setting up a blazing fast static website and/or blogs using bootstrap 5 (will work with any version) 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.
Difficulty Level: Medium - You need to be technical with programming background in html/css. Of course there is always an option to hire us to do it :-)
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 Bootstrap, but if you do use tailwind or materialize or any other CSS framework, you can easily adapt it instead
- 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 traditonal 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 Boostrap and Hugo Server
- Part 3 :: Building content pages, blogs and configure JSON/LD Schemas
- (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.
Bootrap is completely optional, go for any other CSS framework or none if you prefer. You can easily filter through the article(s) for what’s relevant for you.
What I will show on AWS, can possibly be done on other cloud platforms, so adapt if you will.
Continue to Part 2
