4.5. Docsy Documentation and landing page

Hugo Docsy Documentation & Landing page Guide

Overview

This documentation site is built with Hugo using the Docsy theme, a Hugo theme designed for technical documentation.

Local Development

Start the local server:

cd hugo
hugo server

Then open http://localhost:1313/ in your browser. The site live-reloads on file changes.

Project Structure

Writing Content

Each page starts with a front matter block:

---
title: Page Title
weight: 10
---

• title — displayed heading and sidebar label
• weight — controls ordering within a section (lower = higher)

Key Docsy Features

• Left sidebar navigation — auto-generated from the content/ folder hierarchy
• Shortcodes — reusable components (alert, tabpane, cardpane, etc.)
• Versioning & multi-language support built-in
• Search via Lunr.js or Algolia

Integrate React Landing Page and Host to GitHub Pages

The landing/ folder contains a vibecoded React app (Vite + React + Tailwind + shadcn) that serves as the project’s landing page.

To rebuild and update the landing page:

cd hugo/landing
npm run build

Then copy-paste everything from dist/ (⚠️ except index.html) into hugo/static/

Then go to hugo/layouts/index.html and adapat line 11 with hash of hugo/static/index-xxxxx.js and line 12 with hash of hugo/static/index-xxxxx.css

Before building the Hugo site, if needed, change the baseURL by going tohugo.yaml and modify with your domain

baseURL: https://armada.services

Then build the Hugo site:

cd hugo
hugo

Copy-paste everything from hugo/public to docs in order to serve it on GH pages.

Finally you can setting up GitHub pages to serve directly the master branch using the docs folder as the publishing source.