<!doctype html><htmllang=en-AUdir=ltrclass=scroll-smoothdata-default-appearance=lightdata-auto-appearance=true><head><metacharset=utf-8><metaname=viewportcontent="width=device-width,initial-scale=1"><metaname=theme-colorcontent="rgb(255,255,255)"><title>Getting Started · Congo</title>
<metaname=titlecontent="Getting Started · Congo"><scripttype=text/javascriptsrc=/congo/js/appearance.min.022d0ebc3b46a335eb1c7ef79b7f2de143d7cd5156d433638592ef1ce5f8554e.jsintegrity="sha256-Ai0OvDtGozXrHH73m38t4UPXzVFW1DNjhZLvHOX4VU4="></script><linktype=text/cssrel=stylesheethref=/congo/css/main.bundle.min.33a669351b9f936b30a0fc74240c4bd296cb15c8b2b1e40ea9ee7b6658af735b.cssintegrity="sha256-M6ZpNRufk2swoPx0JAxL0pbLFciyseQOqe57Zlivc1s="><scriptdefertype=text/javascriptid=script-bundlesrc=/congo/js/main.bundle.min.fba363b244ec92c2d7b9de42d4cebd0b8994fd07279923c5929eb4dc3d055606.jsintegrity="sha256-+6NjskTsksLXud5C1M69C4mU/QcnmSPFkp603D0FVgY="data-copy=Copydata-copied=Copied></script><metaname=descriptioncontent="
"><linkrel=canonicalhref=https://jpanther.github.io/congo/docs/getting-started/><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="Getting Started"><metaproperty="og:description"content="Learn how to get started using the Congo theme."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://jpanther.github.io/congo/docs/getting-started/"><metaproperty="article:section"content="docs"><metaproperty="article:published_time"content="2020-08-15T00:00:00+00:00"><metaproperty="article:modified_time"content="2020-08-15T00:00:00+00:00"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Getting Started"><metaname=twitter:descriptioncontent="Learn how to get started using the Congo theme."><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"Learn how to get started using the Congo theme.","abstract":"This section assumes you have already installed the Congo theme and are ready to start with basic configuration tasks like selecting a colour scheme, menu and content structure.","inLanguage":"en-AU","url":"https:\/\/jpanther.github.io\/congo\/docs\/getting-started\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"1414"}</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="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"><divid=the-topclass="absolute flex self-center"><aclass="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600"href=#main-content><spanclass="pe-2 font-bold text-primary-600 dark:text-primary-400">↓</span>Skip to main content</a></div><headerclass="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral"><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="icon relative inline-block px-1 align-text-bottom"><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-
<ahref=https://jpanther.github.io/congo/docs/installation/target=_blankrel=noreferrer>installed the Congo theme</a>.</span></div><p>The config files that ship with Congo contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</p><h2id=basic-configurationclass="relative group">Basic configuration <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=#basic-configurationaria-label=Anchor>#</a></span></h2><p>Before creating any content, there are a few things you should set for a new installation. Starting in the <code>config.toml</code> file, set the <code>baseURL</code> and <code>languageCode</code> parameters. The <code>languageCode</code> should be set to the main language that you will be using to author your content.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/config.toml</span>
</span></span></code></pre></div><p>The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language.</p><p>Locate the <code>languages.en.toml</code> file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to <code>languages.fr.toml</code>.</p><divclass="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="icon relative inline-block px-1 align-text-bottom"><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>The language code in the language config filename should match the <code>languageCode</code> setting in <code>config.toml</code>.</span></div><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/languages.en.toml</span>
</span></span></code></pre></div><p>The <code>[params.author]</code> configuration determines how the author information is displayed on the website. The image should be placed in the site’s <code>assets/</code> folder. Links will be displayed in the order they are listed.</p><p>If you need extra detail, further information about each of these configuration options, is covered in the
<ahref=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p><h2id=colour-schemesclass="relative group">Colour schemes <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=#colour-schemesaria-label=Anchor>#</a></span></h2><p>Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the <code>colorScheme</code> theme parameter. Valid options are <code>congo</code> (default), <code>avocado</code>, <code>cherry</code>, <code>fire</code>, <code>ocean</code>, <code>sapphire</code> and <code>slate</code>.</p><divclass="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="icon relative inline-block px-1 align-text-bottom"><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>The <code>colourScheme</code> value should be provided in lowercase.</span></div><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/params.toml</span>
</span></span></code></pre></div><p>Congo defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in
<spanclass="mr-2 w-full rounded-md py-6"style=background-color:#6b7280></span></div><p>Although these are the default schemes, you can also create your own. Refer to the
<ahref=https://jpanther.github.io/congo/docs/advanced-customisation/#colour-schemes>Advanced Customisation</a> section for details.</p><h2id=organising-contentclass="relative group">Organising content <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=#organising-contentaria-label=Anchor>#</a></span></h2><p>By default, Congo doesn’t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer <em>pages</em> for a static site, <em>posts</em> for a blog, or <em>projects</em> for a portfolio.</p><h3id=directory-structureclass="relative group">Directory structure <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=#directory-structurearia-label=Anchor>#</a></span></h3><p>Here’s a quick overview of a basic Congo project. All content is placed within the <code>content</code> folder:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>.
</span></span></code></pre></div><divclass="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="icon relative inline-block px-1 align-text-bottom"><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>The key thing to note here is that within the content directory, normal article pages are named <code>index.md</code> while list pages are named <code>_index.md</code>. Any assets that go along with the article should be placed in a sub-directory alongside the index file.</span></div><p>It’s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the
<ahref=https://gohugo.io/content-management/organization/target=_blankrel=noreferrer>official Hugo docs</a> for more information.</p><h3id=feature-cover-and-thumbnail-imagesclass="relative group">Feature, cover and thumbnail images <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=#feature-cover-and-thumbnail-imagesaria-label=Anchor>#</a></span></h3><p>The Congo theme supports displaying images on article listings and at the top of individual article pages. There are three types of images supported, each with their own use case: <code>feature</code>, <code>cover</code> and <code>thumb</code>.</p><p>In the example below, a cover and thumb image have been provided for the <code>first-post</code> article:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>.
</span></span></code></pre></div><p>The <code>thumb</code> image is used as the article thumbnail and will be displayed in article lists, and the <code>cover</code> image will be displayed at the top of the article content on individual article pages.</p><p><figure><pictureclass="mx-auto my-0 rounded-md"><sourcesrcset="/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_330x0_resize_q75_h2_box.webp330w,/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_h2_box.webp660w
,/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1318x248_resize_q75_h2_box.webp 1318w" sizes=100vw type=image/webp><imgwidth=1318height=248class="mx-auto my-0 rounded-md"alt="A screenshot of an article with a thumbnail image"loading=lazydecoding=asyncsrc=/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpgsrcset="/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_330x0_resize_q75_box.jpg330w,/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg660w
,/congo/docs/getting-started/article-screenshot.jpg 1318w" sizes=100vw></picture><figcaptionclass=text-center>This example shows an article with a thumbnail image.</figcaption></figure></p><divclass="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="icon relative inline-block px-1 align-text-bottom"><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>In order to provide maximum performance, thumbnail images are automatically cropped and resized to a 4:3 ratio. Cover images will be automatically resized to fit their content, but any ratio is permitted.</span></div><p>The <code>feature</code> image is a special type, and when present, it will be used in place of <em>both</em> the <code>thumb</code> and <code>cover</code> images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter.</p><p>The theme will intelligently detect article images and automatically add them to your site. You don’t have to refer to them in the front matter and simply need to place an appropriately named file within the page resources. If the term <code>feature</code>, <code>cover</code> or <code>thumb</code> is found anywhere in the image filename, then it will be used for that purpose.</p><p>The
<ahref=https://jpanther.github.io/congo/samples/>Samples section</a> provides a number of examples of these images (and you can view the
<ahref=https://github.com/jpanther/congo/tree/dev/exampleSite/content/samplestarget=_blankrel=noreferrer>source code</a> to see the file structure).</p><h3id=taxonomiesclass="relative group">Taxonomies <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=#taxonomiesaria-label=Anchor>#</a></span></h3><p>Congo is also flexible when it comes to taxonomies. Some people prefer to use <em>tags</em> and <em>categories</em> to group their content, others prefer to use <em>topics</em>.</p><p>Hugo defaults to using posts, tags and categories out of the box and this will work fine if that’s what you want. If you wish to customise this, however, you can do so by creating a <code>taxonomies.toml</code> configuration file:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/taxonomies.toml</span>
</span></span></code></pre></div><p>This will replace the default <em>tags</em> and <em>categories</em> with <em>topics</em>. Refer to the
<ahref=https://gohugo.io/content-management/taxonomies/target=_blankrel=noreferrer>Hugo Taxonomy docs</a> for more information on naming taxonomies.</p><p>When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.</p><h2id=menusclass="relative group">Menus <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=#menusaria-label=Anchor>#</a></span></h2><p>Congo has two menus that can be customised to suit the content and layout of your site. The <code>main</code> menu appears in the site header and the <code>footer</code> menu appears at the bottom of the page just above the copyright notice.</p><p>Both menus are configured in the <code>menus.en.toml</code> file. Similarly to the languages config file, if you wish to use another language, rename this file and replace <code>en</code> with the language code you wish to use. Menu links will be sorted from lowest to highest <code>weight</code>, and then alphabetically by <code>name</code>.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/menus.en.toml</span>
</span></span></code></pre></div><h3id=basic-linksclass="relative group">Basic links <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=#basic-linksaria-label=Anchor>#</a></span></h3><p>The <code>name</code> parameter specifies the text that is used in the menu link. You can also optionally provide a <code>title</code> which fills the HTML title attribute for the link.</p><p>The <code>pageRef</code> parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the <code>url</code> parameter can be used.</p><p>Further customisation can be achieved through the use of special theme parameters. Providing <code>params</code> within a link allows the addition of an <code>icon</code>, the ability to toggle the link text with <code>showName</code> and to optionally set a <code>target</code> for the URL. In the example above, the GitHub link will only display as an icon and will open the link in a new window.</p><h3id=action-linksclass="relative group">Action links <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=#action-linksaria-label=Anchor>#</a></span></h3><p>There is a special case for creating menu items for links that take theme actions. These are denoted using the <code>action</code> parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.</p><p>There are three valid theme actions:</p><ul><li><code>appearance</code> will create a link to the appearance switcher</li><li><code>locale</code> will create a drop down picker to access translated content</li><li><code>search</code> will create a link to the site search</li></ul><p>Both menus are completely optional and can be commented out if not required. Use the template provided in the default file as a guide.</p><h2id=detailed-configurationclass="relative group">Detailed configuration <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=#detailed-configurationaria-label=Anchor>#</a></span></h2><p>The steps above are the bare minimum configuration. If you now run <code>hugo server</code> you will be presented with a blank Congo website. Detailed configuration is covered in the
