Installation

<p>The following steps are here to help you initialize your new website. If you don&rsquo;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 &lt;new_project&gt; </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&rsquo;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">&#34;Dot&#34;</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>