これはどんなサイトですか

静的なHTMLサイトでも動作するように、JavaScriptのみで構築したブログサイト。記事データをJSONファイルで保持し、そこから個別記事ページを動的に生成する。

なぜそんな設計で作るのですか

なぜ静的ホスティングサイトなのですか——有料サーバーと契約すると、自分が死んだりクレジットカードが止まったりしただけでサイトが消滅するから（無料サーバーも3ヶ月ごとなどの更新ボタンを押し忘れると消える）。
なぜGitHub Pagesなのですか——今後数十年は潰れそうにない会社だから。あと無料ドメイン（github.io）が一番かっこいいから。
なぜHTMLサイトにしないのですか——記事を100個作るためにディレクトリにHTMLファイルを100個作るのは合理的でないから。その場合、例えばヘッダーとフッターのデザインを変えるとき、100個のHTMLファイル全てを手動で更新することになる。
それならなぜ静的サイトジェネレーター（Jekyll等）を使わないのですか——スマホやタブレットから記事を追加したりスタイルを調整したりできないため。たかがブログを書くのにパソコンを開いていちいちビルドするのはスマートでない。
結論——静的なホスティングサイトで、かつ動的なページ生成を可能にするには、相手方のPCやスマホを使役してページ生成をやらせるのがよい（本来サーバーサイドでやるべき仕事を相手にやらせる横着な方法）。

記事データベース：jsonファイルで代用。非同期通信（ajax）でjsonをGETして、オブジェクトに格納する。以前はjQueryの$getJSONでやっていたが、現在はJavaScriptネイティブのfetchで行なっている。参考：JSONファイルからHTML生成（jQuery）

メニューバーの虫眼鏡アイコンを押すと検索ボックスが出現する。実はCSSのみで作れる。参考：ボタンを押すと出現する検索フォーム
検索語句を入力するたびごとにイベントが発生し、それをトリガーに検索実行。即座に検索結果に反映される。参考：リアルタイム検索（jQuery）
これに限らず、jQueryで作ったものはJavaScriptに置き換えた。IEへの対応と引き換えに、サイトのメンテナンスの労力を削減するため。参考：jQuery→JavaScript書き換え一覧

CSSの命名規則はPRECSS に則る。参考書籍：『CSS設計完全ガイド』（Amazon）
記事ページではマークダウンのように、HTMLタグへのマークアップがただちに装飾に反映される（例：<em>強調</em>→強調）。ただし、これは「文章構造とレイアウトの分離（HTMLとCSSの分離）」という原則に反するため、特定のdiv領域（bl_textクラス）に限定して、そこでだけ直接的なマークアップをしている。
andanteという日記サイトのデザインを勝手に大いに参考にさせてもらった。

現在ではGoogleクローラーはJavaScriptをほぼ完全にレンダリングできる。JavaScriptで動的に生成したページも、サイトマップをxmlで作ってサーチコンソールから送信すれば登録してくれる。参考：拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください
ただし厄介ごともある。具体的には、Googlebotが持ってるJavaScriptのキャッシュが悪さをする。次のような症状がこのサイトでも出た。例：ライブテストとクロール済みのページで得られるHTMLが異なっている
- この場合、ファイル名にフィンガープリントを設定することで解決する（Google公式マニュアル）。記事のjsonを更新したら（jsonファイルではなく）jsファイルに"script-20200530"のようなユニークな名前をつける。原始的なやり方だが、更新を確実に反映させたいときの応急処置として。参考：「キャッシュのせいだから再読込して」と毎回言わなくて済むように