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:
- 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”]
- I also updated the list of outputs:
[outputs]
home = [“HTML”, “WebAppManifest”, “RSS”, “Algolia”]
- 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 -}}
- 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" />
- 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. 
- 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.
Brian