Posts Tags Categories About Authors

Starting a Hugo website

Foxdie  included in  category Web Design and series sticky-post
     693 words   4 minutes 
/first-post/hugo.webp
Series - sticky-post

https://gohugo.io/getting-started/installing

/first-post/images/hugo1.png

Add Hugo to your Windows PATH settings:

/first-post/images/hugo2.png

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

/first-post/images/hugo3.png

If you do, then the installation is complete.

1
2

cd C:\Hugo\Sites
hugo new site my_blog

You should now have a directory at \Sites\my_blog

/first-post/images/hugo4.png

https://hugodoit.pages.dev/theme-documentation-basics

Download the latest release and extract it in the themes directory. Or,

clone this repository to the themes directory:

1

git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt

or using Github Desktop:

/first-post/images/hugo5.png

The following is a basic configuration for the DoIt theme, by modifying config.toml in \Sites\my_blog

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

baseURL = "http://example.org/"
# [en, zh-cn, fr, ...] determines default content language
defaultContentLanguage = "en"
# language code
languageCode = "en"
title = "My New Hugo Site"

# Change the default theme to be use when building the site with Hugo
theme = "DoIt"

[params]
  # DoIt theme version
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

Create Your First Post

1
2

cd C:\Hugo\Sites\my_blog
hugo new posts/first_post.md

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.

1

 hugo serve

It is highly recommended that you add --disableFastRender parameter to hugo server command for the live preview of the page you are editing.

1

hugo serve --disableFastRender

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

Note

There are three ways to reference local resources such as images and music:

  1. 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.
  2. 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.
  3. 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.

Info

  • 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.

Updated on 2021-11-20
 tech, hugo
Back | Home