Home

Awesome

Docsy Example

Docsy is a Hugo theme module for technical documentation sites, providing easy site navigation, structure, and more. This Docsy Example Project uses the Docsy theme component as a hugo module and provides a skeleton documentation structure for you to use. You can clone/copy this project and edit it with your own content, or use it as an example.

In this project, the Docsy theme is pulled in as a Hugo module, together with its dependencies:

$ hugo mod graph
...

For Docsy documentation, see Docsy user guide.

This Docsy Example Project is hosted on Netlify at example.docsy.dev. You can view deploy logs from the deploy section of the project's Netlify dashboard, or this alternate dashboard.

This is not an officially supported Google product. This project is currently maintained.

Using the Docsy Example Project as a template

A simple way to get started is to use this project as a template, which gives you a site project that is set up and ready to use. To do this:

  1. Use the dropdown for switching branches/tags to change to the latest released tag.

  2. Click Use this template.

  3. Select a name for your new project and click Create repository from template.

  4. Make your own local working copy of your new repo using git clone, replacing https://github.com/me/example.git with your repo’s web URL:

git clone --depth 1 https://github.com/me/example.git

You can now edit your own versions of the site’s source files.

If you want to do SCSS edits and want to publish these, you need to install PostCSS

npm install

Running the website locally

Building and running the site locally requires a recent extended version of Hugo. You can find out more about how to install Hugo for your environment in our Getting started guide.

Once you've made your working copy of the site repo, from the repo root folder, run:

hugo server

Running a container locally

You can run docsy-example inside a Docker container, the container runs with a volume bound to the docsy-example folder. This approach doesn't require you to install any dependencies other than Docker Desktop on Windows and Mac, and Docker Compose on Linux.

  1. Build the docker image

    docker-compose build

  2. Run the built image

    docker-compose up

    NOTE: You can run both commands at once with docker-compose up --build.

  3. Verify that the service is working.

    Open your web browser and type http://localhost:1313 in your navigation bar, This opens a local instance of the docsy-example homepage. You can now make changes to the docsy example and those changes will immediately show up in your browser after you save.

Cleanup

To stop Docker Compose, on your terminal window, press Ctrl + C.

To remove the produced images run:

docker-compose rm

For more information see the Docker Compose documentation.

Using a local Docsy clone

Make sure your installed go version is 1.18 or higher.

Clone the latest version of the docsy theme into the parent folder of your project. The newly created repo should now reside in a sibling folder of your site's root folder.

cd root-of-your-site
git clone --branch v0.7.2 https://github.com/google/docsy.git ../docsy

Now run:

HUGO_MODULE_WORKSPACE=docsy.work hugo server --ignoreVendorPaths "**"

or, when using npm, prepend local to the script you want to invoke, e.g.:

npm run local serve

By using the HUGO_MODULE_WORKSPACE directive (either directly or via prefix local when using npm), the server now watches all files and directories inside the sibling directory ../docsy , too. Any changes inside the local docsy theme clone are now immediately picked up (hot reload), you can instantly see the effect of your local edits.

In the command above, we used the environment variable HUGO_MODULE_WORKSPACE to tell hugo about the local workspace file docsy.work. Alternatively, you can declare the workspace file inside your settings file hugo.toml:

[module]
  workspace = "docsy.work"

Your project's hugo.toml file already contains these lines, the directive for workspace assignment is commented out, however. Remove the two trailing comment characters '//' so that this line takes effect.

Troubleshooting

As you run the website locally, you may run into the following error:

$ hugo server
WARN 2023/06/27 16:59:06 Module "project" is not compatible with this Hugo version; run "hugo mod graph" for more information.
Start building sites …
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio
Error: Error building site: "C:\Users\foo\path\to\docsy-example\content\en\_index.md:5:1": failed to extract shortcode: template for shortcode "blocks/cover" not found
Built in 27 ms

This error occurs if you are running an outdated version of Hugo. As of docsy theme version v0.7.0, hugo version 0.110.0 or higher is required. See this section of the user guide for instructions on how to install Hugo.

Or you may be confronted with the following error:

$ hugo server

INFO 2021/01/21 21:07:55 Using config file:
Building sites … INFO 2021/01/21 21:07:55 syncing static files to /
Built in 288 ms
Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): resource "scss/scss/main.scss_9fadf33d895a46083cdd64396b57ef68" not found in file cache

This error occurs if you have not installed the extended version of Hugo. See this section of the user guide for instructions on how to install Hugo.

Or you may encounter the following error:

$ hugo server

Error: failed to download modules: binary with name "go" not found

This error occurs if you have not installed the go programming language on your system. See this section of the user guide for instructions on how to install go.