Top Related Projects
The world’s fastest framework for building websites.
Project documentation with Markdown.
🃏 A magical documentation site generator.
Documentation that simply works
Easy to maintain open source documentation websites.
Sphinx theme from Read the Docs
Quick Overview
Docsy is a Hugo theme for technical documentation sites, providing easy site navigation, structure, and more. Developed by Google, it's designed to help you get a working documentation site up and running quickly, with features specifically tailored for technical documentation.
Pros
- Easy to set up and customize for technical documentation
- Responsive design that works well on mobile devices
- Built-in search functionality
- Supports multiple languages and localization
Cons
- Requires knowledge of Hugo and static site generators
- Limited design flexibility compared to building a custom site from scratch
- May be overkill for very small or simple documentation projects
- Learning curve for those unfamiliar with Git-based workflows
Getting Started
To get started with Docsy:
- Install Hugo extended version
- Create a new Hugo site:
hugo new site my-docsy-site cd my-docsy-site
- Add Docsy as a submodule:
git submodule add https://github.com/google/docsy.git themes/docsy
- Add Docsy as a theme in your
config.toml
:theme = ["docsy"]
- Copy the example site content:
cp -R themes/docsy/exampleSite/content/* content
- Start the Hugo server:
hugo server
Your Docsy site should now be running at http://localhost:1313
. Customize the content in the content
directory and the site configuration in config.toml
to suit your needs.
Competitor Comparisons
The world’s fastest framework for building websites.
Pros of Hugo
- Faster build times and better performance for large sites
- More flexible and customizable, with a wider range of themes and plugins
- Larger community and ecosystem, leading to more resources and support
Cons of Hugo
- Steeper learning curve, especially for non-technical users
- Less opinionated structure, which can lead to inconsistencies across projects
- Requires more setup and configuration for complex documentation sites
Code Comparison
Docsy (YAML front matter):
---
title: "My Page"
date: 2023-04-20
weight: 5
description: >
A brief description of my page.
---
Hugo (TOML front matter):
+++
title = "My Page"
date = 2023-04-20
weight = 5
description = "A brief description of my page."
+++
Summary
Hugo is a more powerful and flexible static site generator, suitable for a wide range of projects. Docsy, built on top of Hugo, is specifically designed for documentation sites, offering a more opinionated and streamlined approach. While Hugo provides greater customization options and performance benefits, Docsy simplifies the process of creating documentation websites with pre-built templates and features tailored for technical documentation.
Project documentation with Markdown.
Pros of MkDocs
- Simpler setup and configuration process
- Faster build times, especially for smaller projects
- More lightweight and easier to customize
Cons of MkDocs
- Less built-in features for complex documentation structures
- Fewer pre-designed themes and layouts available
- Limited support for multi-language documentation
Code Comparison
MkDocs configuration (mkdocs.yml):
site_name: My Docs
theme: material
nav:
- Home: index.md
- About: about.md
Docsy configuration (config.toml):
baseURL = "/"
title = "My Docs"
theme = ["docsy"]
[params]
time_format_blog = "Monday, January 02, 2006"
time_format_default = "January 2, 2006"
MkDocs focuses on simplicity and ease of use, making it ideal for smaller projects or those new to documentation tools. It offers faster build times and a more straightforward setup process. However, it may lack some advanced features for complex documentation needs.
Docsy, built on Hugo, provides a more comprehensive solution for larger projects, especially those requiring multi-language support or complex navigation structures. It offers more pre-designed components and layouts but may have a steeper learning curve and slower build times for extensive documentation.
🃏 A magical documentation site generator.
Pros of Docsify
- Lightweight and simple to set up, requiring minimal configuration
- No build process needed; works directly with Markdown files
- Supports plugins for extended functionality
Cons of Docsify
- Limited theming options compared to Docsy's extensive customization
- Less suitable for large-scale documentation projects
- Lacks built-in support for versioning and multi-language sites
Code Comparison
Docsy (Hugo-based) template:
{{ define "main" }}
<div class="td-content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
{{ end }}
Docsify basic configuration:
window.$docsify = {
name: 'My Documentation',
repo: 'https://github.com/username/repo',
loadSidebar: true,
subMaxLevel: 2
};
Both Docsy and Docsify are popular documentation tools, but they cater to different needs. Docsy, built on Hugo, offers a more robust solution for large-scale projects with complex requirements. It provides extensive customization options and built-in features for versioning and multi-language support.
Docsify, on the other hand, excels in simplicity and ease of use. It's ideal for smaller projects or quick documentation setups, as it doesn't require a build process and works directly with Markdown files. While it offers less out-of-the-box functionality compared to Docsy, its plugin system allows for extended capabilities.
Choose Docsy for comprehensive, large-scale documentation projects, and Docsify for simpler, quick-to-deploy documentation needs.
Documentation that simply works
Pros of mkdocs-material
- Easier setup and configuration with minimal YAML files
- Faster build times and better performance for large documentation sites
- More extensive theme customization options out-of-the-box
Cons of mkdocs-material
- Less flexibility for complex layouts and custom page structures
- Limited support for multi-language sites compared to Docsy's i18n capabilities
- Smaller ecosystem of plugins and extensions
Code comparison
mkdocs-material configuration:
theme:
name: material
features:
- navigation.tabs
- search.suggest
Docsy configuration:
[params]
time_format_blog = "Monday, January 02, 2006"
time_format_default = "January 2, 2006"
[params.ui]
sidebar_menu_compact = false
breadcrumb_disable = false
Both projects offer powerful documentation solutions, but mkdocs-material focuses on simplicity and speed, while Docsy provides more flexibility for complex documentation needs. mkdocs-material is ideal for smaller to medium-sized projects, while Docsy excels in large-scale, multi-language documentation sites with intricate layouts.
Easy to maintain open source documentation websites.
Pros of Docusaurus
- Built with React, offering a more modern and flexible development experience
- Supports versioning out of the box, making it easier to manage documentation for multiple versions of a project
- Provides a search functionality powered by Algolia DocSearch
Cons of Docusaurus
- Steeper learning curve for developers not familiar with React
- Less flexibility in customizing the overall site structure compared to Docsy
- May require more setup and configuration for complex documentation projects
Code Comparison
Docusaurus (JavaScript/React):
import React from 'react';
import Layout from '@theme/Layout';
function MyPage() {
return <Layout>Your content here</Layout>;
}
Docsy (Hugo/Go Templates):
{{ define "main" }}
<div class="td-content">
{{ .Content }}
</div>
{{ end }}
The code comparison shows the different approaches to creating a basic page layout. Docusaurus uses React components, while Docsy relies on Hugo's templating system. This highlights the fundamental difference in technology stacks between the two projects, with Docusaurus offering a more JavaScript-centric approach and Docsy providing a simpler, template-based solution.
Sphinx theme from Read the Docs
Pros of sphinx_rtd_theme
- Widely adopted and well-established in the Python documentation ecosystem
- Simpler setup and configuration process
- Extensive documentation and community support
Cons of sphinx_rtd_theme
- Less flexible customization options compared to Docsy
- Limited built-in features for modern documentation sites
- Primarily designed for Sphinx, which may limit its use with other static site generators
Code Comparison
sphinx_rtd_theme configuration:
html_theme = 'sphinx_rtd_theme'
html_theme_options = {
'display_version': True,
'prev_next_buttons_location': 'bottom',
'style_external_links': False,
}
Docsy configuration (YAML):
theme:
name: docsy
params:
ui:
navbar_logo: true
sidebar_menu_compact: false
breadcrumb_disable: false
Both themes offer straightforward configuration options, but Docsy provides more granular control over UI elements and features. sphinx_rtd_theme focuses on simplicity and ease of use, while Docsy offers greater flexibility for creating modern documentation sites with advanced features.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Docsy
ð§ WARNING ð§ : main
is under development and potentially unstable! Use official Docsy releases.
Docsy is a Hugo theme for technical documentation sets, providing simple navigation, site structure, and more.
This is not an officially supported Google product. This project is actively being maintained.
Prerequisites
The following are basic prerequisites for using Docsy in your site:
-
Install a recent release of the Hugo "extended" version. If you install from the Hugo release page, make sure you download the
extended
version, which supports SCSS. -
Install
PostCSS
so that the site build can create the final CSS assets. You can install it locally by running the following commands from the root directory of your project:npm install --save-dev autoprefixer npm install --save-dev postcss-cli
Starting in version 8 of
postcss-cli
, you must also separately installpostcss
:npm install -D postcss
Any additional prerequisites depend on the installation option you choose. We recommend using Docsy as a Hugo module, which requires that you have the Go language installed in addition to Hugo and PostCSS.
For complete prerequisites and instructions, see our Get started guides.
Example and usage
You can find an example project that uses Docsy in the Docsy Example Project repo.The Docsy Example Project is hosted at example.docsy.dev. For real-life examples of sites that use Docsy (and their source repos), see our Examples page.
To use the Docsy theme for your own site:
-
(Recommended) Use the example project, which includes the Docsy theme as a Hugo module, as a template to create your project. You can customize this pre-configured basic site into your own Docsy themed site. Learn more...
-
Add Docsy to your existing Hugo site. You can add Docsy as a Hugo module, as a Git submodule, or clone the Docsy theme into your project.
See the Get started guides for details about the various usage options.
Documentation
Docsy has its own user guide (using Docsy, of course!) with lots more information about using the theme. It is hosted by Netlify at docsy.dev. For deploy logs and more, see Deploys from the site's Netlify dashboard.
Alternatively you can use Hugo to generate and serve a local copy of the guide (also useful for testing local theme changes), making sure you have installed all the prerequisites listed above:
git clone --depth 1 https://github.com/google/docsy.git
cd docsy/userguide/
npm install
npm run serve
Contributing
For details on our code of conduct and the process for submitting pull requests, see CONTRIBUTING.md. Thank you to all past, present, and future contributors!
License
This project is licensed under the Apache License 2.0 - see the LICENSE.md file for details
Top Related Projects
The world’s fastest framework for building websites.
Project documentation with Markdown.
🃏 A magical documentation site generator.
Documentation that simply works
Easy to maintain open source documentation websites.
Sphinx theme from Read the Docs
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot