Estimated reading time: 3 minutes

We have seen how Hugo organizes the contents and how the articles are written. Now, Let's take a step forward and talk about the themes. Imagine the theme like the “dress” of your site: This is what you decide how your pages will appear, the colors, the arrangement of the news and everything else. Without a theme, Hugo would not know how to transform your Markdown texts into something beautiful to see.

What are the themes and why they are important?

In simple words, a Di Hugo Theme It is a set of HTML files (which define the structure of the pages), CSS -style sheets (which give color and shape) and, sometimes, file JavaScript (To add interactivity). These files work together to take the data of your articles (security, texts, images you put in the markdown) and present them in a specific way.

Because they are important?

1. Visual appearance: A good theme makes your site professional and captivating.
2. Automatic organization: The theme knows how to arrange the news in evidence, The other news, the lateral menu and the Footer, Just as we discussed.
3. Ease of use: You don't have to write all the HTML and CSS code from scratch. Choose a theme, and much of the work is already done.
4. Flexibility: If you don't like the appearance of your site anymore, You can simply change theme without even touching your article.

Where you find the themes and how you use them?

There are thousands of free and paid Hugo themes, ready for use. The best place to look for them is the Hugo Themes showcase.

How to install a theme?

Usually, The installation of a theme takes place in a few simple steps:

1. Choose the theme: Find a theme that you like and that adapts to the needs of your journalist site (for example, one with a good disposal for posts and a sidebar).
2. Download the theme: Most themes are available on Github. Download them by cloning theirs “deposit” (repository) in the folder themes/ of your Hugo project.
   • Open yours Terminal.
   • Navigate in the folder of your Hugo website (the one it contains config.toml).
   • Type a command similar to this (replacing [nome-tema] and the URL with those of the theme you have chosen):
     
     git submodule add https://github.com/GoHugoIO/Ananke.git themes/ananke
     
     This command downloads the theme “Ananke” (A very popular Hugo theme to start) in the folder themes/ananke.
3. Activate the theme: You have to tell Hugo which theme to use. Open the configuration file of your site, config.toml, and add or modify the line theme:
   
   

   baseURL = 'http://example.org/'
   languageCode = 'it-it'
   title = 'Il Blog del Giornalista Indipendente'
   theme = 'ananke' # <-- Aggiungi o modifica questa rigaSave the file.        

4. Perform Hugo: Now, When you launch the command hugo server -D (To see your site locally), Hugo will use the theme you have chosen to view your content.

Customize your theme

Even if a theme offers you a solid base, Often you want to customize it a bit’ To make it unique. Here are the foundations of how you can do it without having to learn to program from scratch:

• Configuration files (config.toml): Many themes offer a myriad of options that you can set directly in config.toml. You can change colors, Add the logo, Set the navigation menus, and much more, Simply by changing lines in this file. The file README of the theme you choose will give you all the instructions.
• Overwrite the layouts: If you want to make more advanced changes (for example, change the arrangement of the news on the big one on the homepage), You can create files with the same name and path in your folder layouts/ principal. These files they will overwhelm those of the theme. For example, If you want to change the homepage, creates layouts/index.html And Hugo will use your file instead of that of the topic.
• Add custom CSS: If you just want to change some color or size of the text, The simplest thing is to create your own CSS file (eg, static/css/custom.css) and connect it to the theme (Often there is already an option in config.toml or a part in baseof.html of the theme that allows it).

The magic of partial

In our previous example, we talked about sidebar and footer. These are excellent candidates for i “partial”. A partial It is a small piece of HTML code that you can reuse in different pages of your site.

For example, the logic to show the “News in evidence” in the side menu could be enclosed in a file called layouts/partials/sidebar.html. Then, In each page layout (come index.html the single.html), you just need to call it back with a simple command like {{ partial "sidebar.html" . }}. This helps you keep the code clean and tidy.

Understanding the themes and how to customize them will give you incredible control on the appearance of your site, allowing you to create a unique experience for your readers without having to become a web developer.