First Documentation

🌈 Menu, sidebar & content pages

⭐ In here, we use /docs as the path of our first documentation.

The Menu

Docura comes with a default documentation menu item in hugo.yaml. However, you can change these configs as per your needs.

    - url: /docs
      name: Documentation
      identifier: docs
      pre: "<i class='icon icon-book'></i>"
      weight: 2

The Sidebar

To generate the sidebar, we use Hugo data templates. Create a new file data/en/docs/sidebar.yml with the following content.

- title: Documentation
  pages:
    - title: Overview

- title: Section 01
  pages:
    - title: Page 01

- title: Section 02
  pages:
    - title: Page 02

In here, we create a sidebar with 3 sections; Documentation, Section 01, Section 02. And each section is having 1 page; Overview page under Documentation section, Page 01 under Section 01 and etc.

Content pages

Let’s create above content pages under content/en/docs with the following content.

  1. content/en/docs/a1.overview.md
---
title: Overview
url: "docs/overview"
aliases:
- "/docs"
---
  1. content/en/docs/b1.page-01.md
---
title: Page 01
slug: page-01
---
  1. content/en/docs/c1.page-02.md
---
title: Page 02
slug: page-02
---

📁Final file/ folder structure

├── hugo.yaml
├── content
│  └── en
│     └── docs
│        ├── a1.overview.md
│        ├── b1.page-01.md
│        └── c1.page-02.md
├── data
│  └── en
│     └── docs
│        └── sidebar.yml
└── themes
   └── docura

Run hugo server under the project folder; newsite to test the site.