mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-12-17 19:33:30 +00:00
221 lines
17 KiB
HTML
221 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.124.1">
|
|
<meta name="generator" content="Relearn 5.26.2+tip">
|
|
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
|
<meta name="author" content="Sören Weber">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta name="twitter:title" content="Installation :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:title" content="Installation :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/basics/installation/index.html">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<title>Installation :: Hugo Relearn Theme</title>
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="art-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="canonical" type="text/html" title="Installation :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1712269358" rel="icon" type="image/svg+xml">
|
|
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1712269359" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1712269359" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1712269359" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1712269359" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1712269359" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1712269359" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1712269359" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1712269359" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1712269359" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1712269359" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1712269359" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/variant.css?1712269359" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/print.css?1712269359" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1712269359" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/ie.css?1712269359" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/url.js?1712269359"></script>
|
|
<script src="/hugo-theme-relearn/js/variant.js?1712269359"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.index_js_url="/hugo-theme-relearn/index.search.js";
|
|
// variant stuff
|
|
window.relearn.themeVariantModifier='';
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
|
window.T_Reset_view = `Reset view`;
|
|
window.T_View_reset = `View reset!`;
|
|
window.T_No_results_found = `No results found for "{0}"`;
|
|
window.T_N_results_found = `{1} results found for "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/basics/installation/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button>
|
|
</div>
|
|
</div>
|
|
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Installation</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="R-main-overlay"></div>
|
|
<main id="R-body-inner" class="highlightable default" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/tags/documentation/index.html">Documentation</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<h1 id="installation">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 <a href="https://gohugo.io/overview/quickstart/" target="_blank">great documentation for beginners</a>.</p>
|
|
|
|
<div class="box notices cstyle tip">
|
|
<div class="box-label"><i class="fa-fw fas fa-lightbulb"></i> Tip</div>
|
|
<div class="box-content">
|
|
|
|
<p>The following tutorial leads you thru the steps of creating a first, minimal new site.</p>
|
|
<p>You don’t need to edit any files besides your <code>hugo.toml</code> and only need to execute the commands in the given order.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="create-your-project">Create your project</h2>
|
|
<p>Hugo provides a <code>new</code> command to create a new website:</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new site my-new-site</span></span></code></pre></div><p>After that change into the directory:</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="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>
|
|
<h2 id="install-the-theme">Install the theme</h2>
|
|
<h3 id="from-download">From Download</h3>
|
|
<p>You can <a href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" target="_blank">download the theme as .zip</a> file and extract it into them <code>themes/hugo-theme-relearn</code> directory.</p>
|
|
<h3 id="with-hugos-module-system">With Hugo’s Module System</h3>
|
|
<p>Install the Relearn theme by following <a href="https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme" target="_blank">this documentation</a> using Hugo’s module system.</p>
|
|
<p>This theme’s repository is: <a href="https://github.com/McShelby/hugo-theme-relearn.git" target="_blank">https://github.com/McShelby/hugo-theme-relearn.git</a></p>
|
|
<h3 id="using-git-or-git-submodules">Using Git or Git Submodules</h3>
|
|
<p>If you install the theme from your git repository or GitHub, you have several options.</p>
|
|
<p>If you use the <code>head</code> of the <code>main</code> branch, you are using the development version. Usually it is fully functional but can break from time to time. We try to fix newly introduced bugs in this version as soon as possible.</p>
|
|
<p>Additionally you can checkout one of the tagged versions. These tagged versions correspond to an official <a href="https://github.com/McShelby/hugo-theme-relearn/releases" target="_blank">releases from the GitHub repository</a>.</p>
|
|
<p>Besides the usual version tags (eg <code>1.2.3</code>) there are also tags for the main version (eg. <code>1.2.x</code>), major version (eg. <code>1.x</code>) and the latest (just <code>x</code>) released version making it easier for you to pin the theme to a certain version.</p>
|
|
<h2 id="basic-configuration">Basic Configuration</h2>
|
|
<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>hugo.toml</code> and set the theme as the default.</p>
|
|
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">theme</span> <span class="p">=</span> <span class="s1">'hugo-theme-relearn'</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="l">hugo-theme-relearn</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"theme"</span><span class="p">:</span> <span class="s2">"hugo-theme-relearn"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="create-your-home-page">Create your Home Page</h2>
|
|
<p>If you don’t create a home page, yet, the theme will generate a placeholder text with instructions how to proceed.</p>
|
|
<p>Start your journey by filling the home page with content</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>archetype=home</code> on top, meaning this page is a home page. The Relearn theme provides <a href="/hugo-theme-relearn/cont/archetypes/index.html">some archetypes</a> to create those skeleton files for your website.</p>
|
|
<p>Obviously you better should change the page’s content.</p>
|
|
<h2 id="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 the <em>title</em> and a <em>brief abstract</em> of the section.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="gh"># Basics
|
|
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
|
|
</span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
|
|
<p><a href="#R-image-e2b11210dac0e7ebb78819c4c0bde22e" class="lightbox-link"><img alt="A Chapter" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/basics/installation/chapter.png?width=60pc" style=" height: auto; width: 60pc;"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e2b11210dac0e7ebb78819c4c0bde22e"><img alt="A Chapter" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/basics/installation/chapter.png?width=60pc"></a></p>
|
|
<p>Begin by creating your first chapter page with the following command:</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>archetype=chapter</code> on top, meaning this page is a <em>chapter</em>.</p>
|
|
<p>The <code>weight</code> number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
|
|
<h2 id="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>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new basics/first-content.md
|
|
</span></span><span class="line"><span class="cl">hugo new basics/second-content/_index.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>
|
|
<h2 id="launching-the-website-locally">Launching the Website Locally</h2>
|
|
<p>Launch by using the following command:</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo serve</span></span></code></pre></div><p>Go to <code>http://localhost:1313</code></p>
|
|
<p>You should notice three things:</p>
|
|
<ol>
|
|
<li>The home page contains some basic text.</li>
|
|
<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>When you run <code>hugo serve</code> your page refreshes automatically when you change a content page. Neat!</li>
|
|
</ol>
|
|
<h2 id="build-the-website">Build the Website</h2>
|
|
<p>When your site is ready to deploy, run the following command:</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo</span></span></code></pre></div><p>A <code>public</code> folder will be generated, containing all content and assets for your website. It can now be deployed on any web server.</p>
|
|
<p>Now it’s time to deploy your page by simply uploading your project to some webserver or by using one of <a href="https://gohugo.io/hosting-and-deployment/" target="_blank">Hugo’s many deployment options</a>.</p>
|
|
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1712269359" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1712269359" defer></script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1712269359" defer></script>
|
|
</body>
|
|
</html>
|