Making a HUGO Website The Full Stack Way pt 1 - Making the Site

This first tutorial in our series is focused on making a HUGO static website. The official quickstart tutorial is an additional excellent resource. Readers solely interested in deployment can skip ahead to part 2.

Installing HUGO

For Linux (Debian or Ubuntu)

You can download the latest HUGO release for your distro and architecture from github

The *.deb can be installed with

$ sudo dpkg -i hugo_extended_0.101.0_Linux-64bit.deb

For MacOSX

Using Homebrew

$ brew install HUGO

Initiating your site locally

# Create a new site base
$ hugo new site my_site_name

# Initialize git repo
$ cd my_site_name

# Add the ANANKE theme
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Setting up .gitignore

Since we are putting HUGO under source control with github, we might want to make sure that we don’t push autogenerated files into source control. Create a .gitignore file in the root directory of your repo

$ touch .gitignore

And place the following into it

# -*- mode: gitignore; -*-

## HUGO ##

# 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

Creating a post

$ hugo new posts/my-blog-post.md

Building static pages and Starting a local Hugo server

# Build static pages
$ hugo -D

# Start a local server on localhost:1313
$ hugo server -D

Check http://localhost:1313/ to see your site rendered in all its glory

Deploying to Netlify

Netlify can host your personal site, keeping the hassle of managing cloud infrastructure to a minimum. The service is “free” and simply setting up an account and adding a netlify.toml to your repo should be enough to get your site on the web.

Forget Netlify, I want to do it myself!

Under the hood, Netlify uses cloud providers on the backend. If your interested in getting started with Cloud, and skipping the middleman, go ahead and…

Read the Next Post -> Deploying to Google Cloud

Tips

• Different HUGO themes place page post content in different folders. Ananke looks for posts in content/posts. Other themes may look in content/blog or some other directly. Look in examples to make sure.

• Images should go into the static/ folder. The markdown code to reference an image in my_site_name/static/images/my_image.png is actually ![My Image](/images/my_image.png) omitting the leading my_site_name/static