Installation
<p>The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this <a href="https://gohugo.io/overview/quickstart/">great documentation for beginners</a>.</p>
<h3 id="create-your-project">Create your project</h3>
<p>Hugo provides a <code>new</code> command to create a new website.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">hugo new site <new_project>
</code></pre></div><h3 id="install-the-theme">Install the theme</h3>
<p>Install the <strong>Dot</strong> theme by following <a href="https://gohugo.io/themes/installing/">this documentation</a></p>
<p>This theme’s repository is: <a href="https://github.com/themefisher/dot-hugo-documentation-theme.git">https://github.com/themefisher/dot-hugo-documentation-theme.git</a></p>
<p>Alternatively, you can <a href="https://github.com/themefisher/dot-hugo-documentation-theme/archive/master.zip">download the theme as .zip</a> file and extract it in the <code>themes</code> directory</p>
<p>Or you can check this video documentation for installing this template:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.youtube.com/embed/Srt3lTmRxzQ" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>
</p>
<h3 id="basic-configuration">Basic configuration</h3>
<p>When building the website, you can set a theme by using <code>--theme</code> option. However, we suggest you modify the configuration file (<code>config.toml</code>) and set the theme as the default.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#75715e"># Change the default theme to be use when building the site with Hugo</span>
<span style="color:#a6e22e">theme</span> = <span style="color:#e6db74">"Dot"</span>
</code></pre></div><h3 id="create-your-first-content-pages">Create your first content pages</h3>
<p>Then, create content pages inside the previously created chapter. Here are two ways to create content in the chapter:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">hugo new installation/first-content.md
hugo new installation/second-content/_index.md
</code></pre></div><p>Feel free to edit thoses files by adding some sample content and replacing the <code>title</code> value in the beginning of the files.</p>
<h3 id="launching-the-website-locally">Launching the website locally</h3>
<p>Launch by using the following command:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">hugo serve
</code></pre></div><p>Go to <code>http://localhost:1313</code></p>
<h3 id="build-the-website">Build the website</h3>
<p>When your site is ready to deploy, run the following command:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">hugo
</code></pre></div><p>A <code>public</code> folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.</p>
<div class="notices info" ><p>This website can be automatically published and hosted with <a href="https://www.netlify.com/">Netlify</a> (Read more about <a href="https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/">Automated HUGO deployments with Netlify</a>). Alternatively, you can use <a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">Github pages</a></p></div>
Updated on 27 Aug 2020