Hugo as a documentation tool

#21

@mikeaja & @bep, thanks for the great suggestions. Looking at the Hugo site itself, navigation is handled as one big menu.main menu, and ordering is supplied by weights. That would work fairly well. Was hoping to be able to use Sections, possibly with some hints in the config.toml file. Ideally, the book could be groked from the file structure, with a creative theme.

#22

@blezek could you sketch out how your ideal solution looks like? The current Hugo isnā€™t carved in stone, so great ideas will be implemented.

#23

I donā€™t really see why you canā€™t use Sections. I would say it doesnā€™t really matter what is officially navigation. For me the menu feature is more about pre-set front matter, and saving time for typical menu situations. But any Range on any defined set can make menu links.

#24

After trying out a bunch of different documentation generators, I decided to use Hugo for building our Docs site.

Iā€™ve altered the section/post output to display content in longform - as series of cards rather than nested pagesā€¦ the idea being to build something with an I.A. more akin to ReadtheDocs, but with our own custom design approach and various effects.

Site: https://docs.barricade.io/
Public on github: https://github.com/barricadeio/docs

Iā€™ve been meaning to write a blog post about the process and the customized parts, but for now figured Iā€™d share here.

Iā€™m still trying to pin down a search solution (currently using swifttype, but once the trial runs out their pricing is $250+ a month). Going to check out hugo-lunr this weekend.

#25

Your documentation site looks really neat.

Just yesterday, I had to build a documentation site for which I used MkDocs, It is really nice and is specifically made for documentation sites. My documentation site http://docs.zammu.in/search.html?q=pip , It also uses lunr.js for search. Btw, putting it on GitHub also allows you to accept corrections and contributions easily, Got a correction from the MkDocs author yesterday https://github.com/zammu/docs.zammu.in/pull/1

#26

Wow. This site looks fantastic!

Iā€™ve heard good things about hugo-lunr and am curious to see your findings.

Iā€™d love to have feedback on what you think Hugo could do better for documentation sites. Itā€™s definitely a goal of ours and one I feel like is in reach.

We would also benefit in hearing what Hugo does well for documentation sites from your perspective.

Lastly, if you ever want to contribute to the Hugo docs we would strongly benefit from your expertise.

#27

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.

#28

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.

#29

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.

#30

@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.

#31

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.

#32

@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!

#33

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.

screen.png1600Ɨ900 151 KB

#34

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.

#35

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:

#36

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:

#37

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.

#38

Today I began to port the Alabaster theme from Sphinx to Hugo. Itā€™s look is probably best known from projects like Flask.

Credits should go to Jeff Forcier, Kenneth Reitz and Armin Ronacher.

This theme uses features of the upcoming release of Hugo! You have to use the latest developement version to test it locally.

Since it is build with an unofficial release I set up a demo.

screenshot.png1500Ɨ1000 109 KB

#39

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

material-docs.screenshot.png1500Ɨ1000 208 KB

tn.png874Ɨ599 119 KB

tn.png900Ɨ600 117 KB

screenshot.png1500Ɨ1000 109 KB

Deployed examples

Pasted image1115Ɨ805 123 KB

Pasted image998Ɨ805 36.1 KB

  • Camunda
    • Live Docs
    • Sources
    • Theme
    • Note: Requires a custom, patched version of Hugo - something about ā€œcached partialsā€.

Pasted image1114Ɨ709 62.4 KB

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

#40

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