Weblog_beta

ブログを3年ぶりくらいに再開。
復旧のためにいろいろやったり、検索周りを修正したりした。
すべてを忘却してたけど、数時間触るとだいたい思い出して復旧できた。hugoもalgoliaも便利ですごい。

ブログのファイルをEBSスナップショットから救出

ブログに関連するファイルを編集するために使っていたCloud9のバックエンドのインスタンスを消してしまっていてだいぶ焦った。
幸いにしてEBSボリュームのスナップショットを取っていたので、スナップショットからファイルを復元できた。
スナップショットからボリュームを復元して、新規に作ったEC2インスタンスにアタッチして、この記事（ https://dev.classmethod.jp/articles/recovery-files-from-ebs-snapshot/ ）の手順でボリューム内部にアクセスして、ブログに関連するファイルがまとまっているディレクトリをzipに固めて、scpでダウンロード。
いまは、Cloud9を使わずに、VS Code Remote Developmentを使っているので、VS Code経由でEC2インスタンスにzipを配置して解凍。
あとEC2インスタンスでhugoをインストールしなおして、環境を復活させることに成功した。

algoliaのPython SDKのバージョンアップに対応

このブログの全文検索にはalgoliaを使っていて、インデキシングの処理はPythonで書いてる。
久々にコードを動かしてみると、PythonのSDKのバージョンが上がっていたようでうまく動かなかった。
例えば以前は algoliasearch.Client() と書いていたけど、今は SearchClient.create() のようにするみたい。
3行修正したら動作するようになったのでよかった。

全文検索結果のリンクがおかしいのをなんとかする

ブログをいろいろいじっていたら、全文検索の結果画面から記事にアクセスした時に404になる場合があることに気づいた。
記事のファイル名に (2)みたいな文字列が入っていたら、algoliaのインデックスに保存されるURLとhugoで生成されるURLに齟齬が生じてしまうという悲しいミスだった。
おかしくなっているインデックスを削除してファイル名を修正して、とりあえずうまく動いていそう。

Hugoのバージョンアップに対応（検索が壊れたのを復旧）

いろいろいじってるとなぜか突然検索が動かなくなって、「なにもしてないのにこわれました」状態になった。
レンダリングされたHTMLをdevtoolで見てみたら、検索のためのjsのコードが表示されているべき箇所が  となっていた。
ググると、Hugo の v0.60 ではこういう動作になるとのことだった。
https://budougumi0617.github.io/2020/03/10/hugo-render-raw-html/
https://discourse.gohugo.io/t/raw-html-getting-omitted-in-0-60-0/22032
config.tomlに下記を書き足して復旧。

[markup.goldmark.renderer]
unsafe= true

エンターキーを押して検索できるように改良

これまで、全部検索のテキストボックスにキーワードを入れたあと、キーワードの右側の虫眼鏡アイコンをクリックしないと検索できなかった。
操作がわかりづらすぎるし不便だしダサいので、テキストボックスにフォーカスしてエンターキーを押すと検索できるようにした。

              <input class="prompt" id="search-prompt" type="text" placeholder="ブログを検索">
              <!-- テキストボックスでエンターキーを押すことで画面遷移させる -->
              <script>
                // テキストボックスを取得
                var searchPrompt = document.getElementById("search-prompt");
                // 
                searchPrompt.addEventListener("keypress", event => {
                  if (event.key === 'Enter') { 
                    location.href='{{ .Site.BaseURL }}functions/fullsearch/?q='+encodeURIComponent(document.getElementById('search-prompt').value)
                    return;
                  }
                });
              </script>

失敗の記録

最初、下記のようにしていたのだが、これだとIMEでの変換にも反応してしまうし、スマートフォンで1文字入力するごとに検索が発動してしまってうまくいかなかった。

                searchPrompt.addEventListener("keydown", event => {
                  if (event.isComposing || event.keyCode === 13) { // event.keyCode 13はエンターキー

下記のページを参考にして修正した。
https://qiita.com/ledsun/items/31e43a97413dd3c8e38e

改行の方式を変更

ブログの改行のされ方が、望んでいる感じじゃなくなっていた。
これもMarkdownのレンダラが変わったことが原因らしい。
config.tomlを修正して解消。
https://qiita.com/sijiaoh/items/3dcbbed720a2fc668ca8