静的サイト作成用テンプレートプロジェクトを作りました
By kkoudev
最近久しぶりに静的サイト(LP)を一から作る機会があったので、
静的サイト作成用のプロジェクトを作り直してみました。
static-site-starter-kit
3年ほど前に作ったfrontend-templateというリポジトリもあったのですが、
こちらはSugarSSやFuseBoxなど、現在のトレンドから外れたアーキテクチャで構成されていたのと、また独自スクリプトが多数あってメンテに難があったため、
2020年向けと思われる内容に書き換えています。
そんなに大した内容ではないですが簡単に説明すると以下の仕組みをテンプレートとして構築しています。
- TypeScriptの採用
- CSS Level 4 (for Stage 1)を採用
- cachebuster用の仕組み (postcss-assets)
- rscss + Atomic Designを意識したCSS設計
- image-setやlazyloadの利用を推奨し、利用簡略化のための便利関数を用意
- 環境別(開発用、本番用)GTMタグ組み込みの仕組み
- Critical Path CSSの生成に対応
- sitemapやrobotsの生成に対応
- 各種Lint対応 (eslint, stylelint and pug-lint) と husky + lint-staged によるコミット前のLint実行
独自スクリプトは可能な限り排除し、公式のCLIやファイル監視系のライブラリを組み合わせて構築しています。