Algolia and GitHub

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

Algolia

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

Netlify

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

  1. Netlifyのアカウントを作成
  2. SitesNew site from Gitでサイト設定
    1. Continuous DeploymentでGitHubを選ぶ Netlify Netlify
    2. repository一覧が出るので選ぶ Netlify
    3. Build opitionsなどを設定だけど、あとでコマンドなどの設定も追加するんだよね…とりあえずで
      • Build commandjekyll build && jekyll algolia
      • Publish directory_site Netlify
      • Show advanced Netlify
      • ALGOLIA_API_KEYの値としてAlgoliaのAPPS→作成したアプリ→API KeysAdmin API Keyを設定 Netlify

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

  3. お好みでDefault subdomainを分かりやすい名前に変えたり
  4. Domain managementDomainsCustom domainsAdd custom domainNetlify
    • DNSをNetlifyにする場合
      1. カスタムドメインを入力
      2. Check DNS configurationと怒 られるが、しばらくするとUse Netlify DNSに行けるように
      3. ボタンをポチポチと押していき、最後に出てくるネームサーバ(複数パターンあり)を設定する
      4. NetlifyのDNS設定で自動でこういうレコードができてる
      name Type Target
      @ NETLIFY www.netlify.com
      www NETLIFY www.netlify.com
    • DNSは今までどおりにする場合(全然まとまってないけど)
      • GitHub Pagesにカスタムドメインでの設定でDNSはこうなっているかと
      name Type Target
      @ A 185.199.108.153
      @ A 185.199.109.153
      @ A 185.199.110.153
      @ A 185.199.111.153
      www CNAME ユーザID.github.io
      www CAA 0 issue “letsencrypt.org”
      • でもあとどうだったかな…?
      • これは前に設定したときのDNS設定
      name Type Target
      @ A 104.198.14.52
      www CNAME [サイト名].netlify.com
  5. Domain managementHTTPSVerify DNS configurationでLet’s Encryptな証明書を作成できる1 Netlify
  6. 設定方法を忘れてしまった…Troubleshootingを見て設定した記憶が Netlify
  7. _redirectsファイルを作成
    # Redirect default Netlify subdomain to primary domain
    https://<site-name>.netlify.com/* https://<custom-subdomain>/:splat 301!
    

    Netlify

  8. netlify.tomlを作成
    # netlify.toml
    # This file should be at the root of your project
    [build]
      command = "jekyll build && jekyll algolia"
      publish = "_site"
    
  9. DeploysTrigger deployで叩いてみる
  10. うまくいったら、あとはgit pushのたびに良きに計らってくれる

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'
    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/instantsearch.js@1/dist/instantsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.2/dist/instantsearch.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.2"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.2/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