6.2 KiB
title, description, categories, keywords, params, weight, aliases
| title | description | categories | keywords | params | weight | aliases | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Quick start | Create your first Hugo project. |
|
10 |
|
In this tutorial you will:
- Create a project
- Add content
- Configure the project
- Publish the project
Prerequisites
Before you begin this tutorial you must:
- Install Hugo (any edition, {{% param "minVersion" %}} or later)
- Install Git
You must also be comfortable working from the command line.
Create a project
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.
Verify that you have installed Hugo {{% param "minVersion" %}} or later.
hugo version
Run these commands to create a Hugo project with the Ananke theme. The next section provides an explanation of each command.
hugo new project quickstart
cd quickstart
git init
git submodule add https://github.com/gohugo-ananke/ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server
View your project at the URL displayed in your terminal. Press Ctrl + C to stop Hugo's development server.
Explanation of commands
Create the project skeleton for your project in the quickstart directory.
hugo new project 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/gohugo-ananke/ananke themes/ananke
Append a line to your project configuration file, indicating the current theme.
echo "theme = 'ananke'" >> hugo.toml
Start Hugo's development server.
hugo server
Press Ctrl + C to stop Hugo's development server.
Add content
Add a new page to your project.
hugo new content 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 = 2024-01-14T07:07:07+01: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 project. 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 = 2024-01-14T07:07:07+01: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. You can run either of the following commands to include draft content.
hugo server --buildDrafts
hugo server -D
View your project at the URL displayed in your terminal. Keep the development server running as you continue to add and change content.
When satisfied with your new content, set the front matter draft parameter to false.
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.
Configure the project
With your editor, open the project configuration file in the root of your project directory:
baseURL = 'https://example.org/'
locale = 'en-us'
title = 'My New Hugo Project'
theme = 'ananke'
Make the following changes:
- Set the
baseURLfor your project. This value must begin with the protocol and end with a slash, as shown above. - Set the
localeto your locale. - Set the
titlefor your project.
Start Hugo's development server to see your changes, remembering to include draft content.
hugo server -D
Note
Now that you have the Ananke theme installed, check out their documentation and demonstration site to learn how to configure and customize it.
Publish the project
In this step you will publish your project, but you will not deploy it.
When you publish your project, Hugo renders all build artifacts to the public directory in the root of your project. This includes the HTML files for every site, along with assets such as images, CSS, and JavaScript. The command is simple.
hugo
To learn how to deploy your project, see the host and deploy 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.