Hugo Codex websites

tips & tricks
1

I have created a website with solutions for static sites (Jekyll), called Jekyll Codex (https://jekyllcodex.org). Currently I am porting this website (and their solutions) to Hugo. You can find the Hugo website here:

http://hugocodex.org

If you have any requests, please let me know!

2 Likes
2

That looks like a solid effort. If you have time, can you please add a guide to integrating lunr.js, without relying on jQuery: https://github.com/gohugoio/hugoDocs/issues/263

It will be great if you can contribute the same guide to the official docs too.

Thank you.

3

As Hugo doesn’t have plugins, what will you be renaming that page to?

1 Like
4

Yes! Thank you for the feedback!

I have created a quick example for Lunr.js search without jQuery. You can find it here: https://jekyllcodex.org/without-plugin/search-lunr/.

Can you review this and see if this is what you want for Hugo?

5

@jhvanderschee Hello, thank you for the quick solution. Though, I am not conversant with Jekyll, and also not familiar with Javascript, so cannot comment anything useful by just looking at the code.

(I can though try out something quickly if you present an example setup for Hugo.)

Reading through Search with Lunr.js | Jekyll Codex, I see:

First a local index is build, using the documents variable.

If I am not wrong, a Hugo-local index can be built during deployment using Custom Output Format JSON. I was able to achieve that part. Where I stumbled was where @bep referred to a “reverse document index” generation in this comment. I have no idea where that piece of code would go in the whole flow.

So my idea would be:

  1. Generate the JSON using Hugo Custom Output as explained here. I got this part working!
  2. ??? (The reverse index generation part)
  3. Download the file lunr.js
  4. Save the file in the ‘js’ (root) directory of your project
  5. Call the reverse index generation script by putting this partial in your HTML header template.

Thank you!

6

The content of the JSON file (the index) is now situated in the documents variable (so in the partial/include). You are looking at the complete solution.

However, this solution might cause a problem for larger indexes, because like this the index can not be cached. My current index is <30kb, and contains around 50 pages. Not really a problem, but if you have a larger website, you want this index to be downloaded once. This requires a script that loads the external cachable JSON file (you already created).

PS. You can try the demo here: https://jekyllcodex.org/search/

7

Some time ago I changed from Jekyll to Hugo which turned out to be a great move. Therefore I know Jekyll Codex - great work. Porting that in my opinion is a good idea.

8

I’d suggest “Shortcodes (a.k.a Plugins)”

9

Hi Leo. Thank you for your feedback. I am not using shortcodes. I am using partials. I have renamed it to ‘add-ons’.

10

Ja, probably the better and more understandable idea. Great - looking forward to seeing it.

11

It is a work in progress: http://hugocodex.org