If you’ve followed the Getting Started guide, your directory layout will look similar to this:
content
log
first-day
_index.md
second-day
index.md
third-day.md
_index.md
_index.md
themes
hugo-theme-relearn
…
hugo.toml
Hugo uses a union file system, which lets you combine multiple directories.
By default, it puts your root directory on top of the Relearn theme directory. Files in your root directory will replace theme files in the same location.
For example, if you create a file at layouts/partials/heading.html, it will override the theme’s themes/hugo-theme-relearn/layouts/partials/heading.html.
See this list, to learn which files are allowed to be overridden by you.
This makes it easy to customize the theme without changing files in the themes directory, making future theme updates simpler.
Warning
Don’t edit files inside the themes/hugo-theme-relearn directory. That’s not the recommended way to customize! Refer to the explanation above.
Don’t clone the theme repository and edit files there for your site. That’s not the recommended way to customize! Instead, follow the Getting Started guide.
defaultContentLanguage='en'[languages][languages.en]languageCode='en'languageName='English'title='My Website'weight=1[languages.pir]languageCode='art-x-pir'languageDirection='rtl'languageName='Pirrratish'title='Arrr, my Website'weight=2
defaultContentLanguage:enlanguages:en:languageCode:enlanguageName:Englishtitle:My Websiteweight:1pir:languageCode:art-x-pirlanguageDirection:rtllanguageName:Pirrratishtitle:Arrr, my Websiteweight:2
{"defaultContentLanguage":"en","languages":{"en":{"languageCode":"en","languageName":"English","title":"My Website","weight":1},"pir":{"languageCode":"art-x-pir","languageDirection":"rtl","languageName":"Pirrratish","title":"Arrr, my Website","weight":2}}}
Duplicate your content files and add language codes to their file names:
defaultContentLanguage='en'[languages][languages.en]contentDir='content/en'languageCode='en'languageName='English'title='My Website'weight=1[languages.pir]contentDir='content/pir'languageCode='art-x-pir'languageDirection='rtl'languageName='Pirrratish'title='Arrr, my Website'weight=2
defaultContentLanguage:enlanguages:en:contentDir:content/enlanguageCode:enlanguageName:Englishtitle:My Websiteweight:1pir:contentDir:content/pirlanguageCode:art-x-pirlanguageDirection:rtllanguageName:Pirrratishtitle:Arrr, my Websiteweight:2
{"defaultContentLanguage":"en","languages":{"en":{"contentDir":"content/en","languageCode":"en","languageName":"English","title":"My Website","weight":1},"pir":{"contentDir":"content/pir","languageCode":"art-x-pir","languageDirection":"rtl","languageName":"Pirrratish","title":"Arrr, my Website","weight":2}}}
Duplicate your content files into separate directories named by their language code:
Option By default the theme shows a language switcher in the lower part of the menu.
If you want to have more control, where the language switcher is positioned or you want to configure a different icon, see the chapter on sidebar configuration.
To disable the language switcher set disableLanguageSwitchingButton=true
Option The theme offers a way to version your site. This is useful if you want to keep older versions of your site available while also providing links to the current version. Each site version needs to be created separately and is functional independent of each other.
A version switcher will be displayed at the top of the sidebar if versioning is configured. If the user selects a different version, the theme will navigate to the actual page location but in the selected version. If this page does not exist in the selected version, the 404 page will be displayed.
If you want to have more control, where the version switcher is positioned or you want to configure a different icon, see the chapter on sidebar configuration.
Example: Versioning an Existing Nonversioned Site
Assume, you have written a documentation for an app. At some point you are a releasing a new major version. This new version requires enhanced documentation while the older documentation must still be available for users of the older app version.
Your site’s source files reside in the directory /home/me/mysite on your local disc. The current URL of your site (the value set in baseURL in your hugo.toml) is https://example.com/. When done, the URL of the latest version of your site should not change. The archived version of your site should be available at the URL https://example.com/v1.0/.
This is your intial config file before versioning:
/home/me/mysite/hugo.
baseURL='https://example.com/'
baseURL:https://example.com/
{"baseURL":"https://example.com/"}
To setup versioning, you have to do the following steps:
Prepare /home/me/mysite/hugo.toml of the current version for versioning.
add an array of all available versions
add information, which of these versions is the latest by setting the isLatest option on one item (here onto v2.0) in the versions array
add information, which of these versions your site actually is, by setting the version option (here to v2.0)
After the modifications the config file looks like:
Generate the archived site with the changed configuration and deploy the resulting directory to baseURL (here to https://example.com/v1.0/)
Now you’re ready to edit the content of your current version and proceed with your usual workflow.
A few things to note here:
version must be an identifier of one of the entries in the versions array
you are not limited with the baseURL; these can be absolute or relative to your server root, can also reside in sub-subdirectories or be subdomains
you can generate your archived versions into a sub-directory of the current version (as with this example)
if you generate your archived versions into a sub-directory take care in your workflow not to delete older archived versions during build
the example does not take version control systems into account (like git or subversion) as such a workflow is highly subjective
both sites are completely independent autonomous Hugo sites; if you want to test this setup locally, you will need two running Hugo servers
if you want to test this locally, you will need to adept the top level baseURL parameter as well as the baseURL parameter in the versions array to your local setup; best is to have preconfigured environment configs available
Example: Add a New Version to a Versioned Site
At some point, your version 2 of the app may be deprecated, too, as you’ve released a new version 3.
The structure from the previous example still applys. Your current version of your site’s source files reside in the directory /home/me/mysite on your local disc, the archived version in /home/me/mysite-0.1. The current URL of your site (the value set in baseURL in your hugo.toml) is https://example.com/. When done, the URL of the latest version of your site should not change. The archived version of your site should be available at the URL https://example.com/v2.0/.
You only need to generate the current and the new archived version of your site (v3.0 and v2.0), the former archived version (v1.0) doesn’t need to be generated again..
Prepare /home/me/mysite/hugo.toml of the current version for the new archived version.
add the new archived version to the array of available versions
change information, which of these versions is the latest by setting the isLatest option on one item (here onto v3.0) in the versions array
add information, which of these versions your site actually is, by setting the version option (here to v3.0)
After the modifications the config file looks like:
Generate the archived site with the changed configuration and deploy the resulting directory to baseURL (here to https://example.com/v2.0/)
Now you’re ready to edit the content of your current version and proceed with your usual workflow.
A few things to note here:
you don’t need to regenerate version 1 of your site as long as the version marked with isLatest=true hasn’t changed its baseURL parameter. The old archived versions will access the version index of the latest site using JavaScript to display all currently available versions in the version switcher
with each new version, you will need another Hugo server instance to run a complete local test
Example: Multilingual Setup
If you have a multilingual site and you have different baseURL settings for each language, you need to also configure versioning for each language separately!
To stay with the above example, here’s the configuration for your current version:
/home/me/mysite-2.0/hugo.
[languages][languages.en]baseURL='https://example.com/'contentDir='content/en'languageCode='en'languageName='English'title='My Website'weight=1[languages.en.params]version='v2.0'[[languages.en.params.versions]]baseURL='https://example.com/'identifier='v2.0'isLatest=truetitle='Latest'[[languages.en.params.versions]]baseURL='https://example.com/v1.0/'identifier='v1.0'title='v1.0'[languages.pir]baseURL='https://pir.example.com/'contentDir='content/pir'languageCode='art-x-pir'languageDirection='rtl'languageName='Pirrratish'title='Arrr, my Website'weight=2[languages.pir.params]version='v2.0'[[languages.pir.params.versions]]baseURL='https://pir.example.com/'identifier='v2.0'isLatest=truetitle='Latest'[[languages.pir.params.versions]]baseURL='https://pir.example.com/v1.0/'identifier='v1.0'title='v1.0'
languages:en:baseURL:https://example.com/contentDir:content/enlanguageCode:enlanguageName:Englishparams:version:v2.0versions:- baseURL:https://example.com/identifier:v2.0isLatest:truetitle:Latest- baseURL:https://example.com/v1.0/identifier:v1.0title:v1.0title:My Websiteweight:1pir:baseURL:https://pir.example.com/contentDir:content/pirlanguageCode:art-x-pirlanguageDirection:rtllanguageName:Pirrratishparams:version:v2.0versions:- baseURL:https://pir.example.com/identifier:v2.0isLatest:truetitle:Latest- baseURL:https://pir.example.com/v1.0/identifier:v1.0title:v1.0title:Arrr, my Websiteweight:2
{"languages":{"en":{"baseURL":"https://example.com/","contentDir":"content/en","languageCode":"en","languageName":"English","params":{"version":"v2.0","versions":[{"baseURL":"https://example.com/","identifier":"v2.0","isLatest":true,"title":"Latest"},{"baseURL":"https://example.com/v1.0/","identifier":"v1.0","title":"v1.0"}]},"title":"My Website","weight":1},"pir":{"baseURL":"https://pir.example.com/","contentDir":"content/pir","languageCode":"art-x-pir","languageDirection":"rtl","languageName":"Pirrratish","params":{"version":"v2.0","versions":[{"baseURL":"https://pir.example.com/","identifier":"v2.0","isLatest":true,"title":"Latest"},{"baseURL":"https://pir.example.com/v1.0/","identifier":"v1.0","title":"v1.0"}]},"title":"Arrr, my Website","weight":2}}}
Hiding the Versioning Warning
Option If visitors navigate to an archived version of your site, they will see a versioning warning at the top of each page.
You can disable it be setting the disableVersioningWarning option to true in your hugo.toml.
hugo.
[params]disableVersioningWarning=true
params:disableVersioningWarning:true
{"params":{"disableVersioningWarning":true}}
Adjusting the Versioning Warning
Method 1
You can adjust the text of the versioning warning by overriding the key Versioning-warning in your i18n files.
The following parameter are available to be included in the text:
pageVersion - the element of the displayed page’s version from your versions array
pageUrl - the URL of the displayed page
latestVersion - the element of the version marked with isLatest from your versions array
latestUrl - the URL of the displayed page mapped to the latest version
Method 2
You can override layouts/partials/versioning-waring.html. This is called once a version conflict was recognized. So the only thing for you to do is writing the message.
The following parameter are available in this partial:
The title will be used in meta information of your HTML.
hugo.
title='Hugo Relearn Theme'
title:Hugo Relearn Theme
{"title":"Hugo Relearn Theme"}
Site Description
Front Matter The theme shows a site description in various places, such as RSS feeds and meta tags. For this, it uses the description field from your home page’s front matter.
Social Media Images
When your page is shared on social media, you can set a site-wide image to display with the link
hugo.
images=['images/hero.png']
images:- images/hero.png
{"images":["images/hero.png"]}
More Social Media Options
The theme adheres to Hugo’s official documentation for Open Graph and Twitter Cards configuration.
Deployment Scenarios
Offline Usage
The theme is usable offline. No internet connection is required to load your page. This is achieved by storing all dependencies within the theme.
No calls to 3rd party servers, no calling home, no tracking. Privacy friendly.
Server Deployment
If your server deployment has no special requirements, you can skip this section and use the standard Hugo options.
For special requirements, the theme is capable of different scenarios, requiring the following mandatory settings in your hugo.toml. All settings not mentioned in the examples below can be set to your liking.
If you are still using Hugo’s relref shortcode (which you shouldn’t), you will need further configuration.
Warning
Don’t use a baseURL with a subdirectory and relativeURLs=true together. Hugo doesn’t apply the baseURL correctly in this case. If you need both, generate your site twice with different settings into separate directories.
Private Web Server (LAN)
The same settings as with any of the public web server scenarios or
hugo.
baseURL='/'relativeURLs=true
baseURL:/relativeURLs:true
{"baseURL":"/","relativeURLs":true}
File System
Your generated site can be used headless without a HTTP server.
This can be achieved by using the file:// protocol in your browser’s address bar or by double click on a generated *.html file in your file navigation tool.
Use the following settings
hugo.
baseURL='/'relativeURLs=true
baseURL:/relativeURLs:true
{"baseURL":"/","relativeURLs":true}
Note
Pages like sitemap.xml and rss.xml, and social media links will always use absolute URLs. They won’t work with relativeURLs=true.
This shall not prevent any technical storage or access for the sole purpose of carrying out the transmission of a communication over an electronic communications network, or as strictly necessary in order for the provider of an information society service explicitly requested by the subscriber or user to provide the service.
The theme stores the following information in localstorage or sessionstorage.
Currently applicable search term to carry over to the following presented pages. This will be used to mark the search term in the page’s text.
By default this adds a printer icon in the topbar but can be deactived. Clicking it switches to print preview, showing the page and its visible subpages in a printer-friendly format. Use your browser’s print function to print or save as PDF.
The URL won’t be configured ugly for Hugo’s URL handling, even with uglyURLs=true in hugo.toml. This is because each mime type can only have one suffix.
If you don’t like the URLs, you can reconfigure outputFormats.print in your hugo.toml to something other than the default of:
Enable support to show the source code of a page if it was generated from a file. Add the source output format to your home, section, and page in hugo.toml:
By default this adds a Source icon in the topbar but can be deactived. Clicking it switches to the source code of the page.
The Source output format differs from the Markdown format, as it prints the source code as is including the front matter.
The URL won’t be configured ugly for Hugo’s URL handling, even with uglyURLs=true in hugo.toml. This is because each mime type can only have one suffix.
If you don’t like the URLs, you can reconfigure outputFormats.source in your hugo.toml to something other than the default of:
Option The theme creates a unique ID for each build and adds it to each referenced asset’s URL to make browsers not keep outdated cached assets.
This is good for production sites but can be problematic during development. It makes comparing outputs difficult as each build has new IDs.
To disable this, set disableAssetsBusting=true.
hugo.
[params]disableAssetsBusting=true
params:disableAssetsBusting:true
{"params":{"disableAssetsBusting":true}}
Disabling IDs for Interactive HTML Elements
Option Features like expanders, callouts, and tabs use unique IDs to work. These IDs change with each build.
This is necessary for the theme to work properly, but it can make comparing outputs between builds difficult.
To turn this off, set disableRandomIds=true. Note, that this will result in a non-functional site!.
hugo.
[params]disableRandomIds=true
params:disableRandomIds:true
{"params":{"disableRandomIds":true}}
Disabling Assets Minification
Option If minify=true, further theme assets will be minified during build. If no value is set, the theme will avoid minification if you have started with hugo server and otherwise will minify.