Hugo — A Static Website Generator Absolute Basic

Hugo Official Website/ https://gohugo.io/

I was thinking about building a website by myself. This article will show you how to build a website from scratch using Hugo, a static website generator written in Go. However, don’t worry. You don’t need to know the Go programing language to use Hugo.

I’m using MacBookPro, so this tutorial is for macOS only. You need to install Go first. You could check whether you have it installed or not by opening the terminal and type:

>> go env

This is the result from my laptop:

GOARCH="amd64"
GOBIN=""
GOCACHE="/Users/username/Library/Caches/go-build"
GOEXE=""
GOFLAGS=""
GOHOSTARCH="amd64"
GOHOSTOS="darwin"
GOOS="darwin"
GOPATH="/Users/username/gocode"
GOPROXY=""
GORACE=""
GOROOT="/usr/local/Cellar/go/1.12.4/libexec"
GOTMPDIR=""
GOTOOLDIR="/usr/local/Cellar/go/1.12.4/libexec/pkg/tool/darwin_amd64"
GCCGO="gccgo"
CC="clang"
CXX="clang++"
CGO_ENABLED="1"
GOMOD=""
CGO_CFLAGS="-g -O2"
CGO_CPPFLAGS=""
CGO_CXXFLAGS="-g -O2"
CGO_FFLAGS="-g -O2"
CGO_LDFLAGS="-g -O2"
PKG_CONFIG="pkg-config"
GOGCCFLAGS="-fPIC -m64 -pthread -fno-caret-diagnostics -Qunused-arguments -fmessage-length=0 -fdebug-prefix-map=/var/folders/1b/ssnfxfxj06l049m7jwjjjl1w0000gn/T/go-build545771970=/tmp/go-build -gno-record-gcc-switches -fno-common"

If you didn’t have Go installed, then you need to :

>> brew install golang 

That’s it! Now, you could check what is your Go version by this command:

>> go version

For me, I have:

go version go1.12.4 darwin/amd64

Now it’s time to install Hugo:

>> brew install hugo

After this, you could check the version:

>> hugo version

My result is:

Hugo Static Site Generator v0.55.4/extended darwin/amd64 BuildDate: unknown

Show the location of the Hugo executable by typing:

>> which hugo

You should have this:

/usr/local/bin/hugo

Now it’s time to build our website. First thing first, we need to create a folder:

>> mkdir my-blog

You could name whatever you like by replacing “my-blog” to yours. Then we need to go inside that folder and start to build the website:

>> cd my-blog
>> hugo new site Tech-blog-101

Of course, you could replace “Tech-blog-101” by your blog name. Then, you’ll see a message like this:

Congratulations! Your new Hugo site is created in /Users/username/Desktop/Tech-blog-101.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.

Your very first blog now was created! There were several files and folders:

Tech-blog-101
   .
   ├── archetypes
   │   └── default.md
   ├── config.toml
   ├── content
   ├── data
   ├── layouts
   ├── static
   └── themes

Last step:

>> cd Tech-blog-101
>> hugo server

Here is the result:

Building sites … WARN 2019/05/03 23:06:20 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/05/03 23:06:20 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/05/03 23:06:20 found no layout file for "HTML" for "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
+------------------+----+
  Pages            |  3
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0
Total in 20 ms
Watching for changes in /Users/username/Desktop/Tech-blog-101/{content,data,layouts,static}
Watching for config changes in /Users/username/Desktop/Tech-blog-101/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Now we could open the browser and then type localhost:1313 into the address bar. You’ll see a blank webpage. That is because we didn’t put any content and chose a theme for our newly created website. It just proved we had it running successfully.

Any feedback is welcome.