<lidata-nav-id=/cont/menushortcuts/title="Menu extra shortcuts"class=dd-item><ahref=../../cont/menushortcuts/>Menu extra shortcuts<iclass="fas fa-check read-icon"></i></a></li>
<lidata-nav-id=/cont/icons/title="Icons and logos"class=dd-item><ahref=../../cont/icons/>Icons and logos<iclass="fas fa-check read-icon"></i></a></li>
<lidata-nav-id=/cont/i18n/title="Multilingual and i18n"class="dd-item alwaysopen"><ahref=../../cont/i18n/>Multilingual and i18n<iclass="fas fa-check read-icon"></i></a><ul></ul></li>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearn/archive/main.zipdata-icon=octicon-cloud-downloadaria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearndata-icon=octicon-stardata-show-count=truearia-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<aclass=github-buttonhref=https://github.com/McShelby/hugo-theme-relearn/forkdata-icon=octicon-repo-forkeddata-show-count=truearia-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <ahref=https://github.com/McShelby/hugo-theme-relearn><iclass="fas fa-heart"></i></a> by <ahref=https://gohugo.io/>Hugo</a></p>
<aclass=github-linktitle="Edit this page"href=https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/installation/_index.en.mdtarget=blank>
<iclass="fas fa-code-branch"></i>
<spanid=top-github-link-text>Edit this page</span>
<li><ahref=#create-your-first-chapter-page>Create your first chapter page</a></li>
<li><ahref=#create-your-first-content-pages>Create your first content pages</a></li>
<li><ahref=#launching-the-website-locally>Launching the website locally</a></li>
<li><ahref=#build-the-website>Build the website</a></li>
</ul>
</nav>
</div>
</div>
</div>
<divid=head-tags>
</div>
<mainid=body-inner>
<h1>Installation</h1>
<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/>great documentation for beginners</a>.</p>
<h2id=create-your-project>Create your project</h2>
<p>Hugo provides a <code>new</code> command to create a new website.</p>
<pretabindex=0><code>hugo new site <new_project>
</code></pre><h2id=install-the-theme>Install the theme</h2>
<p>Install the Relearn theme by following <ahref=https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme>this documentation</a></p>
<p>This theme’s repository is: <ahref=https://github.com/McShelby/hugo-theme-relearn.git>https://github.com/McShelby/hugo-theme-relearn.git</a></p>
<p>Alternatively, you can <ahref=https://github.com/McShelby/hugo-theme-relearn/archive/main.zip>download the theme as .zip</a> file and extract it in the <code>themes</code> directory</p>
<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. You can also add the <code>[outputs]</code> section to enable the search functionality.</p>
<divclass=highlight><pretabindex=0style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-tomldata-lang=toml><spanstyle=color:#78787e># Change the default theme to be use when building the site with Hugo</span>
<spanstyle=color:#78787e># For search functionality</span>
[outputs]
home = [ <spanstyle=color:#5af78e>"HTML"</span>, <spanstyle=color:#5af78e>"RSS"</span>, <spanstyle=color:#5af78e>"JSON"</span>]
</code></pre></div><h2id=create-your-first-chapter-page>Create your first chapter page</h2>
<p>Chapters are pages that contain other child pages. It has a special layout style and usually just contains a <em>chapter name</em>, the <em>title</em> and a <em>brief abstract</em> of the section.</p>
<p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
<divclass=highlight><pretabindex=0style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-shelldata-lang=shell>hugo new --kind chapter basics/_index.md
</code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
<p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
<h2id=create-your-first-content-pages>Create your first content pages</h2>
<p>Then, create content pages inside the previously created chapter. Here are two ways to create content in the chapter:</p>
<divclass=highlight><pretabindex=0style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-shelldata-lang=shell>hugo new basics/first-content.md
hugo new basics/second-content/_index.md
</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>
<h2id=launching-the-website-locally>Launching the website locally</h2>
</code></pre></div><p>Go to <code>http://localhost:1313</code></p>
<p>You should notice three things:</p>
<ol>
<li>You have a left-side <strong>Basics</strong> menu, containing two submenus with names equal to the <code>title</code> properties in the previously created files.</li>
<li>The home page explains how to customize it by following the instructions.</li>
<li>When you run <code>hugo serve</code>, when the contents of the files change, the page automatically refreshes with the changes. Neat!</li>
</ol>
<h2id=build-the-website>Build the website</h2>
<p>When your site is ready to deploy, run the following command:</p>
</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>
<divclass="notices note">
<divclass=label>Note</div><p>This website can be automatically published and hosted with <ahref=https://www.netlify.com/>Netlify</a> (Read more about <ahref=https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/>Automated HUGO deployments with Netlify</a>). Alternatively, you can use <ahref=https://gohugo.io/hosting-and-deployment/hosting-on-github/>GitHub pages</a></p>
