GitHub - dumindu/E25DX: 🧑‍💻 Your next documentation theme...

2 min read Original article ↗

buymeacoffee

Your next documentation theme...

Screen.Recording.2024-03-12.at.7.32.01.PM.mov

🌱 Inspiration

✅ Features

  • Responsive and adaptive layouts.
  • Built-in light and dark modes.
  • Customizable sidebars using Hugo data templates.
  • Support for multiple documentation sets.
  • Support for maintaining a blog.
  • Implement a menu via Hugo configs.
  • Integrate search or AI assistant.

🚀 Getting Started

Install Hugo

Create a new Hugo site with the E25DX theme.

1. Foundation

hugo new site newsite
cd newsite

git init
git submodule add https://github.com/dumindu/E25DX.git themes/E25DX

rm hugo.toml && cp themes/E25DX/hugo.yaml .
cp themes/E25DX/static/sw.js ./static/
cp themes/E25DX/static/manifest.json ./static/

💡 We don't need generated archetypes, assets, i18n, layouts folders in the newsite folder

2. Configuration

  • newsite/hugo.yaml
    • languages: en:title and en:description
    • params: project, author and home
  • newsite/static/sw.js
    • cacheName prefix: ex. todo-
  • newsite/static/manifest.json
    • name, short_name, description

3. Sample documentation set

  • Add newsite/content/en/docs/_overview.md for overview

    ---
title: Overview
url: "docs/overview"
aliases:
- "/docs"
---

Overview

  • Add newsite/content/en/docs/a1.hello-world.md as the first page of first section

    ---
title: Hello World
slug: hello-world
---

Hello World

  • Add newsite/content/en/docs/b1.modules.md as the first page of the second section

    ---
title: Modules
slug: modules
---

Module

  • Add newsite/data/en/docs/sidebar.yml for section titles and page titles

    - title: Documentation
  pages:
    - title: Overview

- title: Basics
  pages:
    - title: Hello World

- title: Beyond The Basics
  pages:
    - title: Modules

4. Sample blog

  • Add newsite/content/en/blog/2026_1_hello_world/index.md

    ---
title: Hello World
slug: "hello-world"
summary: Hello World Summary
---

Hello World

  • Add any image of png (or jpg) for newsite/content/en/blog/2026_1_hello_world/cover.png for blog post cover image

5. Sample page

  • Add newsite/content/en/page/about/index.md for about page

    ---
title: About
url: "about"
---

About

  • Add any image of png (or jpg) for newsite/content/en/page/about/cover.png for about page cover image

6. Main menu

  • Update newsite/hugo.yaml to add menu configurations

    menus:
  main:
    - identifier: home
      name: Home
      pre: <i aria-hidden>🏡</i>
      pageRef: /
      weight: 1
    - identifier: docs
      name: Docs
      pre: <i aria-hidden>📖</i>
      pageRef: /docs
      weight: 2
    - identifier: blog
      name: Blog
      pre: <i aria-hidden>🖊️</i>
      pageRef: /blog
      weight: 3
    - identifier: about
      name: About
      pre: <i aria-hidden>🧑‍💻</i>
      pageRef: /page/about
      weight: 4

7. Run and build the site for production.

  • Run hugo server to preview the site.

    💡 If you see ERROR Failed to read Git log: fatal: your current branch 'main' does not have any commits yet, Change newsite/hugo.yaml -> enableGitInfo: false (if you want to run hugo server before commit the changes.)

  • Run hugo build --minify to build the site for production.

buymeacoffee