"><linkrel=canonicalhref=https://jpanther.github.io/congo/docs/installation/><linkrel=apple-touch-iconsizes=180x180href=/congo/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/congo/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/congo/favicon-16x16.png><linkrel=manifesthref=/congo/site.webmanifest><metaproperty="og:title"content="Installation"><metaproperty="og:description"content="How to install the Congo theme."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://jpanther.github.io/congo/docs/installation/"><metaproperty="article:section"content="docs"><metaproperty="article:published_time"content="2020-08-16T00:00:00+00:00"><metaproperty="article:modified_time"content="2020-08-16T00:00:00+00:00"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Installation"><metaname=twitter:descriptioncontent="How to install the Congo theme."><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Installation","headline":"Installation","description":"How to install the Congo theme.","abstract":"Learn how to get up and running using Hugo and Congo from a completely blank state. It\u0026rsquo;s the best place to start if you\u0026rsquo;re a new user.","inLanguage":"en-AU","url":"https:\/\/jpanther.github.io\/congo\/docs\/installation\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-16T00:00:00\u002b00:00","datePublished":"2020-08-16T00:00:00\u002b00:00","dateModified":"2020-08-16T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"996"}</script><metaname=authorcontent="Congo"><linkhref=https://twitter.com/rel=me><linkhref=https://facebook.com/rel=me><linkhref=https://linkedin.com/rel=me><linkhref=https://youtube.com/rel=me></head><bodyclass="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><divid=the-topclass="absolute flex self-center"><aclass="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"href=#main-content><spanclass="font-bold pe-2 text-primary-600 dark:text-primary-400">↓</span>Skip to main content</a></div><headerclass="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><navclass="flex items-start justify-between sm:items-center"><divclass="flex flex-row items-center"><aclass="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"rel=mehref=/congo/>Congo</a></div><ulclass="flex flex-col list-none text-end sm:flex-row"><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/docs/title=Documentation><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/samples/title="Content Samples"><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Samples</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=/congo/users/title=Users><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Users</span></a></li><liclass="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><ahref=https://github.com/jpanther/congotitletarget=_blank><spanclass="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 496 512"><pathfill="currentcolor"d="M165.9397.4c02-2.33.6-5.23.6-3.3.3-5.6-1.3-5.6-3.6.0-22.3-3.65.2-3.63-.35.61.35.63.6zm-31.1-4.5c-.721.34.34.34.92.615.6.06.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.22.3zm44.2-1.7c-2.9.7-4.92.6-4.64.9.322.93.35.92.62.9-.74.9-2.64.6-4.6-.
<ahref=https://gohugo.io/getting-started/quick-start/target=_blankrel=noreferrer>Quick Start</a> procedure to get up and running quickly.</p><p>Detailed installation instructions can be found below. Instructions for
<ahref=#installing-updates>updating the theme</a> are also available.</p><h2id=installationclass="relative group">Installation <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#installationaria-label=Anchor>#</a></span></h2><p>These instructions will get you up and running using Hugo and Congo from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.</p><h3id=install-hugoclass="relative group">Install Hugo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#install-hugoaria-label=Anchor>#</a></span></h3><p>If you haven’t used Hugo before, you will need to
<ahref=https://gohugo.io/getting-started/installingtarget=_blankrel=noreferrer>install it onto your local machine</a>. You can check if it’s already installed by running the command <code>hugo version</code>.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300>Make sure you are using <strong>Hugo version 0.87.0</strong> or later as the theme takes advantage of some of the latest Hugo features.</span></div><p>You can find detailed installation instructions for your platform in the
<ahref=https://gohugo.io/getting-started/installingtarget=_blankrel=noreferrer>Hugo docs</a>.</p><h3id=create-a-new-siteclass="relative group">Create a new site <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#create-a-new-sitearia-label=Anchor>#</a></span></h3><p>Run the command <code>hugo new site mywebsite</code> to create a new Hugo site in a directory named <code>mywebsite</code>.</p><p>Note that you can name the project directory whatever you choose, but the instructions below will assume it’s named <code>mywebsite</code>. If you use a different name, be sure to substitute it accordingly.</p><h3id=download-the-congo-themeclass="relative group">Download the Congo theme <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#download-the-congo-themearia-label=Anchor>#</a></span></h3><p>There several different ways to install the Congo theme into your Hugo website. From easiest to most difficult to install and maintain, they are:</p><ul><li><ahref=#install-using-hugo>Hugo module</a> (recommended)</li><li><ahref=#install-using-git>Git submodule</a></li><li><ahref=#install-manually>Manual file copy</a></li></ul><p>If you’re unsure, choose the Hugo module method.</p><h4id=install-using-hugoclass="relative group">Install using Hugo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#install-using-hugoaria-label=Anchor>#</a></span></h4><p>This method is the quickest and easiest for keeping the theme up-to-date. Hugo uses <strong>Go</strong> to initialise and manage modules so you need to ensure you have <code>go</code> installed before proceeding.</p><ol><li><p><ahref=https://golang.org/dl/target=_blankrel=noreferrer>Download</a> and install Go. You can check if it’s already installed by using the command <code>go version</code>.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300>Make sure you are using <strong>Go version 1.12</strong> or later as Hugo requires this for modules to work correctly.</span></div></li><li><p>From your Hugo project directory (that you created above), initialise modules for your website:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl><spanclass=c1># If you're managing your project on GitHub</span>
</span></span><spanclass=line><spanclass=cl>hugo mod init github.com/<username>/<repo-name>
</span></span><spanclass=line><spanclass=cl>
</span></span><spanclass=line><spanclass=cl><spanclass=c1># If you're managing your project locally</span>
</span></span><spanclass=line><spanclass=cl>hugo mod init my-project
</span></span></code></pre></div></li><li><p>Add the theme to your configuration by creating a new file <code>config/_default/module.toml</code> and adding the following:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=p>[[</span><spanclass=nx>imports</span><spanclass=p>]]</span>
</span></span></code></pre></div></li><li><p>Start your server using <code>hugo server</code> and the theme will be downloaded automatically.</p></li><li><p>Continue to
<ahref=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p></li></ol><h4id=install-using-gitclass="relative group">Install using git <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#install-using-gitaria-label=Anchor>#</a></span></h4><p>For this method you’ll need to ensure you have <strong>Git</strong> installed on your local machine.</p><p>Change into the directory for your Hugo website (that you created above), initialise a new <code>git</code> repository and add Congo as a submodule.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-bashdata-lang=bash><spanclass=line><spanclass=cl><spanclass=nb>cd</span> mywebsite
<ahref=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p><h4id=install-manuallyclass="relative group">Install manually <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#install-manuallyaria-label=Anchor>#</a></span></h4><ol><li><p>Download the latest release of the theme source code.</p><aclass="inline-block !rounded-md bg-primary-600 px-4 py-1 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"href=https://github.com/jpanther/congo/releases/latesttarget=_blankrole=button>Download from Github</a></li><li><p>Extract the archive, rename the folder to <code>congo</code> and move it to the <code>themes/</code> directory inside your Hugo project’s root folder.</p></li><li><p>Continue to
<ahref=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p></li></ol><h3id=set-up-theme-configuration-filesclass="relative group">Set up theme configuration files <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#set-up-theme-configuration-filesaria-label=Anchor>#</a></span></h3><p>In the root folder of your website, delete the <code>config.toml</code> file that was generated by Hugo. Copy the <code>*.toml</code> config files from the theme into your <code>config/_default/</code> folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300><strong>Note:</strong> You should not overwrite the <code>module.toml</code> file if one already exists in your project!</span></div><p>Depending on how you installed the theme you will find the theme config files in different places:</p><ul><li><strong>Hugo Modules:</strong> In the Hugo cache directory, or
<ahref="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/congo/tree/stable/config/_default"target=_blankrel=noreferrer>download a copy</a> from GitHub</li><li><strong>Git submodule or Manual install:</strong><code>themes/congo/config/_default</code></li></ul><p>Once you’ve copied the files, your config folder should look like this:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>config/_default/
<ahref=https://jpanther.github.io/congo/docs/getting-started/>Getting Started</a> section to learn more about configuring the theme.</p><hr><h2id=installing-updatesclass="relative group">Installing updates <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#installing-updatesaria-label=Anchor>#</a></span></h2><p>From time to time there will be
<ahref=https://github.com/jpanther/congo/releasestarget=_blankrel=noreferrer>new releases</a> posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.</p><p>How you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.</p><ul><li><ahref=#update-using-hugo>Hugo module</a></li><li><ahref=#update-using-git>Git submodule</a></li><li><ahref=#update-manually>Manual file copy</a></li></ul><h3id=update-using-hugoclass="relative group">Update using Hugo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#update-using-hugoaria-label=Anchor>#</a></span></h3><p>Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>hugo mod get -u
</span></span></code></pre></div><p>Hugo will automatically update any modules that are required for your project. It does this by inspecting your <code>module.toml</code> and <code>go.mod</code> files. If you have any issues with the update, check to ensure these files are still configured correctly.</p><p>Then simply rebuild your site and check everything works as expected.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300>When updating modules, sometimes Hugo will cache an older version of the theme. If this happens, clear your local cache by using the <code>hugo mod clean</code> command and then rebuild your site.</span></div><h3id=update-using-gitclass="relative group">Update using git <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#update-using-gitaria-label=Anchor>#</a></span></h3><p>Git submodules can be updated using the <code>git</code> command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>git submodule update --remote --merge
</span></span></code></pre></div><p>Once the submodule has been updated, rebuild your site and check everything works as expected.</p><h3id=update-manuallyclass="relative group">Update manually <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#update-manuallyaria-label=Anchor>#</a></span></h3><p>Updating Congo manually requires you to download the latest copy of the theme and replace the old version in your project.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300>Note that any local customisations you have made to the theme files will be lost during this process.</span></div><ol><li><p>Download the latest release of the theme source code.</p><aclass="inline-block !rounded-md bg-primary-600 px-4 py-1 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"href=https://github.com/jpanther/congo/releases/latesttarget=_blankrole=button>Download from Github</a></li><li><p>Extract the archive, rename the folder to <code>congo</code> and move it to the <code>themes/</code> directory inside your Hugo project’s root folder. You will need to overwrite the existing directory to replace all the theme files.</p></li><li><p>Rebuild your site and check everything works as expected.</p></li></ol></div></section><footerclass="pt-8 max-w-prose print:hidden"><divclass=pt-8><hrclass="border-dotted border-neutral-300 dark:border-neutral-600"><divclass="flex justify-between pt-3"><span></span><span><aclass="group flex text-right"href=/congo/docs/getting-started/><spanclass="flex flex-col"><spanclass="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Getting Started</span>
