What is Hugo and how does it work?


If you plan to create a simple, content-driven website, you probably don’t want to spend too much time coding it. This can be the case if you are creating a business site, a blog or a personal portfolio.

Static site generators target these types of scenarios. They let you create a website that lets you focus on your content and its design.

Hugo is an example of a static site generator. It supports themes, authoring in Markdown, and other goodies.

What is Hugo?

Hugo is a static site builder that lets you create a website with little to no code. Static site builders usually allow you to write your content in a simple markup language, like Markdown.

The static site builder then converts your content into static HTML files. It applies any templates or styles to your pages before serving them to the user.

Using Hugo, you can choose from a library of themes and site designs that other people have already built. Once you’ve uploaded a theme, you can start writing your content. Hugo accepts different formats for you to write your content.

What are Hugo themes?

You can check the list of Hugo themes to find one to start with. You can also select a theme based on different categories and filter designs specially made for blogs, portfolios, etc.

You can click on a topic to see more information. Here you can download the theme to start working on it. You can also preview what the theme would look like once you deploy it.


Most themes will have dummy data as placeholders. When you edit the theme, you can change these details as you see fit.

What is the structure of a Hugo site?

Using a theme allows you to add your content with little to no code changes. However, you can still dive into the code if you want to make changes to its structure. Hugo uses Go templates to use variables and placeholders in your HTML files.

Creating a Hugo project on your computer will automatically generate the default files needed for the project.

The main components of the project include:

  • archetypes: This is where you can store templates that can define any formatting or additional data for each page. When you create a new page, it will be based on a template.
  • assets: This is where you can store all assets, such as your CSS stylesheet files.
  • content: This is where you can store your website content. You can store each page in a separate file. For example, if you’re creating a blog, you’ll use a Markdown file for each post.
  • layouts: Here you can store reusable short snippets of HTML code, called shortcodes. You can use them in your content files.
  • public: Contains files and folders that you can upload and use on a web server when hosting your site.
  • themes: Any themes you have downloaded from Hugo will appear here.

What are the benefits of using Hugo?

Since Hugo is quite lightweight and generates static web pages, your final website and its content can load very quickly. This means that users will have little waiting time while browsing your site.

All content is static and does not change once the user views the page. Therefore, you don’t have to worry about constant requests to a server. You also don’t have to worry about databases or dynamic data accounting.

And you don’t need advanced programming skills to be able to work with a Hugo site. However, since you have direct access to the code, you can fully customize it however you want if you wish.

Use static site builders to create websites

Hugo is a great static site builder that converts your content into plain HTML files. You can use a wide range of themes and easily preview your site during the design process.

Hugo provides reusable components and a convenient standard file structure, among other benefits. But Hugo is only an option. You should keep looking for other static site builders that you can use to build a website.

Image of a person using a computer with images on the screen.

11 Open Source Static Site Builders You Can Use to Build Your Website

Read more

About the Author


Comments are closed.