Set the ground work for the rest of the series by setting up a Hugo site and learning some of the conventions.
Hugo installed
Familiarity with HTML/CSS, command line usage, some programming knowledge
Git (for installing themes and code-along repositories)
Creating a new Hugo project
Understanding how Hugo is structured
More Hugo conventions for your project
Basic Hugo command line options
Hugo is an extremely fast, conventions-based static site generator (SSG) framework. What sets it apart from other SSGs is its use of the Go language for processing, giving it unparalleled speed compared to other options.
Also, because it’s heavily conventions-based, you’ll often need to follow strict design patterns to use the framework properly. One particular example is Hugo’s strict separation of layouts and content. Adding HTML pages, writing all your content in them, and directly linking to them simply won’t work in Hugo. Although this requires you to do some initial learning, it ensures you are sticking to consistent design patterns.
This first Hugo tutorial should give you a feel for how things work before diving in deeper. Let’s understand the foundations by creating a project and looking at typical Hugo structure.
If you’ve got Hugo installed (installation docs here if not), let’s first start a basic project and dive in:
In your preferred terminal, navigate to where you want to be and create a project. Feel free to use this command and modify it as needed:
hugo new site my-hugo-site
If you accidentally blinked, you probably missed Hugo in action. It’s not an error - it really is that fast!
Now, open your Hugo project in your favorite code editor (such as VS Code) and inspect the contents:
As you can see, with all folders expanded, there is almost nothing in the project. Let’s fix that.
Inside the layouts
folder, add an index.html
page with something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hugo | Home</title>
</head>
<body>
<h1>Welcome to Hugo!</h1>
<p>Hugo is the world’s fastest framework for building websites!</p>
</body>
</html>
Now you can run the server (hugo -D server
) to see the content at localhost:1313.
Here’s a short reference for the purpose of each folder/file in Hugo’s structure.
content
folder live here. There are some strict conventions to get your head around, but we’ll get to that later.hugo new site <site name>
hugo -D server
(-D
means drafts will be visible)hugo
orhugo -D
(with drafts)This is a lot of information to consume in one sitting, so in the next lessons we’ll put it into practice. Feel free to play around with this basic project. In the next lesson we will deal with a pre-built example project with the building blocks of Hugo pages