Documenting a project using hugo

Use hugo and hugo-theme-learn to document a project with markdown

 Posted on March 18, 2019  |  0 minutes (0 words)

With the static generator Hugo and the nice theme hugo-theme-learn we can easily build a skeleton for a documentation site.

Installation

Download and install Hugo, the official guide is a good starting point. There are also a few articles: Configure a site using Hugo part1, part2 and part3

Create a new site and clone the theme

hugo new site CCWeb
cd CCWeb
cd themes
git clone https://github.com/matcornic/hugo-theme-learn.git

Open the site configuration config.toml

baseURL = "http://example.org/"
languageCode = "it-it"
title = "CCWeb"
theme = "hugo-theme-learn"

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

Browse the site skeleton

hugo server -D

Chapters and content

Create a new chapter using the theme provided archetype

hugo new --kind chapter architettura/_index.md

Open the created file content/architettura/_index.md and change the chapter name, title and description. Change also the pre attribute in the page metadata.

Add content pages to the chapter

hugo new architettura/tecnologie.md
# alternative
hugo new architettura/tecnologie/_index.md

Style

Create a new folder CCWeb/static/images and paste the logo image there.

Override the theme default by creating a new file CCWeb/layouts/partials/logo.html

<a id="logo">
  <img src="/images/logo.png" alt="CCWeb logo">
</a>

Favicon

Drop a 32x32 favicon.png into CCWeb/static/images and the job is complete.

To customize the favicon behaviour override the theme default by creating a new file CCWeb/layouts/partials/favicon.html