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.
Before creating any content, there are a few things you should set for a new installation. Starting in the config.toml file, set the baseURL and languageCode parameters. The languageCode should be set to the main language that you will be using to author your content.
# config/_default/config.toml
+Getting Started · Congo
+
+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.
Basic configuration #
Before creating any content, there are a few things you should set for a new installation. Starting in the config.toml file, set the baseURL and languageCode parameters. The languageCode should be set to the main language that you will be using to author your content.
# config/_default/config.toml
baseURL = "https://your_domain.com/"
languageCode = "en"
-
The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language.
Locate the languages.en.toml 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 languages.fr.toml.
Note that the language code in the language config filename should match the languageCode setting in config.toml. # config/_default/languages.en.toml
+
The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language.
Locate the languages.en.toml 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 languages.fr.toml.
Note that the language code in the language config filename should match the languageCode setting in config.toml. # config/_default/languages.en.toml
title = "My awesome website"
@@ -21,7 +21,7 @@
The [author] configuration determines how the author information is displayed on the website. The image should be placed in the site’s assets/ folder. Links will be displayed in the order they are listed.
If you need extra detail, further information about each of these configuration options, is covered in the Configuration section.
Colour schemes #
Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the colorScheme theme parameter. Valid options are congo (default), avocado, fire, ocean and slate.
# config/_default/params.toml
colorScheme = "congo"
-
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 Tailwind.
Congo (default) #
+
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 Tailwind.
Congo (default) #
Avocado #
@@ -31,7 +31,7 @@
Slate #
-
Although these are the default schemes, you can also create your own. Refer to the Advanced Customisation section for details.
Organising content #
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 pages for a static site, posts for a blog, or projects for a portfolio.
Here’s a quick overview of a basic Congo project. All content is placed within the content folder:
Although these are the default schemes, you can also create your own. Refer to the Advanced Customisation section for details.
Organising content #
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 pages for a static site, posts for a blog, or projects for a portfolio.
Directory structure #
Here’s a quick overview of a basic Congo project. All content is placed within the content folder:
.
├── assets
│ └── img
│ └── author.jpg
@@ -48,10 +48,21 @@
│ └── index.md
└── themes
└── congo
-
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 official Hugo docs for more information.
Congo is also flexible when it comes to taxonomies. Some people prefer to use tags and categories to group their content, others prefer to use topics.
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 taxonomies.toml configuation file:
# config/_default/taxonomies.toml
+
The key thing to note here is that within the content directory, normal article pages are named index.md while list pages are named _index.md. Any assets that go along with the article should be placed in a sub-directory alongside the index file. 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 official Hugo docs for more information.
Feature, cover and thumbnail images #
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: feature, cover and thumb.
In the example below, a cover and thumb image have been provided for the first-post article:
.
+└── content
+ └── posts
+ ├── _index.md
+ └── first-post
+ ├── cover.jpg
+ ├── index.md
+ └── thumb.jpg
+
The thumb image is used as the article thumbnail and will be displayed in article lists, and the cover image will be displayed at the top of the article content on individual article pages.
This example shows an article with a thumbnail image.
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. The feature image is a special type, and when present, it will be used in place of both the thumb and cover 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.
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 feature, cover or thumb is found anywhere in the image filename, then it will be used for that purpose.
The Samples section provides a number of examples of these images (and you can view the source code to see the file structure).
Taxonomies #
Congo is also flexible when it comes to taxonomies. Some people prefer to use tags and categories to group their content, others prefer to use topics.
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 taxonomies.toml configuration file:
# config/_default/taxonomies.toml
topic = "topics"
-
This will replace the default tags and categories with topics. Refer to the Hugo Taxonomy docs for more information on naming taxonomies.
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.
Congo has two menus that can be customised to suit the content and layout of your site. The main menu appears in the site header and the footer menu appears at the bottom of the page just above the copyright notice.
Both menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use.
# config/_default/menus.toml
+
This will replace the default tags and categories with topics. Refer to the Hugo Taxonomy docs for more information on naming taxonomies.
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.
Congo has two menus that can be customised to suit the content and layout of your site. The main menu appears in the site header and the footer menu appears at the bottom of the page just above the copyright notice.
Both menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use.
# config/_default/menus.toml
[[main]]
name = "Blog"
@@ -66,11 +77,10 @@
[[footer]]
name = "Privacy"
url = "https://external-link"
-
The name parameter specifies the text that is used in the menu link. You can also optionally provide a title which fills the HTML title attribute for the link.
The pageRef 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 url parameter can be used.
Menu links will be sorted from lowest to highest weight, and then alphabetically by name.
Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
Detailed configuration #
The steps above are the bare minimum configuration. If you now run hugo server you will be presented with a blank Congo website. Detailed configuration is covered in the Configuration section.
Congo provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
The layout of the homepage is controlled by the homepage.layout setting in the params.toml configuration file. Additionally, all layouts have the option to include a listing of recent articles.
Page layout #
The default layout is the page layout. It’s simply a normal content page that displays your Markdown content. It’s great for static websites and provides a lot of flexibility.
To enable the page layout, set homepage.layout = "page" in the params.toml configuration file.
Profile layout #
The profile layout is great for personal websites and blogs. It puts the author’s details front and centre by providing an image and links to social profiles.
The author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration sections for parameter details.
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
To enable the profile layout, set homepage.layout = "profile" in the params.toml configuration file.
Custom layout #
If the built-in homepage layouts aren’t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
To enable the custom layout, set homepage.layout = "custom" in the params.toml configuration file.
With the configuration value set, create a new custom.html file and place it in layouts/partials/home/custom.html. Now whatever is in the custom.html file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
To include recent articles on the custom layout, use the recent-articles.html partial.
As an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.
Recent articles #
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the homepage.showRecent setting to true in the params.toml configuration file.
The author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration sections for parameter details.
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
To enable the profile layout, set homepage.layout = "profile" in the params.toml configuration file.
Custom layout #
If the built-in homepage layouts aren’t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
To enable the custom layout, set homepage.layout = "custom" in the params.toml configuration file.
With the configuration value set, create a new custom.html file and place it in layouts/partials/home/custom.html. Now whatever is in the custom.html file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
To include recent articles on the custom layout, use the recent-articles.html partial.
As an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.
Recent articles #
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the homepage.showRecent setting to true in the params.toml configuration file.
The articles listed in this section are derived from the mainSections setting which allows for whatever content types you are using on your website. For instance, if you had content sections for posts and projects you could set this setting to ["posts", "projects"] and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: ["blog"].