Universal theme for Hugo, it stands out with its clean design and elegant typography.

  • By DevCows
  • Last update: Dec 24, 2022
  • Comments: 16

Universal Theme for Hugo

Code Climate

Universal is a clean and stylish website template built with Bootstrap. It stands out with its clean design and elegant typography.

Demo site: https://devcows.github.io/hugo-universal-theme

Sponsor this project:

This Hugo theme was ported from Bootstrapious for training and fun. It has a very nice and customizable landing page, a comments system by Disqus, site search by Google, contact forms by Formspree, Google Analytics, and optional widgets for the sidebar.


Table of Contents


  • Responsive design
  • Customizable landing page
    • Carousel
    • Testimonials
    • Features
    • Customers
    • Recent posts
  • Contact form by Formspree
  • Google search
  • Disqus comments
  • Google Analytics


Go to the directory where you have your Hugo site and run:

$ mkdir themes
$ cd themes
$ git clone https://github.com/devcows/hugo-universal-theme

For more information read the official setup guide of Hugo.


After installing the Universal theme successfully, we recommend you to take a look at the exampleSite directory. You will find a working Hugo site configured with the Universal theme that you can use as a starting point for your site.

First, let's take a look at the config.toml. It will be useful to learn how to customize your site. Feel free to play around with the settings.


Available translations are in the /i18n directory. You can configure the language modifying the following key.

defaultContentLanguage = "en"


You can change the color of the theme by modifying the following key.

style = "default"

Available options are: default (light-blue), blue, green, marsala, pink, red, turquoise, violet. There is the possibility to override the CSS and set your custom styles, override this file static/css/custom.css in your site.


The optional comments system is powered by Disqus. If you want to enable comments, create an account in Disqus and write down your shortname.

disqusShortname = "devcows"

You can disable the comments system by leaving the disqusShortname empty.

Google Analytics

You can optionally enable Google Analytics. Type your tracking code in the ``.

googleAnalytics = "UA-XXXXX-X"

Leave the googleAnalytics key empty to disable it.


A logo can be selected, two parameters logo and logo_small can be defined. By default logo is used for medium and big screens and the logo_small value will be used when the site is rendered on small screens. Also there is the possibility to disable the logo and render a alternative text.

    disabled_logo = false
    logo_text = "Universal"

    logo = "img/logo.png"
    logo_small = "img/logo-small.png"

Contact form

You can optionally create a contact page and include a contact form.

A contact page is just like a regular Hugo page. But it must include the field id with the value contact.

title = "Contact"
id = "contact"

You can enable or disable the Google Maps widget on the contact page by setting params.enableGoogleMaps to true or false in config.toml. Make sure to also provide a valid googleMapsApiKey if you decide to enable the widget – otherwise it likely won't work. By clicking on the pin, Google Maps opens a route description with the coordinates latitude and longitude. Additionally, you can define the direction if you want to have another destination for the directions or the Google Maps entry of your company. If enableGoogleMaps is set to false on the other hand, the subsequent googleMapsApiKey, latitude, longitude and direction will be ignored.

Example configuration:

    enableGoogleMaps = true
    googleMapsApiKey = "site_key_for_google_maps"

    latitude = "-12.043333"
    longitude = "-77.028333"
    direction = "Desamparados Station, Distrito de Lima 15001, Peru"

Since Hugo sites are static, the contact form uses Formspree as a proxy. The form makes a POST request to their servers to send the actual email. Formspree and the submissions for the free plan are limited, checkout the plans for details.

To enable the form in the contact page, just type your Formspree email in the config.toml file, and specify whether to use ajax(paid) to send request or plain HTTP POST(free). Also there is the possibility to enable a captcha using recaptcha.

    email = "[email protected]"
    contact_form_ajax = false

    enableRecaptchaInContactForm = true
    googleRecaptchaKey = "site_key_for_google_recaptcha"


