VuePressで作ったページにalgoliaによる検索機能を追加する

概要

VuePressで作ったページの上部に、デフォルトのテーマでは検索用のテキストフィールドがあります。

特に設定しなければ、タイトルとh2/h3のみが検索対象となるようです。
本格的な検索を取り入れたい場合には、algoliaを利用できるようです。
本記事ではalgoliaを導入する手順を説明します。

algolia登録

以下のURLから、GitHubアカウント等で登録します。

ログイン後のダッシュボードで、API Keysから書き込み可能なAPIキーの発行を、Indices > NEW INDEXから新規インデックス作成をしておきます。

検索対象ページのインデックス

デプロイ済みのページを主導でインデックスする必要があります。
algoliaが自動で24hおきにやってくれているようですが、よく分からないのでとりあえず手動でやってみました。

GitHubにalgolia公式のツールがありますのでそちらを利用します。

$ git clone https://github.com/algolia/docsearch-scraper
$ cd docsearch-scraper
$ ./docsearch docker:build

Dockerに加えて、Python3系がおそらく必要です。
途中モジュールが足りない場合は適宜requirements.txt確認しつついれました。

続いて.envファイルにalgoliaのAPP_ID/API_KEYを設定します。
(algoliaログイン後のダッシュボードからAPI Keysで発行できます)

.env

-APPLICATION_ID=
+APPLICATION_ID=XXXXXXXXXX
-API_KEY=
+API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXX

スクレイピング設定を記載した、config.jsonを作成します。
INDEX_NAME, START_URL, selectorsは適宜変更してください。
selectorsはどのDOM要素をインデックス対象とするかのselectorです。

config.json

{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "START_URL"
    ],
    "stop_urls": [],
    "selectors": {
        "lvl0": {
            "selector": "p.sidebar-heading.open",
            "global": true,
            "default_value": "Documentation"
        },
        "lvl1": ".content h1",
        "lvl2": ".content h2",
        "lvl3": ".content h3",
        "lvl4": ".content h4",
        "lvl5": ".content h5",
        "text": ".content p, .content li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    }
}

こうしてようやくインデックスできます。

$ ./docsearch docker:run "$(pwd)/config.json"

VuePress側の設定

以下のようにアプリケーションID(APP_ID)、キー(APP_KEY)、インデックス名(INDEX_NAME)の設定を行ってください。
この設定は静的コンテンツの中に含まれるため、キーには検索専用のものを用いるようにしてください。

.vuepress/config.js

module.exports = {
    ...
        algolia: {
             appId: "APP_ID",
             apiKey: "APP_KEY",
             indexName: "INDEX_NAME"
        }
    }
    ...
}

こんな感じに表示されます。