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.

Image credit

tookapic