Netlify + Algolia = I get nothing

I hate to admit that I’ve spent several hours on something that’s described as a 15-minute task but there you go.

My Hugo site is really coming along great: I really, really like Hugo. In my former life, we didn’t use Git so figuring that out took a couple of hours but I’m now using Bitbucket plus Netlify and everything is working great. Today was the day to add the Algolia search.

I found helpful information here on configuring Hugo and started with that. My goal was just to get the most basic form of the search working. Once I had that going, I’d configure it as needed. Unfortunately, I haven’t gotten that far. I’ve searched Algolia’s documentation for answers without luck. I’ve searched google and Hugo, also with no luck. I’m hoping someone here will have an answer.

I know that the search is working because I can log into Algolia and see the search records. Just to make sure that I could, I configured a few options like removing “keywords” and adding “tags”-- nothing very earthshaking

In my Hugo project:

  1. I added the following to the config.toml:

[outputFormats.Algolia]
baseName = “algolia”
isPlainText = true
mediaType = “application/json”
notAlternative = true

[params.algolia]
vars = [“title”, “summary”, “date”, “publishdate”, “expirydate”, “permalink”]
params = [“categories”, “tags”]

  1. I also updated the list of outputs:

[outputs]
home = [“HTML”, “WebAppManifest”, “RSS”, “Algolia”]

  1. I created list.algolia.json at layouts/_default and placed this information in that file:

{{/* Generates a valid Algolia search index */}}
{{- $.Scratch.Add “index” slice -}}
{{- $section := $.Site.GetPage “section” .Section }}
{{- range .Site.AllPages -}}
{{- if or (and (.IsDescendant $section) (and (not .Draft) (not .Params.private))) $section.IsHome -}}
{{- $.Scratch.Add “index” (dict “objectID” .UniqueID “date” .Date.UTC.Unix “description” .Description “dir” .Dir “expirydate” .ExpiryDate.UTC.Unix “fuzzywordcount” .FuzzyWordCount “keywords” .Keywords “kind” .Kind “lang” .Lang “lastmod” .Lastmod.UTC.Unix “permalink” .Permalink “publishdate” .PublishDate “readingtime” .ReadingTime “relpermalink” .RelPermalink “summary” .Summary “title” .Title “type” .Type “url” .URL “weight” .Weight “wordcount” .WordCount “section” .Section “tags” .Params.Tags “categories” .Params.Categories “authors” .Params.Authors)}}
{{- end -}}
{{- end -}}
{{- $.Scratch.Get “index” | jsonify -}}

  1. In head.html (included at the beginning of the HTML head) I added:
<!-- Algolia search -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
  1. In script.html (included at the base of the HTML body), I added:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script>
  const search = instantsearch({
    appId: 'AAAAAA',
    apiKey: 'KKKKK',
    siteId: 'IIII',
    branch: 'master',    
    selector: 'div#search',
  });

  search.start();

</script>

I copied the script directly from Netlify and have verified the actual appId, apiKey and siteID about 8,000 times today. :slight_smile:

  1. The search page is titled Search and is remarkably simple:
{{ define "main" }}

{{ partial "page-title.html" . }}

<div class="page-wrapper">

  <div id="search">
  </div>

</div>

{{ .Render "default" }}

{{ end }}

The page renders perfectly – except there is no indication of an Algolia search bar. I’ve tried a lot of different options, including adding divs for searchbox, hits and pagination. Nothing makes any difference. I get nothing.

At this point, I’m assuming that I’m making some really silly or totally idiotic mistake but at this point, I can no longer see the forest for the trees. Any advice is greatly appreciated.

Thanks. :slight_smile:
Brian

I decided to take some time off and then come back refreshed. When I got back, I searched some more and found that Algolia recommends this particular script for Netlify:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script type="text/javascript">
  algoliasearchNetlify({
    appId: '<YOUR_ALGOLIA_APP_ID>',
    apiKey: '<YOUR_ALGOLIA_API_KEY>',
    siteId: '<YOUR_NETLIFY_SITE_ID>',
    branch: '<YOUR_TARGET_GIT_BRANCH>',
    selector: 'div#search',
  });
</script>

Substituting this script for the other one caused the search bar to show up and work properly. Now I simply need to configure the options I need.

I hope this might help someone else who is trying to use Netlify and Algolia in the future. In reality, it is pretty easy to do – once you find the key to the kingdom. :slight_smile:

Regards to all,
Brian

2 Likes

Well, I learned something critical. It took a while but I finally figured it out. :slight_smile:

The Netlify Algolia search plugin does not support any of the features that I was trying to add to my search page. When you read the description, it looks like it supports all of the features of Instant Search but it does not. It only supports a searchbar with a dropdown list.

In my application, that looked particularly ugly because the list could cover everything, including the footer. Not pretty. At least as important, I wanted to have search page with paginated results that a user could browse through.

About 2 am last night, I figured out that I could have the best of both worlds: keep the Netlify plugin and have it trigger updates to the Algolia search index with every deploy but not use that plugin to display search results.

Instead, I’m calling Algolia search directly from my Hugo page. As soon as I substituted that, everything started working correctly.

Like so many things in computing, the hard work is figuring out what the problem is. Fixing the problem is the easy part.

If anyone would like a guide to adding a full Algolia search to their hugo project while using the Netlify plugin, I can probably put something together. :slight_smile:

2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.