Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility made from scratch.
I have decided to archive the project as I have been and am unable to give it the necessary support.
I started Terrassa as a way to experiment with Hugo and the Go template system and the truth is that I didn't expect the support that the project has been getting over time. Unfortunately over time I have had to move on to working with other technologies and on other projects and have never had enough time to re-familiarise myself with the code and continue working on the project.
Many thanks to all the people who have used Terrassa, who have sent PRs and above all to the people who encouraged me and talked about how they were using Terrassa to bring their projects to life.
- Coherent responsive design.
- Consistent design throughout the entire site.
- Classic navigation menu in large screen sizes.
- Hamburger menu in mobile devices.
- Focus on accessibility.
- Customizable call to action on the home page.
- Contact form.
- Ready for blogging.
- Multilingual Support
To install Terrassa run the followings command inside your Hugo site:
$ mkdir themes
$ cd themes
$ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassaOr
$ mkdir themes
$ cd themes
$ git submodule add https://github.com/danielkvist/hugo-terrassa-theme.git terrassaYou can also download the last release here.
Back to your Hugo site directory open the config.toml file and add or change the following line:
theme = "terrassa"You can find an example of the final configuration here.
baseurl = "/" # The base URL of your Hugo site
title = "titlehere" # The title of your Hugo site
author = "authorhere" # The author name
googleAnalytics = "" # Your Google Analytics tracking ID
enableRobotsTXT = true
language = "en-US"
paginate = 7 # The numbers of posts per page
theme = "terrassa" # Your Hugo themeThere's a lot more information about the basic configuration of an Hugo site here.
[params]
description = "" # Description for the meta description tag
favicon = "" # Relative URL for your favicon
logo = "" # Absolute URL for your logo[params.hero]
textColor = "" # Empty for default color[params.cta] # Call To Action
show = true
cta = "Contact" # Text message of the CTA
link = "contact" # Relative URL[params.separator]
show = false[params.contact]
email = ""
phone = ""
skype = ""
address = ""[params.social]
twitter = ""
facebook = ""
github = ""
gitlab = ""
codepen = ""
instagram = ""
pinterest = ""
youtube = ""
linkedin = ""
weibo = ""
mastodon = ""
tumblr = ""
flickr = ""
"500px" = ""Icons for social networks depend on Font Awesome.
[params.fa]
version = "" # Font Awesome version
integrity = "" # Font Awesome integrity for the Font Awesome script[params.copy]
message = ""[params.agreement]
message = "" # You can use HTML tags[params.posts]
showAuthor = true
showDate = true
showTags = true
dateFormat = "Monday, Jan, 2006"[params.form]
netlify = true # Only if you are using Netlify
action = ""
method = ""
inputNameName = ""
inputNameLabel = ""
inputNamePlaceholder = ""
inputEmailName = ""
inputEmailLabel = ""
inputEmailPlaceholder = ""
inputMsgName = ""
inputMsgLabel = ""
inputMsgLength = 750
inputSubmitValue = ""[privacy]
[privacy.googleAnalytics]
anonymizeIP = true
disable = false
respectDoNotTrack = true
useSessionStorage = false
[privacy.instagram]
disable = false
simple = false
[privacy.twitter]
disable = false
enableDNT = true
simple = false
[privacy.vimeo]
disable = false
simple = false
[privacy.youtube]
disable = false
privacyEnhanced = trueTo learn more about privacy configuration check the official documentation.
To add custom CSS you have to create a folder called assets in the root of your project. Then, create another folder called css inside assets. And finally, a file called custom.css inside css with your styles.
$ mkdir -p ./assets/css/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.
To create your home page run the following command inside your Hugo site:
$ hugo new _index.md -k pageOr to create another page:
$ hugo new example.md -k pageYou'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.
To create a new section in your Home page follow the next steps:
$ hugo new sections/example.md -k sectionYou'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.
To create a Blog or a page with a similar structure follow these steps:
$ hugo new posts/_index.md -k pageIn 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.mdInside 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.
For the contact page follow these instructions:
$ hugo new contact/_index.md -k pageThe 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.
If your site is multilingual, add each language to your config.toml parameters with the following structure:
[languages]
[languages.en]
languageName = "en"
weight = 1
contentDir = "content/en"
[languages.de]
languageName = "de"
weight = 2
contentDir = "content/de"
[languages.fr]
languageName = "fr"
weight = 3
contentDir = "content/fr"The theme assumes you have one default language, defined in config.toml as defaultContentLanguage. These pages will be at root of the URL, while the other languages will be in their own subdirectory.
You can overwrite all Site parameters in config.url by adding them to the respective language, for example:
[languages.de]
languageName = "de"
weight = 2
contentDir = "content/de"
title = "Das ist der deutsche Titel"
description = "Das ist die deutsche Beschreibung"For translating the contact form, add these parameters:
[languages.de.params]
[languages.de.params.form] # Translate contact form fields
inputNameLabel = "Name"
inputNamePlaceholder = "Dein Name"
inputEmailLabel = "E-mail"
inputEmailPlaceholder = "Deine E-Mail-Adresse"
inputMsgLabel = "Schreib etwas"
inputSubmitValue = "Abschicken"
[languages.de.params.cta] # Translate Call To Action
show = true
cta = "Kontakt"
link = "de/kontakt/" # Relative URLActivate the language switcher in the header by setting:
[params.languageSwitcher]
show = trueRead more about Hugo's Multilingual mode here: https://gohugo.io/content-management/multilingual/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent