Creating and deploying a Hugo site

Published on September 21, 2017

hugo, markdown

Step 1: Install Hugo

brew install hugo

To verify your new install:

hugo version

Step 2: Create a New Site

hugo new site quickstart2

The above will create a new Hugo site in a folder named quickstart.

Step 3: Create git repo

See themes.gohugo.io for a list of themes to consider. This quickstart uses the hugo-theme-cactus-plus theme.

cd quickstart2;
git init;
git add .
git commit -m "first commit"

Step 4: Add Some Content

Download and extract https://github.com/nodejh/hugo-theme-cactus-plus/archive/master.zip to themes/hugo-theme-cactus-plus. You can add this using git submodule, but this can be unreliable in the deployment process.

Step 5: Add Some Content

hugo new posts/my-first-post.md

Edit the newly created content file if you want. Now, start the Hugo server with drafts enabled:

hugo server -D

Step 5: Customize the Theme

Your new site already looks great, but you will want to tweak it a little before you release it to the public.

Site Configuration Open up config.toml in a text editor:

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-theme-cactus-plus"

Replace the title above with something more personal. Also, if you already have a domain ready, set the baseURL. Note that this value is not needed when running the local development server.

Step 6: Push code to github

git remote add origin https://github.com/jaffamonkey/quickstart2
git remote -v
git push -u origin master

Step 7: Add Netlify config (netlify.toml)

[context.production.environment]
  HUGO_VERSION = "0.24.1"
  
[build]
  command = "hugo"
  publish = "public"