2013-10-18 02:53:04 +00:00
---
2014-05-29 22:42:05 +00:00
date: 2013-07-01
linktitle: Quickstart
2014-04-23 07:00:11 +00:00
menu:
main:
2014-05-29 22:42:05 +00:00
parent: getting started
next: /overview/installing
prev: /overview/introduction
title: Hugo Quickstart Guide
weight: 10
2013-10-18 02:53:04 +00:00
---
2015-01-09 18:51:15 +00:00
> _Note: This quickstart depends on features introduced in Hugo v0.11. If you have an earlier version of Hugo, you will need to [upgrade](/overview/installing/) before proceeding._
2014-05-27 22:32:57 +00:00
2015-01-27 22:14:19 +00:00
{{% youtube w7Ft2ymGmfc %}}
2013-10-18 02:53:04 +00:00
## Step 1. Install Hugo
2014-08-31 11:08:36 +00:00
Go to [Hugo Releases ](https://github.com/spf13/hugo/releases ) and download the
2015-01-09 18:51:15 +00:00
appropriate version for your OS and architecture.
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
Save the main executable as `hugo` (or `hugo.exe` on Windows) somewhere in your `PATH` as we will be using it in the next step.
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
More complete instructions are available at [Installing Hugo ](/overview/installing/ ).
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
## Step 2. Have Hugo Create a site for you
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
Hugo has the ability to create a skeleton site:
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
$ hugo new site /path/to/site
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
For the rest of the operations, we will be executing all commands from within the site directory.
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
$ cd /path/to/site
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
The new site will have the following structure
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
▸ archetypes/
▸ content/
▸ layouts/
▸ static/
config.toml
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
Currently the site doesn’ t have any content, nor is it configured.
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
## Step 3. Create Some Content
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
Hugo also has the ability to create a skeleton content page:
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
$ hugo new about.md
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
A new file is now created in `content/` with the following contents:
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
```
+++
date = "2015-01-08T08:36:54-07:00"
draft = true
title = "about"
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
+++
```
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
Notice the date is automatically set to the moment you created the content.
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
Place some content in Markdown format below the `+++` in this file.
For example:
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
```markdown
## A headline
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
Some Content
```
2014-05-27 22:32:57 +00:00
2014-08-31 11:08:36 +00:00
For fun, let’ s create another piece of content and place some Markdown in it as well.
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
$ hugo new post/first.md
2014-05-27 22:32:57 +00:00
The new file is located at `content/post/first.md`
We still lack any templates to tell us how to display the content.
## Step 4. Install some themes
2015-02-09 02:42:59 +00:00
Hugo has rich theme support and a growing set of themes to choose from.
To install all of the available Hugo themes, simply clone the entire **hugoThemes** repository from within your working directory:
2014-05-27 22:32:57 +00:00
2014-12-04 16:26:12 +00:00
```bash
2015-01-09 18:51:15 +00:00
$ git clone --recursive https://github.com/spf13/hugoThemes themes
2014-12-04 16:26:12 +00:00
```
2014-05-27 22:32:57 +00:00
## Step 5. Run Hugo
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
Hugo contains its own high-performance web server. Simply run `hugo
2014-05-27 22:32:57 +00:00
server` and Hugo will find an available port and run a server with
2014-08-31 11:08:36 +00:00
your content:
2013-10-18 02:53:04 +00:00
2015-01-09 18:51:15 +00:00
$ hugo server --theme=hyde --buildDrafts
2014-05-27 22:32:57 +00:00
2 pages created
0 tags created
0 categories created
in 5 ms
Serving pages from exampleHugoSite/public
Web Server is available at http://localhost:1313
2015-01-29 21:19:12 +00:00
Press Ctrl+C to stop
2014-05-27 22:32:57 +00:00
2014-08-31 11:08:36 +00:00
We specified two options here:
2014-06-03 14:18:55 +00:00
2014-08-31 11:08:36 +00:00
* `--theme` to pick which theme;
* `--buildDrafts` because we want to display our content, both set to draft status.
2014-05-27 22:32:57 +00:00
2014-08-31 11:08:36 +00:00
To learn about what other options hugo has, run:
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
$ hugo help
2014-05-27 22:32:57 +00:00
2014-08-31 11:08:36 +00:00
To learn about the server options:
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
$ hugo help server
2014-05-27 22:32:57 +00:00
## Step 6. Edit Content
Not only can Hugo run a server, but it can also watch your files for
changes and automatically rebuild your site. Hugo will then
communicate with your browser and automatically reload any open page.
This even works in mobile browsers.
2015-01-09 18:51:15 +00:00
Stop the Hugo process by hitting < kbd > Ctrl< / kbd > +< kbd > C< / kbd > . Then run the following:
2014-05-27 22:32:57 +00:00
2015-01-09 18:51:15 +00:00
$ hugo server --theme=hyde --buildDrafts --watch
2014-05-27 22:32:57 +00:00
2 pages created
0 tags created
0 categories created
in 5 ms
Watching for changes in exampleHugoSite/content
Serving pages from exampleHugoSite/public
Web Server is available at http://localhost:1313
2015-01-29 21:19:12 +00:00
Press Ctrl+C to stop
2014-08-29 23:38:32 +00:00
2015-01-28 02:17:09 +00:00
Open your [favorite editor ](http://vim.spf13.com/ ), edit and save your content, and watch as Hugo rebuilds and reloads automatically.
2014-05-27 22:32:57 +00:00
It’ s especially productive to leave a browser open on a second monitor
and just glance at it whenever you save. You don’ t even need to tab to
2014-08-31 11:08:36 +00:00
your browser. Hugo is so fast that the new site will be there before
2014-05-27 22:32:57 +00:00
you can look at the browser in most cases.
2015-01-09 18:51:15 +00:00
Change and save this file. Notice what happened in your terminal:
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
Change detected, rebuilding site
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
2 pages created
0 tags created
0 categories created
in 5 ms
2013-10-18 02:53:04 +00:00
2014-05-27 22:32:57 +00:00
## Step 7. Have fun
2013-10-18 02:53:04 +00:00
The best way to learn something is to play with it.
Things to try:
* Add a [new content file ](/content/organization/ )
* Create a [new section ](/content/sections/ )
* Modify [a template ](/layout/templates/ )
2014-08-31 11:08:36 +00:00
* Create content with [TOML front matter ](/content/front-matter/ )
2013-10-18 02:53:04 +00:00
* Define your own field in [front matter ](/content/front-matter/ )
* Display that [field in the template ](/layout/variables/ )
* Create a [new content type ](/content/types/ )