Files
hugo/homepage/public/gedanken/hugoisforlovers/index.html
2026-05-25 22:53:28 +02:00

222 lines
8.7 KiB
HTML

<!doctype html>
<html
lang="en-us"
dir="ltr"
>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<title>
Getting Started with Hugo | Thomas Internet Garden
</title>
<link rel="canonical" href="http://localhost:1313/gedanken/hugoisforlovers/" />
<meta property="og:title" content="Getting Started with Hugo" />
<meta
property="og:type"
content="article"
/>
<meta property="og:url" content="http://localhost:1313/gedanken/hugoisforlovers/" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Getting Started with Hugo" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Getting Started with Hugo",
"url": "http:\/\/localhost:1313\/gedanken\/hugoisforlovers\/",
"datePublished": "2022-10-26T17:12:11\u002b07:00",
"dateModified": "2022-10-26T17:12:11\u002b07:00"
}
</script>
<link rel="apple-touch-icon" sizes="57x57" href="/favicon_io/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon_io/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon_io/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon_io/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon_io/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon_io/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon_io/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon_io/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon_io/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon_io/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
<link rel="manifest" href="/favicon_io/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon_io/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/custom.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header role="banner"><nav class="path-nav" aria-label="Breadcrumb">
<ol>
<li>
/
<a href="/">Thomas Internet Garden</a>
/
</li>
<li>
<a href="/gedanken/">Gedanken</a>
/
</li>
<li class="current">
<a href="/gedanken/hugoisforlovers/">Getting Started with Hugo</a>
</li>
</ol>
</nav>
</header>
<main id="main-content" role="main">
<h1>Getting Started with Hugo</h1>
<div class="terms-list">
<ul>
<li><a href="/tags/hugo/">#Hugo</a></li>
</ul>
</div>
<details class="toc" open>
<summary class="toc-title">Table of contents</summary>
<nav class="toc-content">
<nav id="TableOfContents">
<ol>
<li><a href="#step-1-install-hugo">Step 1. Install Hugo</a></li>
<li><a href="#step-2-build-the-docs">Step 2. Build the Docs</a></li>
<li><a href="#step-3-change-the-docs-site">Step 3. Change the docs site</a></li>
</ol>
</nav>
</nav>
</details>
<h2 id="step-1-install-hugo">
Step 1. Install Hugo
</h2>
<p>Go to <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="https://gohugo.io/getting-started/installing/">Install 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>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>1. Clone the [Hugo repository](http://github.com/spf13/hugo)
</span></span><span style="display:flex;"><span>2. Go into the repo
</span></span><span style="display:flex;"><span>3. Run hugo in server mode and build the docs
</span></span><span style="display:flex;"><span>4. Open your browser to http://localhost:1313
</span></span></code></pre></div><p>Corresponding pseudo commands:</p>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>git clone https://github.com/spf13/hugo
</span></span><span style="display:flex;"><span><span style="font-weight:bold;font-style:italic">cd</span> hugo
</span></span><span style="display:flex;"><span>/path/to/where/you/installed/hugo server --source=./docs
</span></span><span style="display:flex;"><span>&gt; 29 pages created
</span></span><span style="display:flex;"><span>&gt; 0 tags index created
</span></span><span style="display:flex;"><span>&gt; in 27 ms
</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
</span></span></code></pre></div><p>Once you&rsquo;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>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
</span></span><span style="display:flex;"><span>&gt; 29 pages created
</span></span><span style="display:flex;"><span>&gt; 0 tags index created
</span></span><span style="display:flex;"><span>&gt; in 27 ms
</span></span><span style="display:flex;"><span>&gt; Web Server is available at http://localhost:1313
</span></span><span style="display:flex;"><span>&gt; Watching <span style="font-weight:bold">for</span> changes in /Users/spf13/Code/hugo/docs/content
</span></span><span style="display:flex;"><span>&gt; Press ctrl+c to stop
</span></span></code></pre></div><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>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>&gt; Change detected, rebuilding site
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&gt; 29 pages created
</span></span><span style="display:flex;"><span>&gt; 0 tags index created
</span></span><span style="display:flex;"><span>&gt; in 26 ms
</span></span></code></pre></div><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&rsquo;s finished building. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
<div class="time">
<time datetime="2022-10-26">2022-10-26&nbsp;</time>
<span class="reading-time"> · 2 min read</span>
</div>
<div class="comments">
</div>
<div class="terminal-nav">
<div class="back-nav">
<a href="/gedanken/" class="back-link">../</a>
</div>
</div>
</main>
<footer role="contentinfo"><p role="contentinfo">
&copy; Copyright 2026 &middot;
Thomas
</p>
</footer>
</body>
</html>