Hello,
I would like to see an example of integration of Algolia’s Search API in Hugo website.
According to the https://gohugo.io/tools/search/#commercial-search-services it’s possible.
Thank you!
There may be several ways to do this, but I would recommend you look into AlpineJS.
I quickly updated an old test repo to the latest AlpineJS version here:
Nothing fancy, but you should get the building blocks you need.
2 Likes
Hi @bep. Thank you very much for your answer!!! I see config.toml file contains algolia ID and algolia API key. Is it possible to hide a secret key using Hugo or I have to use server side code for this purpose?
Thank you!
This is a client side key, so it’s not a secret. I may have named it so it sounds like a secret, but it’s supposed to be shared. You need to create an API key (not a secret) in the Algolia console that has very limited access (search only).
Hi @bep. Thank you very much for your answer!
I took Zdoc | Hugo Themes theme for our large project with Hugo and I would like to use there Algolia Search. I have a problem implementing Algolia Search in this Zdoc theme. Can you help me please?
Thank you very much!
Raya
I switched us over to Algolia on an e-commerce site I work on. It was fairly easy to implement using the algoliasearch npm package. We just wrote the search index as a template and then exported it on every production build using a custom Netlify plugin. I’d be happy to share more details if you’re interested, but Bep’s solution definitely looks simpler.
If you’re interested you can see our implementation in action here.
One thing to consider is whether or not your want to generate your own search index or not. A custom search index gives you a lot more control over what shows up in search and how it’s categorized. Although letting Algolia do it automatically is of course easier, although I expect that your millage may vary with the usefulness of the results.
All that said, if you want something closer to a pre-built solution, I’m not sure Zdoc is the way to go as it seems to have it’s own search built in that doesn’t use Algolia. There are some Hugo themes that support Algolia integration right out of the box though. I found one called Docsy that seems to support Algolia as an option, for example.
Hi @LandGod. Thank you for your answer! I really want to use a simple solution by replacing the existing search in ZDoc theme by Algolia search created by @bep. Currently I have issues when I do it and I really need help!
Hi @rayalevinson. Unfortunately I don’t think that there will be an easy way to do this. It is certainly possible, but would require writing and understanding a fair amount of custom code as well as just messing around with things to see how it worked. It’s not really something where we can just tell you how to do it in a forum post. There is no step-by-step process.
Hi @LandGod. Thank you for your answer. I found how to change the original ZDoc code in order to work with @ben code. It works! Now when I want to work with my data in Algolia I need to know what url should I use. In the example I see that https://latency-dsn.algolia.net/1/indexes/*/queries’ is used. Where can I find what url should I use in my case?
I see only API keys on my Algolia account.
Thank you very much!
Just looking at Bep’s code, it looks like you need to use https://YOUR_APP_ID_HERE-dsn.algolia.net/1/indexes/*/queries where you put your Algolia app id instead of YOUR_APP_ID_HERE. I would recommend checking out the Algolia docs for details on how this actually works though.
If this can help, we built an Algolia/Meili Hugo module which sports the solution to easily build the index, and frontend using instantsearch.js (mostly set through your configuration file, no js needed)
Let me know if this helps: GitHub - theNewDynamic/hugo-module-tnd-search: Everything search for Hugo