Hugo Review and Features

Written by Thom Krupa

Last update: 6/11/2024

Feature		Hugo
Written in		Go
Template Language The syntax or language used to define the layout and structure of web pages.		Go-based HTML
Based on JS framework
Built-in module bundler		Community example
Static pages (SSG)
Dynamic pages (SSR)
Developer Experience
TypeScript support
Serverless Functions (API) Small pieces of code that run on-demand without managing servers, typically used for API endpoints.
Focus on plugin system
Themes ecosystem
Hot reloading The ability to instantly see changes in the browser without refreshing the page when developing.
Code Splitting The ability of splitting code into smaller chunks to load them only when needed, improving performance.		Manual Code Splitting
Content Preview Allows content editors to see live changes to draft content in a staging environment before it goes live.
Builit-in Optimizations
Third-party Script Optimization Optimizing external scripts (like analytics or ads) to improve the performance and loading speed of your website.
Image Optimization
An option to disable runtime JS For certain use cases, like static HTML + CSS websites where interactivity isn't needed, shipping JavaScript is unnecessary.		No runtime JS required by default
Critical CSS Extraction Extracting only the CSS needed for the initial page load to improve performance.
Starters or examples with common use cases
Data fetching Methods to fetch data from APIs or other sources, either at build time or runtime.
10+ Headless CMS examples		Community example
Authentication		Community example
Adding search
Ecommerce		Community example
Security
Regular security audits by external researchers
Environment Variables Variables used to configure applications based on different environments (development, production).
Content Security Policy (CSP)		Custom HTTP headers rules

Like Eleventy, Hugo encourages progressive enhancement rather than full JS hydration. It's not tied up with any JavaScript framework.

Data fetching

Hugo supports only local flat files like markdown. If you prefer to edit content through a nice user interface, take a look at Git-based CMSs. Popular options are DecapCMS and Forestry.

To fetch data from an external API, for example, a headless CMS, use function.

faee7fa7-f75a-46f5-bd1c-9ee2b53740b5
  </article>
  {{ end }}
</div>

File Structure

├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Hugo has a few high-level concepts such as archetypes . Think of it as templates or content schema, the place when you can define fields for sections of your website.

To learn more about specific folders, check out the official docs.

Ecosystem

Because of its build performance and simplicity Hugo has gained many fans over the years. In case you have an issue, you can get an answer pretty fast at the official public forum.

Hugo maintains a large collection of themes. Those are not official projects. Most of them are created by Hugo developers from all over the world. Offered on MIT license - free to use and modify. There is a variety of categories to explore: simple blogs, documentation, landing pages, resume, and many more.

Showcase

How to get started?

Installation depends on the operating system you use, so go and check the installing docs. You don't need to have installed Go to use Hugo.

Once you have Hugo installed, you can run:

hugo new site my-hugo-website

Now you can choose a theme or create a new one.

hugo new theme my-theme

To add content, run:

hugo new posts/hello-world.md

To start development server, run:

hugo server -D

Your development environment will be available at http://localhost:1313/ .

Conclusion

Hugo might feel a little bit old-fashioned for those of you who like to use modern JS frameworks like React, Vue, or Svelte. But Hugo's age is its strength as well. Battle-tested on many big projects by well-known companies gives you the confidence it won't disappear tomorrow.