Algolia Search on Jekyll Sites

by Tim Carry (tim@algolia.com)

Who am I?

Tim Carry

@pixelastic

What is Jekyll?

It's a static website generator.
It takes markdown and templates files and outputs HTML.

jekyll build

Markdown

HTML

What is Algolia?

Hosted search API
Fast and relevant
Instant search UI

Algolia in 3 steps

Syncing data
Ranking and Relevance
Front-end Search

Plugin integration

1. Editing `Gemfile`

group :jekyll_plugins do
  gem 'algoliasearch-jekyll'
end

2. Editing `_config.yml`

algolia:
  application_id: 'D34DB33F42'
  index_name: 'blog'

3. Running the command

$ ALGOLIA_API_KEY=XXXX jekyll algolia push

Indexing 1000 items
Indexing 253 items
Indexing of 1253 items in blog done.

How it works

Parse generated HTML

Split by paragraph

Push to Algolia

{
  "content": "<p>Simple, blog-aware, static site generator.</p>",
  "title": "Testing several Jekyll versions",
  "url": "/2016/01/06/testing-several-jekyll-versions",
  "posted_at": 1404770400,
  "tags": ["jekyll", "test"],
  "custom_front_matter": "Custom value"
}

Configuration

algolia:
  record_css_selector: 'p,.custom-selector,blockquote'
  excluded_files:
    - index.html
  settings:
    highlightPostTag: '</mark>'
    highlightPreTag: '<mark>'

class AlgoliaSearchRecordExtractor
  def custom_hook_each(item, node)
    # Enrich the record with your own data
    item['custom_attribute'] = 'foo bar'
    item
  end
  def custom_hook_all(items)
    items.filter do |item|
      # Keep only some records if you want
    end
  end
end