Start my Hugo Site
- Open terminal.
- Change directory to desired location (e.g., to go to desktop, type
cd ~/Desktop
) - Hugo build command:
Hugo new site [sitename]
- 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:
git init
2. Config.toml file
Make changes to the config.toml file in VS Code.
- Change the baseURL to your URL
- Change Title to your Title
- 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
- Under the static folder, add a new folder called “css”
- Add a file called “style.css”
4. Add a head doc
- Under the layouts folder, add a new folder called “partials”
- Add a file called “head.html”
- 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
- Under the layouts folder, add a new folder called “_default”
- Add a file called “baseof.html”
- 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
- Publish to GitHub
- 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