You can also define the menu items that will appear in the top bar. Edit the [[params.menu]] entries to create your menu.

    name = "Contact"
    url  = "/contact"
    weight = 4

The weight parameter will determine the order of the menu entries. A top level menu item can contain a dropdown with an optional image, sections and multiple columns of menu items.

To create a single list of menu items in the dropdown, first give your top level menu item unique identifier:

    name       = "Home"
    identifier = "menu.home"
    url        = "/"
    weight     = 1

Now create additional menu items and use the above unique identifier as the value for the parent attribute:

    name       = "Option 1: Default Page"
    url        = "/"
    weight     = 1
    parent     = "menu.home"

    name       = "Option 2: Application"
    url        = "/"
    weight     = 2
    parent     = "menu.home"

It is also possible to display a dropdown menu with 4 columns. This theme supports 2 variations:

  • 4 columns of menu items with sections
  • 2 column wide image + 2 columns of menu items with sections

To display 4 columns of menu items, start using sections. Sections are menu items treated special by this theme:

    name       = "All Pages"
    identifier = "menu.allpages"
    url        = ""
    weight     = 4

    name       = "Home"
    identifier = "section.ap-home"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 1

    name       = "Portfolio"
    identifier = "section.ap-portfolio"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 2

    name       = "Shop"
    identifier = "section.ap-shop"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 3

    name       = "Blog"
    identifier = "section.ap-blog"
    url        = ""
    weight     = 3
    parent     = "menu.allpages"
    post       = 4

    name       = "Blog Listing Big"
    url        = "/blog/"
    weight     = 1
    parent     = "section.ap-blog"

The above example shows a reduced version of the All Pages menu item from the example site. As you can see, we first create menu items with an identifier starting with section.. If you create entries like this, these will appear as section headers in your drop down.

Each of these entries contain values for both the weight and post attribute. The post attribute is hijacked to indicate in which column a section will be put in. Within a column, the weight value is respected to show the sections top to bottom.

Use to the unique section identifier (e.g. section.ap-blog) as the parent value to add a menu item to a specific section. Using weight and post on the sections allow you to balance the columns with approximately the same amount of entries.

To display a 2 column wide image and 2 columns of menu items, the process is similar as above. However, we hijack the url field of the top level menu item to link the image from our static assets:

    name       = "Portfolio"
    identifier = "menu.portfolio"
    url        = "/img/template-homepage.png"
    weight     = 3

When a url is filled in, only column 1 and 2 (the post value in the section menu items) will be displayed. When using an image, don't configure section menu items in column 3 or 4. These will not be rendered.

Important: Do not change the identifier key of existing menu entries!

Sidebar widgets

You can enable/disable the sidebar widgets that will be shown in the blog section. The following widgets are currently available:

  • Search bar (powered by Google)
  • Categories list
  • Tags list

You can enable/disable them under params.widgets.

    search = true
    categories = true
    tags = true

Top bar

The top bar is typically used to provide contact information and social links. It is disabled by default, and it can be enabled inside the params.topbar settings.

    enable = true
    text = "<p>Contact us on +420 777 555 333 or [email protected]</p>"

The text shows up on the left side and accepts HTML.

The social links on the right side are configured as a top-level menu.

    weight = 1
    name = "GitHub"
    url = "https://github.com/devcows/hugo-universal-theme"
    pre = "<i class='fas fa-2x fa-github'></i>"

    weight = 2
    name = "Facebook"
    url = "http://facebook.com"
    pre = "<i class='fas fa-2x fa-facebook'></i>"

Menu behavior

The dropdown menu is displayed by default when the user clicks on the menu item. However, you can also use the dropdown_mouse_over setting to change this behavior and use the mouse over instead.

    dropdown_mouse_over = true

Blog post thumbnails

After creating a new post you can define a banner by entering the relative path to the image.

banner = "img/banners/banner-4.jpg"

