Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes add section archetype Jan 11, 2019
assets fix margins of copy on mobiles Feb 8, 2019
exampleSite improve quotes style Jan 28, 2019
images update README Jan 11, 2019
layouts remove hr Jan 28, 2019
static add logo support Jan 11, 2019
.dockerignore remove postCSS Jan 9, 2019
.gitignore remove postCSS Jan 9, 2019
Dockerfile fix makefile Jan 10, 2019
LICENSE update LICENSE Jan 19, 2019
README.md update README Jan 20, 2019
makefile improve makefile Jan 11, 2019
theme.toml update personal info Jan 19, 2019
usage.sh improve makefile Jan 9, 2019


Terrassa - Hugo Theme

Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility made from scratch.

Hugo Terrassa theme screenshot

Theme features

  • Coherent responsive design.
  • Consistent design throughout the entire site.
  • Classic navigation menu in large screen sizes.
  • Hamburger navigation menu in small screen sizes.
  • Great focus on accessibility.
  • Customizable call to action on the home page.
  • Contact form.
  • Ready for blogging.

And much more.


To install Terrassa run the followings command inside your Hugo site:

$ cd themes
$ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassa


$ cd themes
$ git submodule add https://github.com/danielkvist/hugo-terrassa-theme.git terrassa

You can also download the last release here.

Back to your Hugo site directory open the config.toml file and add the following line:

theme = "terrassa"

And that's it.


Terrassa includes three base archetypes:

  • default: for content such as blogs posts.
  • section: for the sections on your Home page.
  • page: for pages like the About page.

So be careful. Creating a new site with Hugo also creates a default archetype that replaces the one provided by Terrassa.

Home and Single pages

To create your home page run the following command inside your Hugo site:

$ hugo new _index.md -k page

Or to create another page:

$ hugo new example.md -k page

You'll get something like this:

title: ""
description: ""
images: []
draft: true
menu: main
weight: 0

Some properties are used as follows:

  • title: is the name that will be displayed in the menu. In the rest of the single pages the main title of the content.
  • description: in the case of the home page the description is not shown. In the rest of the single pages it is shown as a subtitle.
  • images: in the case of the home page the first image is used as the background image for the hero and to share on social networks (with Twitter Cards and Facebook Graph). In every other page or post is used only for share on social networks.
  • weight: sets the order of the items in the menu.

Home page Sections

To create a new section in your Home page follow the next steps:

$ hugo new sections/example.md -k section

You'll come across something like this:

title: "Example"
description: ""
draft: true
weight: 0

The title is used as the title of your new section and the content is the body. At this moment the description is not used for anything.

The weight defines the order in case of having more than one section.

Blog or List pages

To create a Blog or a page with a similar structure follow these steps:

$ hugo new posts/_index.md -k page

In this case it is only necessary to set, if wanted, the title and the weight in the _index.md.

To add a new posts run the following command:

$ hugo new posts/bad-example.md

Inside this file you'll find something like this:

title: "Bad example"
description: ""
date: 2018-12-27T21:09:45+01:00
publishDate: 2018-12-27T21:09:45+01:00
author: "John Doe"
images: []
draft: true
tags: []

The title and description are used as the main title and subtitle respectively.

You can find more information about each parameter in the official documentation.

Then, the corresponding section will show a list of cards with the title, the date, a summary of the content (truncated to 480 words) and a list of tags if any.

Hugo Terrassa theme Blog section screenshot


For the contact page follow these instructions:

$ hugo new contact/_index.md -k page

The title and description will be used as the main title and subtitle respectively with a contact form. The rest of the options are defined in the config.toml.


For the configuration check the config.toml of the exampleSite and the official documentation to see all the options.

Font Awesome

Terrassa uses the Font Awesome icons through a CDN. Something that for the moment affects the performance.