Hugo Setup

Start my Hugo Site

  1. Open terminal.
  2. Change directory to desired location (e.g., to go to desktop, type cd ~/Desktop)
  3. Hugo build command: Hugo new site [sitename]
  4. Open Hugo in VS Code

Note: This guide assumes you’ve already installed Hugo globally on your machine.

Initial Customizations

1. Initial repo

Open the terminal inside VSCode and type the following command to initialize a local repo:

Terminal window
git init

2. Config.toml file

Make changes to the config.toml file in VS Code.

  1. Change the baseURL to your URL
  2. Change Title to your Title
  3. Add this code so I can use markdown like I’m used to…
[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

3. Add a css doc

  1. Under the static folder, add a new folder called “css”
  2. Add a file called “style.css”

4. Add a head doc

  1. Under the layouts folder, add a new folder called “partials”
  2. Add a file called “head.html”
  3. Add the following code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="/css/style.css" />
{{ $title := .Site.Title }}
<title>{{ $title }}</title>
</head>

5. Add a baseof doc

  1. Under the layouts folder, add a new folder called “_default”
  2. Add a file called “baseof.html”
  3. Add the following code
<!DOCTYPE html>
<html lang="en">
{{ partial "head.html" . }}


<body>
    <div class="container">
        <main id="main">
            {{ block "main" . }}{{ end }}
        </main>
    </div>
</body>
</html>

6. Create Index.html file

Under the Layouts folder, add an index.html file. Add basic content.

7. Add content page

Add the following to the terminal

Hugo new content/[filename].md

This adds a blank content page under the content folder.

8. Commit all changes to local repo

Connect online

  1. Publish to GitHub
  2. Connect to netlify
    • Click “New Site from Git” button under sites.
    • Login to Github and find correct site.
    • build command: hugo —gc —minify
    • publish directory: public
    • click Deploy site

Thread on autopublishing with github

Post about autopublishing with netlify and IFTT