686c7b6eb ci(Netlify): specify `HUGO_VERSION` environment variable once da99a356f fix: change heading level e57da3f00 Update taxonomy methods 746172490 Update description of rendered breadcrumb navigation 6bc52fd40 Clarify term dab07dcb0 Fix typo e50fa452a Fix typo 6c1ea83c2 Update template overview page a5dc97845 Clarify the append function a135e52a0 Update GitHub hosting instructions a51bf9f4f Update sections page ed35fc6c4 Update archetypes and glossary 1a4522b3e Format examples a70f20094 Use "hugo new content" to create content 673846ff9 Remove comment b7febf0c5 Fix link 6f6fe2133 Miscellaneous edits 99227dd18 Remove lookup order table from output formats page bc8870657 tools/editors: Add Prettier Plugin for Go Templates 157b169eb Update docs.yaml 1c8f514e0 Update cond function e5f1f8113 Add assumptions to taxonomy and term template lookup order examples 475b406e2 Update postprocess 2d6cb8dfc glossary: Update content type 03b514bac Add descriptions to template lookup order example sections 06678f919 glossary: Fix broken link 4cd505612 Simplify news listing fadb980db Update glossary of terms 491bacd78 Change order of example sections for template lookup order 04b8f39ec Create glossary of terms 12e896bc0 Remove reference to asciidoctor-rouge extension 055f7bb37 Insert missing words 8cd6ac387 Miscellaneous edits 2cbe17f41 Update configuration.md 529615373 Update data-templates.md 853154e65 Update theme 45f08627a resources.getRemote: Fix definition list 29a51dac1 Update docshelper 3bdfe88c6 Remove link to gitter from site footer cacd0e461 Use "map" instead of "dictionary" 704dd5da6 Document the transform.Remarshal template function e8d744951 Populate news section via GitHub releases API 3ff1118c7 Replace docs.json with docs.yaml 7726bbcac Use docs.json to generate default config throughout the site 57dca93df Use docs.json to generate default config for related content 74d5082c7 Add some .RenderShortcodes docs cf5ab5062 netlify: Hugo 0.117.0 420f7aa69 Add all config to docshelper.json git-subtree-dir: docs git-subtree-split: 686c7b6eb182ed335dc94b3a0b80c564f7658380
6.7 KiB
title | description | categories | keywords | menu | weight | toc | aliases | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Quick start | Learn to create a Hugo site in minutes. |
|
|
|
20 | true |
|
In this tutorial you will:
- Create a site
- Add content
- Configure the site
- Publish the site
Prerequisites
Before you begin this tutorial you must:
- Install Hugo (extended edition, v0.112.0 or later)
- Install Git
You must also be comfortable working from the command line.
Create a site
Commands
{{% note %}} If you are a Windows user:
- Do not use the Command Prompt
- Do not use Windows PowerShell
- Run these commands from PowerShell or a Linux terminal such as WSL or Git Bash
PowerShell and Windows PowerShell are different applications.
{{% /note %}}
Run these commands to create a Hugo site with the Ananke theme. The next section provides an explanation of each command.
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server
View your site at the URL displayed in your terminal. Press Ctrl + C
to stop Hugo's development server.
Explanation of commands
Create the directory structure for your project in the quickstart
directory.
hugo new site quickstart
Change the current directory to the root of your project.
cd quickstart
Initialize an empty Git repository in the current directory.
git init
Clone the Ananke theme into the themes
directory, adding it to your project as a Git submodule.
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Append a line to the site configuration file, indicating the current theme.
echo "theme = 'ananke'" >> hugo.toml
Start Hugo's development server to view the site.
hugo server
Press Ctrl + C
to stop Hugo's development server.
Add content
Add a new page to your site.
hugo new content posts/my-first-post.md
Hugo created the file in the content/posts
directory. Open the file with your editor.
---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
Notice the draft
value in the front matter is true
. By default, Hugo does not publish draft content when you build the site. Learn more about draft, future, and expired content.
Add some markdown to the body of the post, but do not change the draft
value.
---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
Save the file, then start Hugo’s development server to view the site. You can run either of the following commands to include draft content.
hugo server --buildDrafts
hugo server -D
View your site at the URL displayed in your terminal. Keep the development server running as you continue to add and change content.
{{% note %}} Hugo's rendering engine conforms to the CommonMark specification for markdown. The CommonMark organization provides a useful live testing tool powered by the reference implementation.
{{% /note %}}
Configure the site
With your editor, open the site configuration file (hugo.toml
) in the root of your project.
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'
Make the following changes:
-
Set the
baseURL
for your production site. This value must begin with the protocol and end with a slash, as shown above. -
Set the
languageCode
to your language and region. -
Set the
title
for your production site.
Start Hugo's development server to see your changes, remembering to include draft content.
hugo server -D
{{% note %}} Most theme authors provide configuration guidelines and options. Make sure to visit your theme's repository or documentation site for details.
The New Dynamic, authors of the Ananke theme, provide documentation for configuration and usage. They also provide a demonstration site.
{{% /note %}}
Publish the site
In this step you will publish your site, but you will not deploy it.
When you publish your site, Hugo creates the entire static site in the public
directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files.
When you publish your site, you typically do not want to include draft, future, or expired content. The command is simple.
hugo
To learn how to deploy your site, see the hosting and deployment section.
Ask for help
Hugo's forum is an active community of users and developers who answer questions, share knowledge, and provide examples. A quick search of over 20,000 topics will often answer your question. Please be sure to read about requesting help before asking your first question.
Other resources
For other resources to help you learn Hugo, including books and video tutorials, see the external learning resources page.