Starting a Hugo website

Hugo
Installation
Install Hugo on Windows:
https://gohugo.io/getting-started/installing

Add Hugo to your Windows PATH settings:

Verify the Executable:
At the prompt, type hugo help
and press the Enter key. You should see output that starts with:

If you do, then the installation is complete.
Create a project:
|
|
You should now have a directory at \Sites\my_blog

Theme
https://hugodoit.pages.dev/theme-documentation-basics
Install the Theme
Download the latest release and extract it in the themes
directory. Or,
clone this repository to the themes directory:
|
|
or using Github Desktop:

Basic Configuration
The following is a basic configuration for the DoIt theme, by modifying config.toml
in \Sites\my_blog
|
|
Create Your First Post
|
|
By default all posts and pages are created as a draft. If you want to render these pages, remove the property draft: true
from the metadata, set the property draft: false
or add -D
or --buildDrafts
parameter to hugo
command.
Launching the Website Locally
|
|
It is highly recommended that you add --disableFastRender
parameter to hugo server
command for the live preview of the page you are editing.
|
|
Posts Structure
A few suggestions to help you get a good looking site quickly:
-
Keep post pages in the
content/posts
directory, for example:content/posts/my-first-post.md
-
Keep other pages in the content directory, for example:
content/about.md
-
Local resources organization
There are three ways to reference local resources such as images and music:
- Using page resources in page bundles. You can reference page resources by the value for Resources.GetMatch or the filepath of the resource relative to the page directory directly.
- Store resources in the assets directory, which is /assets by default. The filepath of the resource to reference in the post is relative to the assets directory.
- Store resources in the static directory, which is /static by default. The filepath of the resource to reference in the post is relative to the static directory. The priority of references is also in the above order.
There are many places in the theme where the above local resource references can be used, such as links, images, image shortcode, music shortcode and some params in the front matter.
-
I’m still learning Hugo and its features in order to get the most out of it, so for now, you can check out these resources to fully understand how to build a Hugo website.
-
This tutorial has covered the majority of how to use the
DoIt
theme, which is used on my website. You might also want to look at these tests for more detailed examples on various cases. -
I’ll update this article once I’m confident enough to deliver its content, so that I can share my experience working with Hugo.