It must contain a relative path to the banner inside the static directory.

Landing page

The landing page consists in many sections that can be activated and configured individually. Let's go through all sections from top to bottom.


The carousel content is configured in the data directory.

└── carousel
    ├── customizable.yaml
    ├── design.yaml
    ├── features.yaml
    └── multipurpose.yaml

Each carousel entry is represented as a YAML file inside data/carousel. Let's see the customizable.yaml as an example of a carousel entry.

weight: 4
title: "Easy to customize"
description: >
  <ul class="list-style-none">
    <li>7 preprepared colour variations.</li>
    <li>Easily to change fonts</li>
image: "img/carousel/template-easy-code.png"
href: "https://devcows.github.io/hugo-universal-theme/"

The weight field determines the position of the entry. title is a text-only field. The description field accepts HTML code. The image must contain the relative path to the image inside the static directory. The optional href field contains a relative or absolute url that the user will be redirected to when clicking the carousel (specific to each carousel item).

Once the carousel is configured, some options can be defined like: auto play, speed, etc. in the config.toml file.

    enable = true
    auto_play = true
    slide_speed = 2000
    pagination_speed = 1000


Features are also defined in the data directory just like the carousel:

└── features
    ├── consulting.yaml
    ├── email.yaml
    ├── print.yaml
    ├── seo.yaml
    ├── uiux.yaml
    └── webdesign.yaml

The content of the consulting.yaml example feature file looks like this:

weight: 4
name: "Consulting"
icon: "fas fa-lightbulb"
url: ""
description: "Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring."

The meaning of the individual YAML keys is as follows:

Key Description
weight A means to set the order of multiple features; features with a lower weight are displayed first (left to right, top to bottom)
name The title text below the feature icon; Markdown is supported
icon The CSS class of the feature icon; in this example we have used icons powered by FontAwesome
url An optional URL the feature icon should point to; if specified, the icon will become a clickable hyperlink
description A short text below the title text to describe the feature; Markdown is supported

Once you have completed your features, enable them in the config.toml file. Also the number of elements per row can be defined, by default is 3 (choose a divisor of 12 like 2, 3, 4 or 6).

    enable = true
    cols = 3


Testimonials are defined in the data directory.

└── testimonials
    ├── 1.yaml
    ├── 2.yaml
    ├── 3.yaml
    ├── 4.yaml
    └── 5.yaml

You can add as many testimonials files as you want. Be sure you fill in all fields as in the following example.

text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
name: "John McIntyre"
position: "CEO, TransTech"
avatar: "img/testimonials/person-1.jpg"

Then, enable it in the configuration file and add a title and subtitle.

    enable = true
    title = "Testimonials"
    subtitle = "We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us."

See more

This section is used to provide a link to another place. It can be an external site, or a page or post within your Hugo site.

You can enable it in the configuration file.

    enable = true
    icon = "far fa-file-alt"
    title = "Do you want to see more?"
    subtitle = "We have prepared for you more than 40 different HTML pages, including 5 variations of homepage."
    link_url = "http://your-site.com/more"
    link_text = "Check other homepages"


The clients section is used to show a list of logos of companies you have collaborated with. The clients are defined in the data directory as YAML files.

└── clients
    ├── 1.yaml
    ├── 2.yaml
    ├── 3.yaml
    ├── 4.yaml
    ├── 5.yaml
    └── 6.yaml

Each client file contains the following information.

name: "customer-1"
image: "img/clients/customer-1.png"
url: "http://www.customer-1.com"

The name of the client. image is a relative path to the logo inside the static directory. And url is an optional field in case you want to link the logo to the client's website.

Then, you can enable the section in the configuration file.

    enable = true
    title = "Our Partners"
    subtitle = "We have proudly collaborated with the following companies."

Recent posts

The recent posts sections shows the four latest published blog posts, with their featured image and an optional summary. It defaults to show recent posts from all main sections. This is either the section with the most posts or can be set explicitly in the configuration file (see linked docs).

