Hugo Starter

I originally built most of them many years ago using Umbraco but I didn’t update them very much and the longer it went on the harder it was to update to a new version and so they’d gone a bit stale. Also I wanted to make use of cheaper/alternative, non .NET hosting. I’d been contemplating switching to a static site generator for a long time. Having done a bit of investigation into a few options; Jekyll, Gatsby and Next.js I decided to use Hugo for some of my sites. Mostly for simplicity and speed. Despite being a profesional technologist since last century, I’m lazy and don’t have the time I used to for projects so just wanted something that would get results quick!

Anyway, it is very quick, a basic site up in I about 5 minutes!

Dependencies

I’m currently on Windows (though I use MacOS and Linux) so I’ll be using Chocolatey to install the dependencies:

1
2
3

choco install hugo-extended
choco install golang
choco install sass

If you’re on a different platform check installation for details.

Create a site

As I’ve already created a GitHub repo and checked it out, I just want to create my site in the current directory:

1

hugo new site . -f

-f will force it to a non empty folder if needed, if the repo creation has a template README.md for example.

Just run hugo --help to show additional help.

A theme

We will need a theme of sorts…

1

hugo new theme my-theme

As the output says you then new to add that into your hugo.toml file. This file is the configuration for your site. Just add this line at the bottom:

1

theme = 'my-theme'

Let’s have a gander

Technically you only need -D to show draft files, but I’ve found the others can be helpful. I have two tabs in my terminal open, one for this call:

1

hugo server -D --disableFastRender --printI18nWarnings --printMemoryUsage --printPathWarnings --printUnusedTemplates --gc --cleanDestinationDir

It’ll run and stay open, so the other is for other commands.

You’ll get an output from that command, that among other things will have a section like this:

1
2
3

Environment: "development"
Serving pages from disk
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

So click on the link or copy and paste into your browser of choice and have a look.

We have a website! Plain, but still a website.

Our own content…

There will be some default posts in there which we’ll delete at some point, so lets go ahead and create our own:

1

hugo new content posts\hugo-starter.md

And as if by magic if you go back to your browser a new piece of content will appear! Easy! You can now edit the markdown till your hearts content.

Files to ignore

As I suspect you’re not using SVN you’ll want a .gitignore file, here’s a basic one to get you started:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

## Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

## Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

## Temporary lock file while building
/.hugo_build.lock

Check that in and you’ve got the base for a new static site.

Hugo Tech