1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Hugo</title>
<meta name="description" content="">
<meta name="image" content="">
<meta itemprop="name" content="Getting Started with Hugo">
<meta itemprop="description" content="">
<meta itemprop="image" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Getting Started with Hugo">
<meta name="twitter:description" content="">
<meta name="twitter:site" content="@yakczar">
<meta name="twitter:creator" content="@yakczar">
<meta name="twitter:image:src" content="">
<meta name="og:title" content="Getting Started with Hugo">
<meta name="og:description" content="">
<meta name="og:url" content="http://schollz.github.io/onetwothree/post/hugoisforlovers/">
<meta name="og:site_name" content="Getting Started with Hugo">
<meta name="og:type" content="article">
<meta name="article:author" content="yakczar">
<meta name="article:tag" content="go golang hugo development ">
<link rel="stylesheet" type="text/css" href="http://schollz.github.io/onetwothree/css/style.css">
<script src="http://schollz.github.io/onetwothree/js/caption.js"></script>
</head>
<body>
<header style="color:#CCCCCC;">
<a href="http://schollz.github.io/onetwothree/" style="color:#CCCCCC;"><strong>Posts</strong></a> · <a href="http://schollz.github.io/onetwothree/about/" style="color:#CCCCCC;"><strong>About Hugo</strong></a>
</header>
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;"></div>
<script>
function fadeOut(el) {
el.style.opacity = 1;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity - (new Date() - last) / 80;
last = +new Date();
if (el.style.opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
} else {
el.style.display='none';
}
};
tick();
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
el = document.getElementById('loadingMask');
fadeOut(el);
var elements = document.querySelectorAll("img");
Array.prototype.forEach.call(elements, function(el, i) {
if (el.getAttribute("alt")) {
const caption = document.createElement('figcaption');
var node = document.createTextNode(el.getAttribute("alt"));
caption.appendChild(node);
const wrapper = document.createElement('figure');
wrapper.className = 'image';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
wrapper.appendChild(caption);
}
});
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
window.onload = ready;
</script>
<div class="content">
<h1>Getting Started with Hugo <aside><a href="http://schollz.github.io/onetwothree/tags/go/" class="w3-tag">/go</a> <a href="http://schollz.github.io/onetwothree/tags/golang/" class="w3-tag">/golang</a> <a href="http://schollz.github.io/onetwothree/tags/hugo/" class="w3-tag">/hugo</a> <a href="http://schollz.github.io/onetwothree/tags/development/" class="w3-tag">/development</a> <a href="http://schollz.github.io/onetwothree/about" class="w3-tag">/about</a></aside></h1>
<h2 id="step-1-install-hugo">Step 1. Install Hugo</h2>
<p>Goto <a href="https://github.com/spf13/hugo/releases">hugo releases</a> and download the
appropriate version for your os and architecture.</p>
<p>Save it somewhere specific as we will be using it in the next step.</p>
<p>More complete instructions are available at <a href="http://schollz.github.io/onetwothree/overview/installing/">installing hugo</a></p>
<h2 id="step-2-build-the-docs">Step 2. Build the Docs</h2>
<p>Hugo has its own example site which happens to also be the documentation site
you are reading right now.</p>
<p>Follow the following steps:</p>
<ol>
<li>Clone the <a href="http://github.com/spf13/hugo">hugo repository</a></li>
<li>Go into the repo</li>
<li>Run hugo in server mode and build the docs</li>
<li>Open your browser to <a href="http://localhost:1313">http://localhost:1313</a></li>
</ol>
<p>Corresponding pseudo commands:</p>
<pre><code>git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Press ctrl+c to stop
</code></pre>
<p>Once you’ve gotten here, follow along the rest of this page on your local build.</p>
<h2 id="step-3-change-the-docs-site">Step 3. Change the docs site</h2>
<p>Stop the Hugo process by hitting ctrl+c.</p>
<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
<pre><code>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Watching for changes in /Users/spf13/Code/hugo/docs/content
> Press ctrl+c to stop
</code></pre>
<p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
are located at the same relative location as the url, in our case
<code>docs/content/overview/quickstart.md</code>.</p>
<p>Change and save this file.. Notice what happened in your terminal.</p>
<pre><code>> Change detected, rebuilding site
> 29 pages created
> 0 tags index created
> in 26 ms
</code></pre>
<p>Refresh the browser and observe that the typo is now fixed.</p>
<p>Notice how quick that was. Try to refresh the site before it’s finished building.. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
<h2 id="step-4-have-fun">Step 4. Have fun</h2>
<p>The best way to learn something is to play with it.</p>
</div>
<footer>
<p><small><em>Written April 2, 2014. </em>
Send feedback to <a href="https://twitter.com/intent/tweet?text=%40yakczar%20%23posthugoisforlovers%20">@yakczar</a>.
</small></p>
<p>
<a href="http://schollz.github.io/onetwothree/post/goisforlovers/" style="float:right;">(Hu)go Template Primer →</a>
</p>
</footer>
</body>
</html>
|
