Are you searching for a really fast static website generator and do you want to improve your SEO and web vitals? Then you have to take a look at the JAMstack architecture.
Hugo explained
Hugo is a static website engine and is written in Go (aka Golang). The major benefit of Hugo is how fast the engine works. It is incredible how fast it renders thousands of pages. Hugo is very well supported by hosting services like netlify and comes with an easy to use CLI. Another great thing is how easy the build process fits in. Hugo supports PostCSS, SASS, Babel, minification, bundling, image processing and much more out of the box. Using Tailwind CSS with the JIT compiler is implemented in one row of code.
JAMstack explained
At first JAMstack is an architecture designed to make the web faster, more secure, and easier to scale. JAM is short for Javascript, Api services and Markdown. The JAMstack architecture comes with all kinds of benefits to the website and workflows: security, scalability, performance, maintainability, portability and a great developer experience.
JAMstack projects don’t rely on server-side rendering so you can serve the whole website from a fast and secure CDN. No databases to clone, no complex installs, everything lives in Git.
Let’s get started with Hugo
I want to give you my perspective about Hugo after using this engine in the last few years. This is not a “How to start with Hugo guide”. There are a lot of great videos and tutorials available and I linked you to some of it at the end of this article.
Hugo is a regular application so you can download it from GitHub and it works on macOS (Intel & ARM), Windows, Linux, FreeBSD, and others. You can host the static website on any web server or your favorite CDN. If you don’t want to write markdown by yourself you can use for instance Netlify CMS or Forestry .
Best tutorials to get started with Hugo
Personally I started to learn Hugo with Mike Dane’s tutorials. Maybe because his tutorials are integrated in the Hugo documentation but I liked the good combination of details and overview.
Introduction to Hugo | Hugo - Static Site Generator
Other good resources to learn Hugo - static website builder
- 20 Minute Hugo: Part 1 - Overview
- Hugo Tutorial | Create a Blog from Scratch & Deploy on Netlify
- Building Websites With Hugo
WordPress is dead in 2021
I have used WordPress quite a lot since version 2.5 (Brecker) and I loved the ease of starting a website and customizing it with PHP. Since 2008 I have used a lot of different CMSs and I even developed my own one inspired by formally known as RedDot. But I was always unhappy with portability, publication and testing.
Since most websites are using some kind of build process (PostCSS, SASS, name it), pre-rendering is becoming more and more popular. It started with pre-fetching some API data and storing it in a JSON file. Today with great tools like Google Cloud, Netlify, GitHub or Forestry you can choose the best tool for the specific part you want to optimize. You don’t want to edit markdown by yourself? Okay integrate Netlify CMS or Forestry. You work in a large team and want to have a develop, test, stage and live version? Great, use GitHub with branches and publish it automatically to the location you want it to have.
No more typical WordPress security issues
No more unauthorized Logins, outdated Core Software, SQL Injections, Malware or Cross-Site Scripting. Sounds great right? But is building a static website not a huge step back to the time when every page was “static”?. Well yes and now. In the early day of “the Internet” there was no other way to build websites. Nowadays websites are getting more and more complex to produce, maintain and secure. Dividing the website in smaller, more testable, scalable and maintainable pieces helps to be faster on the market.
With the JAMstack you can separate parts of your website. Do you need a form? Great use Alpine.js or Vue.js and connect it to an API endpoint - Boom! Do you have complex data structures in tables? Pre-fetch is in the build process and let Hugo do the rest. And the most important thing you shouldn’t forget - Hugo ist fast. To give you an example, my biggest website with more than thousand pages and hundreds of to process images gets rendered in 3.7 seconds - freaking fast.
Benefits of static websites
- Being more productive with the whole write and publish process
- The fastest performance you can imagine
- Literally you see exactly what you get
- Best for SEO optimization and web vitals
- Backup, version control and build process automated
- Using open and supported technologies instead of a proprietary database structure.
- Extremely improved security
- Great for testing - you can’t run into server-side render issues.
- Decoupling of API services gives you a greater portability, flexibility, as well as significantly reduced risks.
Most of these benefits are not particular to Hugo only. You get these by switching to the JAMstack in general.
Hugo’s particular benefits
- Shortcodes inside of markdown files
- Render Hooks: You can even redefine basic markdown elements like links, images and headlines.
- Image processing out of the box: You can resize, fit, fill, rotate, resample and filter png, jpg or webp images.
- Minification: You can switch on minification in production for JS, JSON, HTML, CSS, XML, SVG and in development just no minification
- Pipes: I use pipes a lot to truncate, markdownify, fingerprint or just to append new elements to a list.
- PostCSS, SASS, bundling, Babel, fingerprinting, …
- Save money with short building times
What is Hugo and how does it work?
Different ways to use the range method in Hugo
Automated image handling and processing in Hugo
Downside - Hugo’s flip side of the medal
Go templating: Using Go as your template engine language doesn’t feel as comfortable as other templating languages you might use in Vue.js or other static site generators. There is no controller or script part you can use. Every code has to be in one row. Maybe a quite good comparison, it’s a combination of Blade (Laravel templating) and Vue.js with lot’s of “Mustache” syntax (double curly braces)
Less optimal documentation: Another thing is the documentation. It is definitely not the best for beginners. I still struggle with finding the right page to get the information I’m searching for. I would consider it as a functionality first and not developer first documentation means the structure is based on functionalities and not of naturally linked content. The Hugo docu team could get some inspiration from Tailwind CSS or Vue.js and how they focus on real life situations and connected functionalities.
Results - my conclusion
I think WordPress is still a great tool to get your own website online. It is supported by nearly all web hosting services and you can find tons of themes - free or not. Wordpress developers are cheap to get in every place of the world so why should I use a static website builder?
Well maybe not right now but if you want to integrate more and more external sources via APIs and to improve your user experience, then you have to be flexible, fast and secure.
Some of the key benefits of JAMstack
- Security
- Scalability
- Performance
- Maintainability
- Portability
- Developer Experience
All links in a practical list
Related articles
What is Hugo and how does it work?
Different ways to use the range method in Hugo
Automated image handling and processing in Hugo
Different ways to get an image as page resource in Hugo
Various topics
Hugo - The world’s fastest static website engine
Are you searching for a really fast static website generator and do you want to improve your SEO and web vitals? Then you have to take a look at the JAMstack architecture.
Tailwind CSS - my CSS framework of choice
If you’re sick of tweaking the CSS framework you are using, don’t want to override unwanted styles anymore and are a big fan of modularisation, then Tailwind CSS was made for you.
Alpine.js – like Tailwind CSS for JavaScript
Use plain JavaScript also known as Vanilla JS to make your server side rendered pages dynamically the way you can do it in Vue JS with only 8,4kb costs. Sounds great? Try …
VueJS javascript framework and why I love it
Several years ago I started building web apps with React JS and I reached the point where I was thinking to myself, does it always have to be so complex even for smaller …