You can enable it in the configuration file.

summaryLength = 70

    enable = true
    title = "From our blog"
    subtitle = "Pellen"
    hide_summary = false

Recent posts use .Summary property and by default, Hugo automatically takes the first 70 words of your content as its summary and stores it into the .Summary page variable for use in your templates. You may customize the summary length by setting summaryLength in your site configuration.


In the footer there are three blocks customizables: About us, Recent posts and contact. Each block can be set via parameters.

About us

A text can be defined, in case there is no text defined the entire block will be hidden:

    about_us = "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>"
Recent posts

Recent posts block can be enabled or disabled (hidden).

    enable = true

In contact section there is a button to redirect to contact page, there is the possibility to customize the url also a contact text can be defined, in case there is no text defined the entire block will be hidden:

    contact_url = "/contact"
    address = """<p class="text-uppercase"><strong>Universal Ltd.</strong>
        <br>13/25 New Avenue
        <br>Newtown upon River
        <br>45Y 73J
        <strong>Great Britain</strong>

Meta tags

The following HTML metadata can be set for every page. While the default value for some of them can be defined in config.toml, all of these properties can also be set through the respective Hugo front matter variables:

HTML meta name/property Hugo front matter variable Default variable in config.toml
article:author facebook_author -
article:publisher facebook_site facebook_site
author author -
description / og:description / twitter:description description defaultDescription
keywords keywords defaultKeywords
og:image / twitter:image banner default_sharing_image
title / og:title / twitter:title title -
twitter:creator twitter_author -
twitter:site twitter_site twitter_site

Besides, certain Open Graph metadata is automatically set:

You can set default values for all pages in the config.toml file as below:

    defaultKeywords = ["devcows", "hugo", "go"]
    defaultDescription = "Site template made by Devcows using Hugo"
    default_sharing_image = "img/sharing-default.png"
    facebook_site = "https://www.facebook.com/GolangSociety/"
    twitter_site = "GoHugoIO"

The resulting HTML will be the following:

<meta name="keywords" content="devcows, hugo, go">
<meta name="description" content="Site template made by Devcows using Hugo">
<meta property="og:description" content="Site template made by Devcows using Hugo">
<meta property="og:image" content="img/sharing-default.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="420">
<meta property="article:publisher" content="https://www.facebook.com/GolangSociety/">
<meta name="twitter:description" content="Site template made by Devcows using Hugo">
<meta name="twitter:site" content="@GoHugoIO">

You can also override the default values from the config.toml by setting the respective keys in the individual pages front matter. As an example, here's the front matter from the faq.md file in the exampleSite directory:

title = "FAQ"
description = "Frequently asked questions"
keywords = ["FAQ","How do I","questions","what if"]

Which results in the following HTML:

<meta name="keywords" content="FAQ,How do I,questions,what if">
<meta name="description" content="Frequently asked questions">
<meta property="og:description" content="Frequently asked questions">
<meta name="twitter:description" content="Frequently asked questions">

If your site needs a custom Javascript library or CSS style you can override this file layouts/partials/custom_headers.html with the proper content like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


In order to see your site in action, run Hugo's built-in local server.

$ hugo server -w

Now enter localhost:1313 in the address bar of your browser.

For more information check out the official Hugo documentation.


Did you find a bug or do you have an idea for a new feature? Feel free to use the issue tracker to let us know. Or make a pull request directly.


This port is released under the MIT License. Check the original theme license for additional licensing information.


Thanks to Steve Francia for creating Hugo and the awesome community around the project. And also thanks to Bootstrapious for creating this awesome theme.




  • 1

    why define logo?

    If I define a filename other than img/logo.png as the logo, it isn't used because the layouts/partials/nav.html includes the hard-coded path and filename for both img/logo.png and img/logo-small.png. Is it a problem of a magic constant defined in nav.html or my misinterpretation of documentation?

  • 2

    Use position:sticky instead of javascript

    This make the fixed navbar a lot less distracting, makes the page feel faster, and it's more efficient.

    The big change is that it splits the top and nav bars into separate <header> tags, to make sure that the navbar-affixed part has the whole page as its block container. The appearance should remain the same, though.


  • 3

    Additional Favicon/Icon Support


    Would it be possible to add something like the following to layouts/partials/head.html ?

      <!-- Favicon and apple touch icons-->
    	<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.BaseURL }}/img/apple-touch-icon.png">
    	<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}/img/favicon-32x32.png" sizes="32x32">
    	<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}/img/favicon-16x16.png" sizes="16x16">
    	<link rel="manifest" href="{{ .Site.BaseURL }}/img/manifest.json">
    	<link rel="mask-icon" href="{{ .Site.BaseURL }}/img/safari-pinned-tab.svg" color="#6aae7a">
    	<link rel="shortcut icon" href="{{ .Site.BaseURL }}/img/favicon.ico">
    	<meta name="msapplication-TileColor" content="#6aae7a">
    	<meta name="msapplication-TileImage" content="{{ .Site.BaseURL }}/img/mstile-144x144.png">
    	<meta name="msapplication-config" content="{{ .Site.BaseURL }}/img/browserconfig.xml">
    	<meta name="theme-color" content="#ffffff">
    	<!-- old icons
      <link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.ico" type="image/x-icon" />
      <link rel="apple-touch-icon" href="{{ .Site.BaseURL }}img/apple-touch-icon.png" /> -->
      <!-- owl carousel css -->
  • 4

    apply class="active" to currently active page/section

    Not entirely sure how to achieve this. But the current behaviour is the only indication of page is the breadcrumb.

    The Bootstrapious theme has the behaviour of active pages, but that is hard coded, not sure how to do the same with Hugo.

    Maybe some sort of conditional logic?

  • 5


    added favicons partial default favicons params in config.toml added favicons from realfavicongenerator to root of the static dir added favicon partial to head partial added manifest.json for android to static dir

  • 6

    recent_posts is not working

    According to the content of layouts/partials/recent_posts.html it should show 4 most recent post in the recent_posts section. Somehow, the exampleSite only show one post, and the post isn't right.

  • 7

    Support for menus with sections and optional image

    This is a port of the 2-year old PR https://github.com/devcows/hugo-universal-theme/pull/111 so it can be merged cleanly originally written by @ringods

    This PR offers:

    • dropdown menu with single list of menu items
    • dropdown menu with 4 columns of menu items, grouped in sections
    • dropdown menu with 2 column wide image, followed by 2 columns of menu items grouped in sections.

    Part of https://github.com/devcows/hugo-universal-theme/issues/101

  • 8

    Support for menus with sections and optional image.

    @GeorgeWL @adrianmo,

    I reviewed the menu navigation to support more of the upstream theme. This PR offers:

    • dropdown menu with single list of menu items
    • dropdown menu with 4 columns of menu items, grouped in sections
    • dropdown menu with 2 column wide image, followed by 2 columns of menu items grouped in sections.

    Theme adapted and documentation added.

    Part of #101

  • 9

    Is it possible to display the top bar (with the social links) on all pages?

    As it stands now, this top bar is displayed only on the home page - not in any of the other pages or in the blog for instance. Is there a way to change that ?

  • 10

    Error while building website initially

    C:\Users\Nirzaf\source\repos\hugo-quad\quadrate-tech>hugo server Building sites … WARN 2019/10/25 14:23:25 Page's .Hugo is deprecated and will be removed in a future release. Use the global hugo function. Total in 387 ms Error: Error building site: failed to render pages: render of "home" failed: "C:\Users\Nirzaf\source\repos\hugo-quad\quadrate-tech\themes\hugo-universal-theme\layouts\index.html:3:10": execute of template failed: template: index.html:18:11: executing "index.html" at <partial "carousel.html" .>: error calling partial: "C:\Users\Nirzaf\source\repos\hugo-quad\quadrate-tech\themes\hugo-universal-theme\layouts\partials\carousel.html:3:10": execute of template failed: template: partials/carousel.html:3:10: executing "partials/carousel.html" at : wrong number of args for len: want 1 got 0

  • 11

    improve navigation highlighting:

    • highlight blog section when on taxonomy sites (/tags/* and /categories/*)
    • highlight home, too (same as PR #208)

    The blog section is identified by its identifier key, which has the advantage that users can change the name and url of the blog menu item.

    There is one basic assumption behind the code: There is only one blog section in the whole site. I think this assumption is normally satisfied. If someone really wanted to create a site with multiple different blog sections, he/she would have to make other additional changes to this theme – which requires advanced knowledge of Hugo's internals anyway. For someone capable doing this, it should be rather trivial to also adjust the navigation partial to work as desired.

  • 12

    Problem with build_site

    Hello, I am using this theme via blogdown and it is awesome. But I am having a recurring problem that I cannot solve properly. I am able to make the webpage work and make it live with the "blogdown:::build_site()" command. Yet sometimes, after I edit some content I get the following return after running the same code:

    Error: module "themes/hugo-universal-theme" not found; either add it as a Hugo Module or store it in "C:\Users\benle\Documents\GitHub\ladrillosyquetzales\themes\hugo-universal-theme\themes".: module does not exist

    I have looked online for posts on this problem and solutions, yet I have not been able to find something that works for me. The only similar issue that I saw documented is presented here, yet the solution is not clear.

    Any help is greatly appreciated.

  • 13

    Add hide_image feature for recent posts.

    To support text-only posts, I propose to add a configuration property hide_image to hide an image in recent posts, referring to hide_summary.

    Also the recent posts block in the footer has an independent enable property, so I added a separate hide_image property here as well.

    Please check this PR.

    Best regards.

  • 14

    Anyone implemented a Portfolio page?

    As anyone implemented the Portfolio section of this theme? I'm trying to mimic the Boostrapious theme, and so I created a list.html page in order to display my portfolio but I couldn't get it to display properly. Following is my code Any help will be appreciated

        <div id="content">
            <div class="container">
                <section class="bar">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="heading">
                      <p class="lead">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                  <div class="row portfolio text-center">
                  {{ range .Pages }}
                    <div class="col-md-4">
                      <div class="box-image">
                        <div class="image"><img src="{{ .Params.banner | relURL }}" alt="" class="img-fluid">
                          <div class="overlay d-flex align-items-center justify-content-center">
                            <div class="content">
                              <div class="name">
                                <h3><a href="{{ .Permalink }}" class="color-white">{{ .Title }}</a></h3>
                              <div class="text">
                                <p class="d-none d-sm-block">{{ .Summary }}</p>
                                <p class="buttons"><a href="{{ .Permalink }}" class="btn btn-template-outlined-white">{{ i18n "continueReading" }}</a></p>
                    {{ end }}
                <!-- /.row -->
            <!-- /.container -->
  • 15

    Open links in new page

    Hi there. Trying to find out how could the links in the bodies of by blog posts and pages open in new tab ?

    I tried this methods but it does not seem to work: https://agrimprasad.com/post/hugo-goldmark-markdown/

    Any help appreciated thanks.

    P https://diapason.consulting

  • 16

    Improve README.md to ease the onboarding process for newcomers.

    I've stumbled upon a hard onboarding and spent several hours, which I believe might have been saved if the documentation had the lines I've added. This would let less experienced users like myself to start using this wonderful theme with less headache. As I already saw discussion in Issues about the same, that "theme doesn't work out of the box". So the clarification in pull-request would remove such issues and let many beginners to onboard faster and easier.