TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-10 23:45:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve Quick Start tutorial

Browse Source
This commit is contained in:
Joe Mooring 2022-11-20 11:44:03 -08:00 committed by Bjørn Erik Pedersen
parent 71e81ec5f6
commit 372bf5e88b
1 changed files with 152 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
content/en/getting-started/quick-start.md
View File

@ -1,166 +1,213 @@
--- ---
title: Quick Start title: Quick Start
linktitle: Quick Start linktitle: Quick Start
description: Create a Hugo site using the beautiful Ananke theme. description: Learn to create a Hugo site in minutes.
date: 2013-07-01
publishdate: 2013-07-01
categories: [getting started] categories: [getting started]
keywords: [quick start,usage] keywords: [quick start,usage]
authors: [Shekhar Gulati, Ryan Watters]
menu: menu:
docs: docs:
parent: "getting-started" parent: getting-started
weight: 10 weight: 10
weight: 10 weight: 10
sections_weight: 10
draft: false
aliases: [/quickstart/,/overview/quickstart/]
toc: true toc: true
aliases: [/quickstart/,/overview/quickstart/]
--- ---
{{% note %}} In this tutorial you will:
This quick start uses `macOS` in the examples. For instructions about how to install Hugo on other operating systems, see [install](/installation/).
It is required to have [Git installed](https://git-scm.com/downloads) to run this tutorial. 1. Create a site
2. Add content
3. Configure the site
4. Publish the site
For other approaches to learning Hugo (like books or video tutorials), refer to the [external learning resources](/getting-started/external-learning-resources/) page. ## Prerequisites
{{% /note %}}
## Step 1: Install Hugo Before you begin this tutorial you must:
Install the **extended version of Hugo** (this is required for the current theme used). 1. [Install Hugo] (the extended edition)
1. [Install Git]
{{% note %}} You must also be comfortable working from the command line.
`Homebrew` and `MacPorts`, package managers for `macOS`, can be installed from [brew.sh](https://brew.sh/) or [macports.org](https://www.macports.org/) respectively. See [install](/installation/) if you are running Windows etc.
{{% /note %}}
```bash ## Create a site
brew install hugo
# or ### Commands
port install hugo
Run these commands to create a Hugo site with the [Ananke] theme. The next section provides an explantion of each command.
```text
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server
``` ```
To verify your new install: View your site at the URL displayed in your terminal. Press `Ctrl + C` to stop Hugo's development server.
```bash ### Explanation of commands
hugo version
# Example output: hugo v0.104.2+extended darwin/amd64 BuildDate=unknown
```
It should state that it is `extended`. If it does not, uninstall it and try another installation method. Create the [directory structure] for your project in the `quickstart` directory.
## Step 2: Create a New Site ```text
```bash
hugo new site quickstart hugo new site quickstart
``` ```
The above will create a new Hugo site in a folder named `quickstart`. Change the current directory to the root of your project.
## Step 3: Add a Theme ```text
See [themes.gohugo.io](https://themes.gohugo.io/) for a list of themes to consider. This quickstart uses the beautiful [Ananke theme](https://themes.gohugo.io/gohugo-theme-ananke/).
First, download the theme from GitHub and add it to your site's `themes` directory:
```bash
cd quickstart cd quickstart
```
Initialize an empty Git repository in the current directory.
```text
git init git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
``` ```
Then, add the theme to the site configuration: Clone the [Ananke] theme into the `themes` directory, adding it to your project as a [Git submodule].
```bash ```text
echo theme = \"ananke\" >> config.toml git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
``` ```
## Step 4: Add Some Content Append a line to the site configuration file, indicating the current theme.
You can manually create content files (for example as `content/<CATEGORY>/<FILE>.<FORMAT>`) and provide metadata in them, however you can use the `new` command to do a few things for you (like add title and date): ```text
echo "theme = 'ananke'" >> config.toml
```
```txt Start Hugo's development server to view the site.
```text
hugo server
```
Press `Ctrl + C` to stop Hugo's development server.
## Add content
Add a new page to your site.
```text
hugo new posts/my-first-post.md hugo new posts/my-first-post.md
``` ```
Edit the newly created content file if you want, it will start with something like this: Hugo created the file in the `content/posts` directory. Open the file with your editor.
```md ```text
--- ---
title: "My First Post" title: "My First Post"
date: 2019-03-26T08:47:11+01:00 date: 2022-11-20T09:03:20-08:00
draft: true 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.
[markdown]: https://commonmark.org/help/
```text
---
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.
```text
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.
[live testing tool]: https://spec.commonmark.org/dingus/
[specification]: https://spec.commonmark.org/
{{% /note %}}
## Configure the site
With your editor, open the [site configuration] file (`config.toml`) in the root of your project.
```text
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'
```
Make the following changes:
1. Set the `baseURL` for your production site. This value must begin with the protocol and end with a slash, as shown above.
2. Set the `languageCode` to your language and region.
3. Set the `title` for your production site.
Start Hugo's development server to see your changes, remembering to include draft content.
```text
hugo server -D
``` ```
{{% note %}} {{% note %}}
Drafts do not get deployed; once you finish a post, update the header of the post to say `draft: false`. More info [here](/getting-started/usage/#draft-future-and-expired-content). 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].
[demonstration site]: https://gohugo-ananke-theme-demo.netlify.app/
[documentation]: https://github.com/theNewDynamic/gohugo-theme-ananke#readme
[The New Dynamic]: [https://www.thenewdynamic.com/]
{{% /note %}} {{% /note %}}
## Step 5: Start the Hugo server ## Publish the site
Now, start the Hugo server with [drafts](/getting-started/usage/#draft-future-and-expired-content) enabled: In this step you will _publish_ your site, but you will not _deploy_ it.
```txt 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.
▶ hugo server -D
| EN When you publish your site, you typically do _not_ want to include [draft, future, or expired content]. The command is simple.
+------------------+----+
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Total in 11 ms ```text
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes} hugo
Watching for config changes in /Users/bep/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
``` ```
**Navigate to your new site at [http://localhost:1313/](http://localhost:1313/).** To learn how to _deploy_ your site, see the [hosting and deployment] section.
Feel free to edit or add new content and you will see the changes in the browser right away while the Hugo server is running. (You might need to force refresh your web browser, something like Ctrl-R usually works.) ## Ask for help
## Step 6: Customize the Theme 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.
Your new site already looks great, but you will want to tweak it a little before you release it to the public. ## Other resources
### Site Configuration For other resources to help you learn Hugo, including books and video tutorials, see the [external learning resources](/getting-started/external-learning-resources/) page.
Open up `config.toml` in a text editor: [Ananke]: https://github.com/theNewDynamic/gohugo-theme-ananke
[directory structure]: /getting-started/directory-structure
```toml [draft, future, and expired content]: /getting-started/usage/#draft-future-and-expired-content
baseURL = "https://example.org/" [draft, future, or expired content]: /getting-started/usage/#draft-future-end-expired-content
languageCode = "en-us" [external learning resources]:/getting-started/external-learning-resources/
title = "My New Hugo Site" [forum]: https://discourse.gohugo.io/
theme = "ananke" [forum]: https://discourse.gohugo.io/
``` [front matter]: content-management/front-matter
[Git submodule]: https://git-scm.com/book/en/v2/Git-Tools-Submodules
Replace the `title` above with something more personal. Also, if you already have a domain ready, set the `baseURL`. Note that this value is not needed when running the local development server. [hosting and deployment]: /hosting-and-deployment/
[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
{{% note %}} [Install Hugo]: /installation/
**Tip:** Make the changes to the site configuration or any other file in your site while the Hugo server is running, and you will see the changes in the browser right away, though you may need to [clear your cache](https://kb.iu.edu/d/ahic). [Requesting Help]: https://discourse.gohugo.io/t/requesting-help/9132
{{% /note %}} [Requesting Help]: https://discourse.gohugo.io/t/requesting-help/9132
[site configuration]: /getting-started/configuration/
For theme specific configuration options, see the [theme site](https://github.com/theNewDynamic/gohugo-theme-ananke).
**For further theme customization, see [Customize a Theme](/themes/customizing/).**
### Step 7: Build static pages
It is simple. Just call:
```txt
hugo -D
```
Output will be in `./public/` directory by default (`-d`/`--destination` flag to change it, or set `publishdir` in the config file).