quick-start.md (5109B)
1 ---
2 title: Quick Start
3 linktitle: Quick Start
4 description: Create a Hugo site using the beautiful Ananke theme.
5 date: 2013-07-01
6 publishdate: 2013-07-01
7 categories: [getting started]
8 keywords: [quick start,usage]
9 authors: [Shekhar Gulati, Ryan Watters]
10 menu:
11 docs:
12 parent: "getting-started"
13 weight: 10
14 weight: 10
15 sections_weight: 10
16 draft: false
17 aliases: [/quickstart/,/overview/quickstart/]
18 toc: true
19 ---
20
21 {{% note %}}
22 This quick start uses `macOS` in the examples. For instructions about how to install Hugo on other operating systems, see [install](/getting-started/installing).
23
24 It is required to have [Git installed](https://git-scm.com/downloads) to run this tutorial.
25
26 For other approaches to learning Hugo (like books or video tutorials), refer to the [external learning resources](/getting-started/external-learning-resources/) page.
27 {{% /note %}}
28
29 ## Step 1: Install Hugo
30
31 {{% note %}}
32 `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](/getting-started/installing) if you are running Windows etc.
33 {{% /note %}}
34
35 ```bash
36 brew install hugo
37 # or
38 port install hugo
39 ```
40
41 To verify your new install:
42
43 ```bash
44 hugo version
45 ```
46
47 {{< asciicast ItACREbFgvJ0HjnSNeTknxWy9 >}}
48
49 ## Step 2: Create a New Site
50
51 ```bash
52 hugo new site quickstart
53 ```
54
55 The above will create a new Hugo site in a folder named `quickstart`.
56
57 {{< asciicast 3mf1JGaN0AX0Z7j5kLGl3hSh8 >}}
58
59 ## Step 3: Add a Theme
60
61 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/).
62
63 First, download the theme from GitHub and add it to your site's `themes` directory:
64
65 ```bash
66 cd quickstart
67 git init
68 git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
69 ```
70
71 Then, add the theme to the site configuration:
72
73 ```bash
74 echo theme = \"ananke\" >> config.toml
75 ```
76
77 {{< asciicast 7naKerRYUGVPj8kiDmdh5k5h9 >}}
78
79 ## Step 4: Add Some Content
80
81 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):
82
83 ```
84 hugo new posts/my-first-post.md
85 ```
86
87 {{< asciicast eUojYCfRTZvkEiqc52fUsJRBR >}}
88
89 Edit the newly created content file if you want, it will start with something like this:
90
91 ```markdown
92 ---
93 title: "My First Post"
94 date: 2019-03-26T08:47:11+01:00
95 draft: true
96 ---
97
98 ```
99
100 {{% note %}}
101 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).
102 {{% /note %}}
103
104 ## Step 5: Start the Hugo server
105
106 Now, start the Hugo server with [drafts](/getting-started/usage/#draft-future-and-expired-content) enabled:
107
108 {{< asciicast BvJBsF6egk9c163bMsObhuNXj >}}
109
110 ```
111 ▶ hugo server -D
112
113 | EN
114 +------------------+----+
115 Pages | 10
116 Paginator pages | 0
117 Non-page files | 0
118 Static files | 3
119 Processed images | 0
120 Aliases | 1
121 Sitemaps | 1
122 Cleaned | 0
123
124 Total in 11 ms
125 Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
126 Watching for config changes in /Users/bep/quickstart/config.toml
127 Environment: "development"
128 Serving pages from memory
129 Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
130 Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
131 Press Ctrl+C to stop
132 ```
133
134 **Navigate to your new site at [http://localhost:1313/](http://localhost:1313/).**
135
136 Feel free to edit or add new content and simply refresh in browser to see changes quickly. (You might need to force refresh your web browser, something like Ctrl-R usually works.)
137
138 ## Step 6: Customize the Theme
139
140 Your new site already looks great, but you will want to tweak it a little before you release it to the public.
141
142 ### Site Configuration
143
144 Open up `config.toml` in a text editor:
145
146 ```
147 baseURL = "https://example.org/"
148 languageCode = "en-us"
149 title = "My New Hugo Site"
150 theme = "ananke"
151 ```
152
153 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.
154
155 {{% note %}}
156 **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).
157 {{% /note %}}
158
159 For theme specific configuration options, see the [theme site](https://github.com/theNewDynamic/gohugo-theme-ananke).
160
161 **For further theme customization, see [Customize a Theme](/themes/customizing/).**
162
163 ### Step 7: Build static pages
164
165 It is simple. Just call:
166
167 ```
168 hugo -D
169 ```
170
171 Output will be in `./public/` directory by default (`-d`/`--destination` flag to change it, or set `publishdir` in the config file).
172