Algolia

後述のようにMinimal Mistakesだと設置は楽。設定が大変なのは変わり無し。

Algolia

…の設定は、ページ作成のAlgoliaを参照。

Netlify

「GitHubの内容をGitHub PagesではなくNetlifyで公開する」というものらしい。
ってことはGitHub Pagesってジャンルじゃないよね…
GitHub Pagesにて既にサイトを公開している場合は、カスタムドメインを削除しておくべし。

  1. Netlifyのアカウントを作成
  2. SitesNew site from Gitでサイト設定
    1. Continuous DeploymentでGitHubを選ぶ
    2. repository一覧が出るので選ぶ
    3. Deploy settings forなんちゃら、を設定してDeploy site
    4. Build commandjekyll build
    5. Publish directory_site

    このタイミングでGitHubリポジトリのDeploy keysやwebhooksにNetlifyが追加されてる

  3. お好みでDefault subdomainを分かりやすい名前に変えたり
  4. Build & deployContinuous DeploymentBuild environment variablesALGOLIA_API_KEY を設定。値はAlgoliaのAPPS→作成したアプリ→API KeysAdmin API Key
  5. Dmain managementDomainsCustom domainsAdd custom domain
    1. カスタムドメインを入力
    2. Check DNS configurationと怒られるが、しばらくするとUse Netlify DNSに行けるように
    3. ボタンをポチポチと押していき、最後に出てくるネームサーバ(複数パターンあり)を設定する
    4. 自動でDNSにこういうレコードができてる
    name Type Target
    @ NETLIFY www.netlify.com
    www NETLIFY www.netlify.com
  6. Domain managementHTTPSVerify DNS configurationでLet’s Encryptな証明書を作成できる1
  7. netlify.tomlを作成
    # netlify.toml
    # This file should be at the root of your project
    [build]
      command = "jekyll build && jekyll algolia"
      publish = "_site"
    
  8. DeploysTrigger deployで叩いてみる

余談

カスタムドメインに関してはNetlify builds, deploys, and hosts your front end.参照。 NetlifyのDNSを使わずに設定したい場合はこの設定らしい。

name Type Target
@ A 104.198.14.52
www CNAME [サイト名].netlify.com

Jekyll

  1. _config.ymlに設定追加
    algolia:
      application_id         : "APPS ID" # YOUR_APPLICATION_ID
      index_name             : "indexの名前" # YOUR_INDEX_NAME
      search_only_api_key    : "Search-Only API Keyからコピってくる" # YOUR_SEARCH_ONLY_API_KEY
    
  2. Gemfileに追加だったり修正だったり
    gem 'github-pages', group: :jekyll_plugins
    group :jekyll_plugins do
     gem 'jekyll-algolia', '~> 1.0'
    end
    
  3. でもってbundle updateを叩く

ローカルテスト

  1. ローカルでコマンドを叩く
    $ ALGOLIA_API_KEY='Admin API Key' bundle exec jekyll algolia
    
  2. こういうのが出た
    Processing site...                                                              
    Extracting records...                                                           
    Updating records in index index...                                              
    Records to delete: 0                                                          
    Records to add:    390                                                          
    ✔ Indexing complete
    

    Algoliaのダッシュボードで、Indicesにデータが流れ込んだのが確認できるかと。

  • Minimal Mistakesだと4.10.0からalgoliaにも対応しているので、
    1. 普通にjekyll sコマンドを叩く
    2. 動いた(´∇`)
    3. GitHubにpush
    4. 動いてる(´∇`)
  • それ以外の対応してないテーマには、自力で検索フォームやらを作ることに。次項参照

自分で検索フォームを作ってみる

InstantSearch.jsでフォームを作る

今回はBaseなるテーマで作ってみる。やることは他のテーマでも一緒かと。

Jekyll側の設定

…は先述通り

読み込むもの系

/_layouts/default.htmlの<head>内に放り込む。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css"/>
<script src="/js/algolia.js"></script>

今までの検索フォームはコメントアウトしておく。

スクリプト

/js/algolia.jsを作成

フォーム

フォーム用に/algolia.mdを新規作成

---
title: "サイト内検索"
description: "algoliaのサイト内検索テスト中。"
permalink: /algolia.html
---
<section class="instantsearch">
{% include instantsearch.html %}
</section>

/_includes/instantsearch.htmlを作る

<input type="text" id="algolia-search"/><img src="/images/search-by-algolia.svg" width="100">
<div id="hits"></div>
<div id="pagination-container"></div>

<script src="/js/algolia.js"></script>

/_data/navigation.ymlに検索メニューを追加

- name: Search
  link: /algolia.html

これで/algolia.htmlから検索できるようになった。あとは見た目などを弄ったり。
できればヘッダーナビあたりに検索ボックスを置いて、どこからでも検索できるようにしたいかな。

  1. DNS設定の流れですぐに設定しようとしたら、最低1時間くらいは待ちやがれ、と怒られた(´・ω・`) 

Leave a Comment