小さな技術ノートは、静的サイトから始める

まずは「記事が読める」をつくる

このノートサイトは、HTML・CSS・JavaScriptの静的ファイルで構成しています。記事ごとにHTMLファイルを置き、一覧からリンクするだけ。データベースやログイン機能はありません。

最初に決めたのは、ページ数や技術スタックよりも「本文を読む」「別の記事へ移動する」という基本の動きです。JavaScriptが動かなくても、この2つは使える構成にしています。

index.html
style.css
script.js
notes/
  static-site.html
  github-pages-domain.html
  localstorage-theme.html

本文をJavaScriptで後から生成せず、最初からHTMLに含めます。各記事には固有のURLを持たせ、見出しへのリンクで必要な箇所を参照できるようにしました。

<article>
  <h1>記事のタイトル</h1>
  <section id="implementation">
    <h2>実装のメモ</h2>
    <p>試した手順と、その理由を残す。</p>
  </section>
</article>

見出しの順序、本文の幅、コードの横スクロールを整えるだけでも、技術記事は読みやすくなります。装飾よりも、長い文章やコードを無理なく追えることを優先します。

このサイトでJavaScriptが担当するのは、記事の絞り込みとアクセントカラーの切り替えです。検索はページ内の記事情報を使うため、検索サーバーは不要です。

検索語とカテゴリはURLのクエリに残します。記事を読んで一覧へ戻ったときも、同じ条件から続けられるようにしています。検索はタイトル・概要・タグが対象で、本文の全文検索ではありません。

フィルターが使えない環境では全件表示に戻る設計です。「便利な機能が失敗しても、記事を読める」という境界を保ちます。

この構成では、ヘッダーなど共通部分を各HTMLで管理する必要があります。記事が増えて更新の重複が負担になったら、Markdownと静的サイトジェネレーターへの移行を検討できます。

今は小さく公開し、記事を書く流れを確かめる段階。検索サーバーやCMSを先に用意せず、実際に繰り返している作業から自動化していく方針です。

今回のメモ

読むための機能をHTMLで完成させてから、JavaScriptで使いやすさを足す。