<metaname="description"content="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 great documentation for beginners.">
<metaname="twitter:description"content="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 great documentation for beginners.">
<metaproperty="og:description"content="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 great documentation for beginners.">
<metaitemprop="description"content="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 great documentation for beginners.">
<linkhref="https://mcshelby.github.io/hugo-theme-relearn/basics/installation/index.html"rel="canonical"type="text/html"title="Installation :: Hugo Relearn Theme">
<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 <ahref="https://gohugo.io/overview/quickstart/"rel="external"target="_self">great documentation for beginners</a>.</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new site my-new-site</span></span></code></pre></div><p>After that change into the directory:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl"><spanclass="nb">cd</span> my-new-site</span></span></code></pre></div><p>Every upcoming command will be executed from inside your new site’s root.</p>
<h3id="downloading-as-archive">Downloading as Archive</h3>
<p>You can <ahref="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip"rel="external"target="_self">download the theme as .zip archive</a> and extract its content into them <code>themes/hugo-theme-relearn</code> directory.</p>
<p>Afterwards add this at the end of your <code>hugo.toml</code>.</p>
<p>You can install the Relearn theme by following <ahref="https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme"rel="external"target="_self">the standard documentation</a> using Hugo’s module system:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo mod init example.com</span></span></code></pre></div><p>Afterwards add this at the end of your <code>hugo.toml</code>.</p>
<p>If you plan to store your project in a git repository you can create one with:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">git init</span></span></code></pre></div><p>Now add the theme as a submodule by:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">git submodule add --depth <spanclass="m">1</span> https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn</span></span></code></pre></div><p>Afterwards add this at the end of your <code>hugo.toml</code>.</p>
<p>If you don’t create a home page, yet, the theme will generate a placeholder text with instructions on how to proceed.</p>
<p>Start your journey by creating a home page:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>The newly created home page <code>content/_index.md</code> is empty and you obviously should add some meaningful content.</p>
<p>Chapters are meant to be top level pages that contain other child pages. They have a special layout style and often just contain the <em>title</em> and a <em>brief abstract</em> of the section.</p>
<p>Now create your first chapter page with the following command:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>When opening the newly created file <code>content/basics/_index.md</code>, you should see the <code>weight</code> frontmatter with a number. This will be used to generate the subtitle of the chapter page, and should be set to a consecutive value starting at <code>1</code> for each chapter level.</p>
<p>Then create content pages inside the previously created chapter. Here are three ways to create content in the chapter:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new basics/first-content/_index.md
</span></span><spanclass="line"><spanclass="cl">hugo new basics/second-content/index.md
</span></span><spanclass="line"><spanclass="cl">hugo new basics/third-content.md</span></span></code></pre></div><p>Feel free to edit those files by adding some sample content and replacing the <code>title</code> value in the beginning of the files.</p>
<p>Please note that Hugo overrides the default archetype template coming with this theme when using <code>hugo new site my-new-site</code>. To actually see your page later, you have to remove the <code>draft=true</code> from the page’s frontmatter.</p>
</div>
</div>
<h2id="testing-your-website-locally">Testing your Website Locally</h2>
<p>Launch your new web site by using the following command:</p>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo serve</span></span></code></pre></div><p>Go to <ahref="http://localhost:1313"rel="external"target="_self"><code>http://localhost:1313</code></a> in your browser.</p>
<li>The home page contains your provided text.</li>
<li>You have the menu <strong>Basics</strong> in the sidebar. Clicking on it reveals three submenus with names equal to the <code>title</code> properties in the previously created content pages.</li>
<li>While you are running <code>hugo serve</code> your page refreshes automatically when you change a content page. Neat!</li>
<divclass="highlight wrap-code"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo</span></span></code></pre></div><p>A <code>public</code> directory will be generated, containing all content and assets for your web site.</p>
<p>It now can be deployed to any web server by simply uploading its contents or you can check out one of <ahref="https://gohugo.io/hosting-and-deployment/"rel="external"target="_self">Hugo’s many other deployment options</a>.</p>
