Skip to main content
  1. posts/

Extend Hugo/Congo Theme: Adding Links to Unsupported Platforms

The Congo theme for Hugo website builder, provides a convenient way to add links to your profiles on various platforms. However, you might encounter a situation where the platform you want to link to isn’t supported by default. For instance, I wanted to add a link to my Goodreads profile, but there was no built-in support for it. In this guide, I’ll show you how to add custom links to the Congo theme with minimal effort.

Important Note: This process leverages features of the Congo theme, not Hugo itself. Keep this distinction in mind as you follow the steps.

Step-by-Step Guide #

  1. Find the Icon Head over to Iconfinder and search for an SVG icon representing the platform you want to link to (e.g., Goodreads).

  2. Download the SVG Icon Once you’ve found the appropriate icon, download it and save it to the following directory in your Hugo project:

    assets/icons
    

    Note: The icon must be in SVG format, and its filename must match the platform key you use. For example: goodreads.svg

  3. Edit the SVG Icon Open the SVG file in a text editor or an SVG editor. Change the fill attributes value to currentColor and remove any xml metadata tags to ensure the icon will adapt to the theme’s colors. Here’s an example of a simplified SVG:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="currentColor" d="M..."/>
    </svg>
    
  4. Add the Profile Link Open the config/_default/languages.en.toml file (or some other language file depending on your project’s configuration) and locate the params.authors section. Add an entry for the new profile link:

    [params.author]
    links = [
      ...
      { goodreads = "https://www.goodreads.com/your-profile" },
      ...
    ] 
    
  5. Test the Changes Restart your local Hugo server and verify that the new link appears correctly in the profile links section of your site. The icon should display in your theme’s colors.

  6. Repeat the steps To add links to other platforms.

This approach ensures consistency with the Congo theme’s design while allowing you to personalize your site with links to your favorite platforms. Happy customizing!