Hugo as a documentation tool

We’ve started using gitbook for some of our documentation. Really like the feature set for easily generating high quality documentation. However, would really, really like to have a Hugo template like gitbook’s templates. Hugo seems much more versatile than gitbook.

Anyone look into porting gitbook themes to Hugo?

I think it shouldn’t be hard to do. It’s mostly someone taking the time to port the theme over. I don’t believe they support anything that Hugo doesn’t so it should be a pretty straightforward port.

I would say that this pull request will go long way towards getting GitBooks rendered in Hugo:

I took a stab at porting gitbooks more or less using their theme. The initial (unexciting) results are at https://github.com/dblezek/bookish-docs.

Not sure the experiment will work though, I can’t figure out how to organize into “Chapters”. Originally I thought of using Sections, but I couldn’t figure out how to order them. In the current checkout, I’m using Menus, but their ordering is ambiguous (they are a map). Need to be able to order Sections or Menus (or some other Hugo construct) to have a stable chapter order. If more people are interested, I’d be happy to continue working on this. But for the moment, I’m going to have to fall back to gitbook.

To try it out:

git clone --recursive https://github.com/dblezek/bookish-docs.git
cd bookish-docs
hugo server --watch --theme bookish

And open http://localhost:1313.

@blezek I opened up this issue:

So I’m interested. Really. Your section ordering issue will be solved when Nodes get their front matter (with weight). I have been thinking about this on-and-off, but haven’t found the simplest design, but it will arrive, and pretty soon.

@blezek , wiIl this help?

I had another reason to want to order by sections, so the solution was using the filepath.

Better to see thread as @bep put me on this track with some other changes.

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

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

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.

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.

2 Likes

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

2 Likes

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.

1 Like

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