Installation

The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you to train by following this great documentation for beginners.

Create your project

Hugo provides a new command to create a new website.

hugo new site <new_project>

Install the theme

Install the Hugo-theme-learn theme by following this documentation

The theme’s repository is: https://github.com/matcornic/hugo-theme-learn.git

Alternatively, you can download the theme as .zip file and extract it in the themes directory

Basic configuration

When building the website, you can set a theme by using --theme option. We suggest you to edit your configuration file and set the theme by default. By the way, add requirements for search functionnality to be enabled.

# Change the default theme to be use when building the site with Hugo
theme = "hugo-theme-learn"

# For search functionnality
[outputs]
home = [ "HTML", "RSS", "JSON"]

Create your first chapter page

Chapters are pages containg other child pages. It has a special layout style and usually just contains a chapter name, the title and a brief abstract of the section.

### Chapter 1

# Basics

Discover what this Hugo theme is all about and the core-concepts behind it.

renders as

A Chapter

Hugo-theme-learn provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command

hugo new --kind chapter basics/_index.md

By opening the given file, you should see the property chapter=true on top, meaning this page is a chapter.

By default all chapters and pages are created as draft. If you want to render these pages, remove the property draft: true from the metadata.

Create your first content pages

Then, create content pages inside the previous chapter. Here are two ways to create content in the chapter :

hugo new basics/first-content.md
hugo new basics/second-content/_index.md

Feel free to edit thoses files by adding some sample content and replacing title value in the beginning of the files.

Launching the website locally

Launch the following command:

hugo serve

Go to http://localhost:1313

You should notice three things:

  1. You have a left Basics menu, containing two submenus with names equals to title properties in previously created files.
  2. The home page explains you to how to customize it. Follow the instructions.
  3. With hugo serve command, the page refresh as soon as you save a file. Neat !

Build the website

When your site is ready to deploy, launch the following command:

hugo

A public folder has been generated, containing all statics content and assets for your website. It can now be deployed on any web server !

This website can be automatically published and hosted with Netlify (Read more about Automated HUGO deployments with Netlify). Alternatively, you can use Github pages