Hugo as a documentation tool

MkDocs is a good documentation solution along with Sphinx and a few others.

As you are someone who has used Hugo for other things I think it would be very insightful if you could share why you chose MkDocs for your specific project.

The main reason was the availability to the ‘readthedocs’ theme and the ease with which I was able to set it up. I think that is because MkDocs is specifically built for Documentation. I think for Hugo to have the same ease we need some ‘starter packs’ which have stuff pre configured for ‘Project Documentation’, ‘Blog’, ‘Website’ etc,. I’ll add more comments after I spend some time analyzing MkDocs.

1 Like

First, that site is gorgeous. Like Isaac Hayes sexy gorgeous. Second, I just took a really quick look at the way you did the sections as ‘cards’ which reminds me of a project I’ve been working on for eons in my ‘spare’ time. Lots of writers (not code writers, English/Spanish/etc writers) use some kind of virtual pasteboard layout for chapters/books. Using Hugo and/or gitbook to format output is a great idea, especially since the formats are already built into gitbook export. However, nobody has written a pleasant way to write prose and rearrange documents and then wired that up to something to spit it out. At least not that I’ve seen. I’d rather write in vim than gitbook’s interface.

Anyway, great work, I am very impressed and will look more into that public repo.

@flynnduism that doc site looks absolutely fantastic. I see that the license is MIT – but I expect there are some “not so generic” stuff in there that means that to use the theme for something else you would have to do changes to the theme itself? Or at lteast override some templates?

/cc @spf13 - we have had other people making the most beautiful themes wanting to be added to the themes repo – but as the themes are sub folders in another repo, I have not clue (don’t think it’s possible) to do so. It would be great if we could do that, but I believe that means adding another service outside of GitHub.

Agreed. The current solution works in that it’s easy and only depends on git.

An ideal solution would be a repository system that would be able to contain / share themes, partials and shortcodes and could support github full repos and files and directories within a repo. That would be a lot of work though and I don’t think worth it yet given some of the other priorities.

@flynnduism This site looks freakin’ fantastic!
I don’t suppose some of this design is MIT, eh? Haha. I’m looking for a really great theme for some internal-only documentation at my work. Nevertheless, looking forward to the blog post and nice work!

Themes for documentations seem to be missing in the portfolio of Hugo. To fix this gap I decided to port a theme geared towards this department as my next project.

The Material theme was original created for Hugo’s companion Mkdocs. Credits should go to Martin Donath as the original theme creator.

Check it out if you like.

5 Likes

This looks really, really good. I’m almost tempted to suggest Hugo use this for its docs.

The demo-version on themes.gohugo.io seems to be broken, though.

Good job, @digitalcraftsman - I know I will use this theme in the future.

1 Like

Thank you

I still wrap my head around this issue but I pushed some updates. Hopefully, the demo version at themes.gohugo.io will work. The local version of the build-script looked promising.

Alternatively, I hosted a demo with Github pages. Update: the problem was fixed and you can view the demo here.

Full search and localization support are still missing but the next release of Hugo looks promising for fixes :smile:

1 Like

I’m impressed! Your site kept me and I’m visiting it - together with the repo - some times improving my own site! Job well done! Thanks for this inspiration :slight_smile:

We already have plans to update the Hugo docs theme via hugo#1725, but I’d love to see us mock up the docs site in this new Material theme to compare it to.

I am assessing the feasibility of porting an existing HTML documentation site to Hugo.

It’s a large documentation site (5 MB) with a lot of nested pages.

I plan to break the existing pages down from 100 × 50 kB pages, into 1,000 × 5 kB pages, for ease of reading and editing. So a nested navigation menu, capable of multiple nested levels, is a key requirement.

The state of the art in Hugo-based documentation

