IkeqIkeq

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

6Archives4Categories14Tags

Inside Theme — Search

Jun 21, 2019

Inside supports two search modes: local search (built-in, generates a JSON index at build time) and Algolia (cloud-powered, requires an Algolia account).

Local search generates a searchable JSON file from your posts at build time. No external accounts required.

Step 1: Enable the search adapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
search:
  # Show search button in the FAB (floating action button, bottom-right)
  fab: true

  # Generate a standalone /search page (add to your sidebar menu)
  page: true

  # Local search adapter
  adapter:
    # Which content types to index
    range:
      - post
      - page

    # Maximum number of items to index per type
    # Default: 10000
    limit: 10000

    # Search results per page
    per_page: 10

Step 2: Add search to your menu

1
2
menu:
  Search: /search

Step 3: Create the search page (if page: true)

1
hexo new page search

Edit source/search/index.md:

1
2
3
4
---
title: Search
layout: false
---

The layout: false prevents the page from using the post/page layout, since Inside renders the search UI as a standalone SPA route.

How it works

At hexo generate, Inside writes a JSON index to source/api/search.json. The search SPA reads this file and performs instant full-text search on the client side.

Algolia provides faster, more sophisticated search with typo tolerance and cloud-synced indexing. Best for sites with hundreds of posts.

Step 1: Create an Algolia account

  1. Sign up at algolia.com
  2. Create a new application and index
  3. Copy your Application ID, Search-Only API Key, and Index Name

Step 2: Install the Algolia CLI (optional)

1
npm install -g algolia-cli

Step 3: Configure Inside

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
search:
  page: true
  adapter:
    # Results per page
    per_page: 10

    # Optional: custom Algolia logo in search UI
    # logo: //cdn.example.com/algolia-logo.svg

    request:
      # Algolia query endpoint
      url: https://YOUR_APP_ID-dsn.algolia.net/1/indexes/YOUR_INDEX/query
      method: post
      body: |
        {
          "query": ":query",
          "hitsPerPage": ":per_page",
          "page": ":current"
        }
      headers:
        X-Algolia-API-Key: YOUR_SEARCH_ONLY_API_KEY
        X-Algolia-Application-Id: YOUR_APP_ID
        Content-Type: application/json; charset=UTF-8

    keys:
      data: hits                        # Path to result array in response
      current: page                     # Current page number key
      total: nbPages                    # Total pages key
      hits: nbHits                      # Total results key
      time: processingTimeMS            # Query time key
      title: _snippetResult.title.value # Per-result title (with highlights)
      content: _snippetResult.content.value  # Per-result snippet (with highlights)

Step 4: Upload your content to Algolia

You need to push your post data to Algolia’s index. A common approach is a custom Hexo generator script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// scripts/algolia-index.js
const algoliasearch = require('algoliasearch');
const client = algoliasearch(APP_ID, ADMIN_API_KEY);
const index = client.initIndex('YOUR_INDEX');

// Run after hexo generate
hexo.on('generateAfter', () => {
  const posts = hexo.locals.get('posts').toArray();
  const records = posts.map(post => ({
    objectID: post.id,
    title: post.title,
    content: post.content.slice(0, 5000), // Algolia record size limit
    date: post.date,
    url: post.permalink,
  }));
  index.saveObjects(records);
});

Choosing Between Local and Algolia

Local Algolia
Cost Free Free tier up to 10k records/mo
Speed Fast for small sites Instant for any size
Setup 5 minutes 30+ minutes
Typo tolerance ❌ ✅
Offline-capable ✅ (JSON file) ❌ (needs network)
Best for < 200 posts Larger sites, professional SEO

Next Steps

Buy me a cup of milk 🥛.

支
Local Search
Step 1: Enable the search adapter
Step 2: Add search to your menu
Step 3: Create the search page (if page: true)
How it works
Algolia Search
Step 1: Create an Algolia account
Step 2: Install the Algolia CLI (optional)
Step 3: Configure Inside
Step 4: Upload your content to Algolia
Choosing Between Local and Algolia
Next Steps