Featured image of post Create a Static Site With Hugo

Create a Static Site With Hugo

In this tutorial I'll describe how I created this site with hugo without any prior experience

Install Hugo

Binary (Cross-platform)

Download the appropriate version for your platform from Hugo Releases. Once downloaded, the binary can be run from anywhere. You donโ€™t need to install it into a global location. This works well for shared hosts and other systems where you donโ€™t have a privileged account.

Ideally, you should install it somewhere in your PATH for easy use. /usr/local/bin is the most probable location.

Homebrew (macOS)

If you are on macOS and using Homebrew, you can install Hugo with the following one-liner:

brew install hugo

Chocolatey (Windows)

If you are on a Windows machine and use Chocolatey for package management, you can install Hugo with the following one-liner:

choco install hugo -confirm

I am using arch linux, so I installed hugo with sudo pacman -Syyu hugo

Create a Project

Fire up your terminal, and type this command to create a hugo project:

hugo new site yourSite

Setup Theme

I used Stack theme to built this site, so in this tutorial I’ll show you how to setup the stack theme.

Install Theme

You can download this theme using Git, execute the following command under your Hugo site folder:

git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

Theme Configuration

Copy the themes/hugo-theme-stack/exampleSite/config.yaml file and place it under your Hugo site folder. Now open that file with your favourite code editor.

My config.yaml

  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
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
baseurl: https://b31ngd3v.eu.org
languageCode: en-us
theme: hugo-theme-stack
paginate: 5
title: Pramurta Sinha (b31ngd3v)

googleAnalytics: G-E98X4P8TJ2

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
DefaultContentLanguage: en

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false

permalinks:
  post: /p/:slug/
  page: /:slug/

params:
  mainSections:
    - post
  featuredImageField: image
  rssFullContent: true

  footer:
    since: 2022

  dateFormat:
    published: Jan 02, 2006
    lastUpdated: Jan 02, 2006 15:04 MST

  sidebar:
    emoji: ๐Ÿ‡ฎ๐Ÿ‡ณ
    subtitle: Developer, Cyber Security Enthusiast, Student
    avatar:
      enabled: true
      local: true
      src: avatar.jpg

  article:
    math: false
    toc: true
    readingTime: true
    license:
      enabled: true
      default: Licensed under CC BY-NC-SA 4.0

  comments:
    enabled: true
    provider: utterances

    utterances:
      repo: b31ngd3v/b31ngd3v.github.io
      issueTerm: title

  widgets:
    homepage:
      - type: search
      - type: archives
        params:
          limit: 5
      - type: tag-cloud
        params:
          limit: 10
    page:
      - type: toc

  opengraph:
    twitter:
      # Your Twitter username
      site: b31ngdev

      # Available values: summary, summary_large_image
      card: summary_large_image

  defaultImage:
    opengraph:
      enabled: false
      local: false
      src:

  colorScheme:
    # Display toggle
    toggle: true

    # Available values: auto, light, dark
    default: dark

  imageProcessing:
    cover:
      enabled: true
    content:
      enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
  main:
    - identifier: home
      name: Home
      url: /
      weight: -100
      params:
        newTab: false
        icon: home

  social:
    - identifier: github
      name: GitHub
      url: https://github.com/b31ngd3v
      params:
        icon: brand-github

    - identifier: twitter
      name: Twitter
      url: https://twitter.com/b31ngdev
      params:
        icon: brand-twitter

related:
  includeNewer: true
  threshold: 60
  toLower: false
  indices:
    - name: tags
      weight: 100

    - name: categories
      weight: 200

markup:
  goldmark:
    renderer:
      ## Set to true if you have HTML content inside Markdown
      unsafe: false
  tableOfContents:
    endLevel: 4
    ordered: true
    startLevel: 2
  highlight:
    noClasses: false
    codeFences: true
    guessSyntax: true
    lineNoStart: 1
    lineNos: true
    lineNumbersInTable: true
    tabWidth: 4

Create a New Post

Fire up your terminal, and type this command to create a post:

hugo new post/create-a-static-site-with-hugo.md

Build

Just run hugo in the terminal from the project folder to build the site. The compiled HTML, CSS & JS will be stored at the pubic folder.

Tip

Have a look at the demo content folder (themes/hugo-theme-stack/exampleSite/content). It helped me a lot and will help you too.

Useful Resources

Source code of this site: https://github.com/b31ngd3v/b31ngd3v.github.io
Stack Theme Documentation: https://docs.stack.jimmycai.com/
Hugo Documentation: https://gohugo.io/documentation/
A Video Tutorial from Chris Stayte ๐Ÿ‘‡


Built with Hugo
Theme Stack designed by Jimmy