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
|
|
|
|
---
|
|
|
|
|
|
2014-12-04 16:26:12 +00:00
|
|
|
|
_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
|
2014-05-27 22:32:57 +00:00
|
|
|
|
proceeding._
|
|
|
|
|
|
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
|
2013-10-18 02:53:04 +00:00
|
|
|
|
appropriate version for your os and architecture.
|
|
|
|
|
|
|
|
|
|
Save it somewhere specific as we will be using it in the next step.
|
|
|
|
|
|
2014-08-31 11:08:36 +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
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
Hugo has the ability to create a skeleton site.
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
hugo new site /path/to/site
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +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
|
|
|
|
|
2014-05-27 22:32:57 +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
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
Hugo also has the ability to create content for you.
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
hugo new about.md
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
A new file is now created in `content/` with the following contents
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
+++
|
|
|
|
|
draft = true
|
|
|
|
|
title = "about"
|
|
|
|
|
date = 2014-05-20T10:04:31Z
|
|
|
|
|
+++
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
Notice the date is automatically set to the moment you created the content.
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-08-31 11:08:36 +00:00
|
|
|
|
Place some content in this file below the `+++` in the Markdown format.
|
2014-05-27 22:32:57 +00:00
|
|
|
|
|
|
|
|
|
For example you could put this
|
|
|
|
|
|
|
|
|
|
## A headline
|
|
|
|
|
|
|
|
|
|
Some Content
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
hugo new post/first.md
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
2014-10-07 23:52:58 +00:00
|
|
|
|
Hugo has rich theme support and a growing set of themes to choose from:
|
2014-05-27 22:32:57 +00:00
|
|
|
|
|
2014-12-04 16:26:12 +00:00
|
|
|
|
```bash
|
|
|
|
|
git clone --recursive https://github.com/spf13/hugoThemes themes
|
|
|
|
|
```
|
2014-05-27 22:32:57 +00:00
|
|
|
|
|
|
|
|
|
## Step 5. Run Hugo
|
2013-10-18 02:53:04 +00:00
|
|
|
|
|
2014-08-31 11:08:36 +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
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
hugo server --theme=hyde --buildDrafts
|
|
|
|
|
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
|
|
|
|
|
Press ctrl+c to stop
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
hugo help
|
|
|
|
|
|
2014-08-31 11:08:36 +00:00
|
|
|
|
To learn about the server options:
|
2014-05-27 22:32:57 +00:00
|
|
|
|
|
|
|
|
|
hugo help server
|
|
|
|
|
|
|
|
|
|
## 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.
|
|
|
|
|
|
|
|
|
|
Stop the Hugo process by hitting ctrl+c. Then run the following:
|
|
|
|
|
|
|
|
|
|
hugo server --theme=hyde --buildDrafts --watch
|
|
|
|
|
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
|
|
|
|
|
Press ctrl+c to stop
|
2014-08-29 23:38:32 +00:00
|
|
|
|
|
2014-05-27 22:32:57 +00:00
|
|
|
|
Open your [favorite editor](http://vim.spf13.com), edit and save your content and watch as Hugo rebuilds and reloads automatically.
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
2014-08-29 23:38:32 +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/)
|