Convert Figma logo to code with AI

google logodocsy

A set of Hugo doc templates for launching open source content.

2,591
894
2,591
259

Top Related Projects

75,317

The world’s fastest framework for building websites.

19,243

Project documentation with Markdown.

27,539

🃏 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:

  1. Install Hugo extended version
  2. Create a new Hugo site:
    hugo new site my-docsy-site
    cd my-docsy-site
    
  3. Add Docsy as a submodule:
    git submodule add https://github.com/google/docsy.git themes/docsy
    
  4. Add Docsy as a theme in your config.toml:
    theme = ["docsy"]
    
  5. Copy the example site content:
    cp -R themes/docsy/exampleSite/content/* content
    
  6. 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

75,317

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.

19,243

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.

27,539

🃏 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Docsy

Project status: active – The project has reached a stable, usable state and is being actively developed. Project releases Project build Status Project contributors Project license

🚧 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 install postcss:

    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