Algolia + Hugo + Netlify how to obfuscate API

1

I recently added Algolia to a project of mine. As this is a public repo, I’m trying to find a way to obfuscate the Algolia API key while having Netlify build.

One solution would be to add a bit of js containing the Algolia options to. gitignore and import it in my layouts using Hugo Pipes.
Because myresources dir is commited, Netlify’s Hugo instance will be able to access the resource on build even if its original asset is not in the repo…
But this feels a bit hackish…

Has anyone implemented a better solution?

Thanks!

2

Wouldn’t setting it as environment variable in Netlify’s console work?

1 Like
3

That sure sounds like a better solution than mine!

4

You could add that env var to netlify.toml, too, but I assume you want to hide it from Git as well …

5

Yes, indeed I do.

6

how do you pull the variable into your hugo build if it’s in netlify’s console?

7

Here is a complete Algolia implementation in a Hugo theme: https://github.com/MunifTanjim/minimo/commit/f6da7a7bd32e2d53b1731837d84e9cc66a33b3b9

With some little modifications this can be used with any themes and build systems that you want.

Edit: Sorry, I failed to mention that it doesn’t expose any secret keys. They are stored in Environment variables.

8
9

If possible, you should break that out to a theme component :slight_smile:

2 Likes
10

I don’t think you need to worry about obscuring the Read API key (Search-only API Key), necessarily, just the Write key, in which case I don’t think you’d be using Hugo anyway, but a dotenv in JS.

And not to get off topic, but there’s a pretty nice serverless script out there that ensures that you only update what’s changed in your index.

1 Like
11

Yes my Algolia implentation was old, I found out about the Read only API key! That solves this obscuring issue.
Thanks!

1 Like