I’ve searched around a bit for prior art.

  • I found four themes (Material, Bootie, Grav, Alabaster) which are specifically for documentation.

    These look like they would be great for simple project documentation, with a small number of pages and relatively flat structure (i.e. no nested sub-pages of sub-pages.)

    I’ve put links and screenshots to those below, to save future readers the trouble of searching for them.

  • I found three examples of Hugo being used for large project documentation - Docker, Balsamiq, and Camunda.

    These look much more suitable for the kind of large documentation site I need, with navigation elements that suit a deeply nested structure.

    Again, I’ve put links below, to save readers the trouble of searching.

Themes





Deployed examples



  • Camunda
    • Live Docs
    • Sources
    • Theme
    • Note: Requires a custom, patched version of Hugo - something about “cached partials”.


Notes / Possible Improvements

  • Currently there’s no documentation about how to use Hugo to write a documentation site. It’s mostly geared towards people who want to use Hugo to write a blog or a simple flat website.

  • The state of documentation themes is improving, i.e. Material theme. (thanks @digitalcraftsman!) These are great for a flat documentation site with a few pages - would suit Github projects for example.

  • There is a gap in stand-alone documentation themes for large projects - currently have to look to large projects i.e. Docker, Camunda, Balsamiq and adapt their existing themes.

  • A Search Box would be a great enhancement. I see @digitalcraftsman (again!) is already on that: https://github.com/digitalcraftsman/hugo-material-docs/issues/2

It would be definetily a big plus if we could create nest pages to order a lot of content in smaller logical units. There were already discussions about it adapting the way Hugo handles sections. Keep an eye on

1 Like

@digitalcraftsman

I’ve hacked your Material Docs theme to have the functionality I needed. I copied & pasted stuff from the Docker Docs theme until I got something that worked.

I am no HTML / CSS / JS wizard, but it works.

See my fork: https://github.com/LiaungYip/hugo-material-docs

Todo:

  • Make it look less awful

Implementation in /content/

The menu structure is defined in /config.toml:

[[menu.main]]
    name = "data"
    identifier = "datafilestagpages"
    parent = "listfilepages"
    
[[menu.main]]
    name = "ability"
    identifier = "datafilesability"
    parent = "datafilestagpages"
    
... dozens more ...

Then each page’s front matter points towards one of the pre-defined menu items in config.toml. Here’s content\datafilestagpages\datafilesability\appliedname.md:

+++
date = "2016-07-10"
title = "appliedname"
original_url = "listfilepages/datafilestagpages/datafilesability.html#appliedname"

[menu.main]
    identifier = "datafilesability_appliedname"
    parent = "datafilesability"
+++
# appliedname

## Status

Deprecated 6.05.01 - use FACT

... Rest of content follows ...
1 Like

@bep took the time to port the Slate theme to Hugo. It’s a great theme if you want to document API’s or related types of content. Give it a try.

3 Likes

I’ve just released a first cut at a documentation theme, plain-docs.

It’s (eventually) intended for documentation sites that:

  • Have a lot of pages, and need nested menus for navigation.
  • Need to be browseable from a local file system, offline, without an internet connection.

Links below:

This reminds me - I’ve been working on a Hugo documentation theme as spare time allows:

https://jimmyjames.github.io/justdocs/

I’d consider it in pre-beta stage at this point, but will try to get some more core features and improvements to out as time allows.

1 Like

An old thread but possibly worth keeping alive. There is a theme called docDock which looks like a decent way of producing searchable documentation.

1 Like

I know this is a bit old, but since your theme is so effective as it is beautiful I would like to request a repair on this issue: https://github.com/digitalcraftsman/hugo-material-docs/issues/84

It appears with HUGO v32 up to v34 on mac and win machines.

I saw today that Pupil labs, which from what I understand makes open source tools for eye tracking, uses Hugo for their documentation. Perhaps their implementation might help some in this thread.

Here they discuss why they went from GitHub wiki to a Docs site with Hugo. Their actual documentation site is here: Docs.pupil-labs.com. And here is the GitHub repository.

Their docs site is by the way not only about code, but also hardware. That makes it a nice example compared with other only-code-focused docs.