"><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":"1013"}</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 list-none flex-col 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="group-dark:hover:text-primary-400 transition-colors 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-
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
.</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
</span></span></code></pre></div><p>Then continue to
<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/
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
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>
