Just because of using a static blog engine shouldn’t prevent us from adding search functionality to our site.
In this post, let’s go over using Algolia API to build an index and search from that index.
Setup index
While Hugo is written in Go and the easy of deployment is one of it selling point IMHO, however not many people like Go or have a working setup of Go. It’s much easier to do this on NodeJS since many people already use it, considering that many of my friend designer use it.
We will need two steps. First step we build the index and push it to Algolia. Second step, we make use of that index from client side.
Step 1. Install dependencies
We will use gulp with babel to write our task for pushing index.
npm install --save algoliasearch babel dotenv gulp gulp-babel gulp-util
Step 2. Write gulp task
Here is my entire gulp task to push index to Algolia. You will need to
create a file call .env
and store Algolia secret there like this:
ALGOLIA_API_KEY=R04FMF0T1N
ALGOLIA_API_SECRET=f3686d58a67af6b12547e376c38b2e82
On Gulp task, beside send document to Algolia for indexing, we also generate a JSON index file so that you can manually upload to Algolia if we want to.
import gulp from 'gulp'
import babel from 'gulp-babel'
import through from 'through2'
import path from 'path'
import gutil from 'gulp-util'
import {File, PluginError} from 'gulp-util'
import algoliasearch from 'algoliasearch'
import * as dotenv from 'dotenv'
dotenv.load()
const PATH = {
content: "content/**/*.md",
index: "dist/index.json"
}
gulp.task('index', () => {
console.log("Started to index...")
let index = []
gulp.src(PATH.content)
.pipe(through.obj(function(file, enc, cb) {
// make sure the file goes through the next gulp plugin
this.push(file);
// append a new index entry
index.push({content: file.contents.toString(), uri: path.basename(file.path), objectID: path.basename(file.path)})
// tell the stream engine that we are done with this file
cb();
}, function endStream(cb) {
let indexFile = new File({
base: path.join(__dirname, './dist/'),
cwd: __dirname,
path: path.join(__dirname, PATH.index)
})
indexFile.contents = new Buffer(JSON.stringify(index))
let client = algoliasearch(process.env.ALGOLIA_API_KEY, process.env.ALGOLIA_API_SECRET);
let db = client.initIndex('notyim')
console.log("indexing to algolia...")
db.saveObjects(index, (err, content) => {
if (err) {
console.log(err)
}
cb();
})
this.push(indexFile);
}))
.pipe(gulp.dest('dist'))
})
Step 3. Index data
With the gulpfile
above. we can run:
gulp index
After this, confirm that newindex is created on Algolia.
Step 4. Adding client search
Now, the index is ready on Algolia and we can query it via Algolia JavaScript client. In next part, we will hook this up.