このサイトの仕組み
hakhatz.devの技術的な構成、公開の仕組み、ライセンスをまとめたページです。
目次
技術スタック
- Astro: 静的サイトジェネレーター(SSG)。各ページはMarkdownで書かれ、ビルド時に静的なHTMLへ変換される
- remark-toc: Markdownページ内の
## 目次見出し直下に見出し一覧へのリンクを自動生成する - Shiki: Astroに標準搭載されているシンタックスハイライター。フェンスコードブロックを自動でハイライトする
- KaTeX: 本文に
$$や\(...\)などの数式区切り文字が含まれる場合に自動で有効化される - Astro Content Collections: ブログ記事の一覧化・日付順の並び替えに使用(他のページとは異なる管理方式)
- Cloudflare Pages: ホスティングプラットフォーム
公開の流れ
コードはGitHubで管理しています。
mainブランチにpushすると、Cloudflare Pagesが自動的にビルドとデプロイを行い、このサイトに反映されます。
設計方針
- 装飾は最小限に留め、スタイリングよりも読みやすさとシンプルさを優先する
- HTMLとブラウザのデフォルトを主軸に、CSSとJavaScriptは補助として使う
- WCAGレベルAAを目標に、コントラスト比やフォントサイズなどのアクセシビリティに配慮する
- motherfuckingwebsite系のミニマリズムを参考にする
- 好みのテーマ(Gruvboxカラーパレット)を使用
ライセンス
ソースコードはMIT License、コンテンツ(テキスト・画像・その他メディア)はCC BY 4.0です。
サードパーティライセンス
フッターのアイコンは、Font Awesome Free(CC BY 4.0)とGitHubの公式ロゴを使用しています。
ソースコード
GitHubリポジトリhakhatz2486/hakhatz-devで全文を公開しています。 ディレクトリ構成や開発コマンドなどの詳細は、リポジトリのREADMEを参照してください。