Merge pull request #26 from toshifumiimanishi/feature/update-document

Feature/update document

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.1.1
+
+- Website Boilerplate の概要、技術スタックの追記
+- 各ディレクトリ / ファイルの役割の説明文の追記
+
 ## 2.1.0
 
 - ESLint v7.0.0 のアップグレード

README.md

@@ -1,16 +1,79 @@
 ## What is Website Boilerplate?
-Web サイトの開発用テンプレートです。
 
-### Documentation
+Website Boilerplate とは、静的な Web サイトを開発するためのボイラープレートです。主にフロントエンドの周辺技術をターゲットに整備しています。具体的な技術スタックは以下の通りです。
+
+| 区分 | 技術スタック |
+| --- | --- |
+| 言語 | HTML / EJS / CSS / Sass / PostCSS / JavaScript / TypeScript |
+| タスクランナー | gulp |
+| モジュールバンドラ | rollup.js |
+| トランスパイラ | Babel |
+| テストフレームワーク | Jest + Puppeteer |
+| その他周辺技術 | EditorConfig / stylelint / ESLint / Prettier |
+
+## What's included
+
+各ディレクトリ / ファイルの役割を下記に示します。
+
+```
+website-boilerplate/
+├── .circleci/ ... CircleCI 関連ディレクトリ
+├── .editorconfig ... EditorConfig の設定ファイル
+├── .eslintrc.json ... ESLint の設定ファイル
+├── .gitignore ... Git の追跡対象を制御するファイル
+├── .node-version ... Node.js のバージョンを指定するファイル
+├── .prettierrc ... Prettier の設定ファイル
+├── .stylelintrc ... stylelint の設定ファイル
+├── .vscode/ ... VS Code 関連ファイル
+├── babel.config.json ... Babel の設定ファイル
+├── docs/ ... ドキュメントを管理するディレクトリ
+├── gulpfile.js ... gulp の設定ファイル
+├── htdocs/ ... 本番用ディレクトリ
+│   ├── css/
+│   ├── img/
+│   ├── index.html
+│   └── js/
+├── jest-puppeteer.config.js
+├── package-lock.json
+├── package.json
+├── rollup.config.js ... rollup.js の設定ファイル
+├── src ... 開発用ディレクトリ
+│   ├── _docs/
+│   ├── _ejs/ ... EJS 関連のコード一式
+│   │   ├── _data/ ... メタ情報やパーシャルファイルの設定情報を JSON ファイル形式で管理するディレクトリ
+│   │   ├── _partials/ ... EJS パーシャルファイル格納用ディレクトリ
+│   │   └── index.ejs
+│   ├── _sass/ ... Sass 関連のコード一式
+│   │   └── css/
+│   │       ├── _partials/ ... Sass パーシャルファイル格納用ディレクトリ
+│   │       │   ├── _function.scss ... Sass 関数を管理するファイル
+│   │       │   ├── _test.scss ... テスト駆動マークアップ用ファイル
+│   │       │   ├── _utilities.scss ... 僅かなスタイル調整のための便利クラスを定義するファイル
+│   │       │   ├── _variables.scss ... 変数を管理するファイル
+│   │       │   ├── foundation/ ... リセット CSS やプロジェクトにおける基本的なスタイルを定義するファイル格納用ディレクトリ
+│   │       │   ├── helpers/ ... ヘルパークラス用ディレクトリ
+│   │       │   └── mixins/ ... ミックスインを管理するディレクトリ
+│   │       └── main.scss
+│   └── _ts/ ... TypeScript 関連のコード一式
+│       └── js/
+│           ├── entry.ts ... rollup.js のエントリーファイル
+│           └── modules/ ... モジュールファイル格納用ディレクトリ
+├── test/
+│   └── e2e/ ... E2E テスト関連のスクリプトを管理するディレクトリ
+└── tsconfig.json ... TypeScript の設定ファイル
+```
+
+## Documentation
 
 Website Boilerplate の詳細は[公式ドキュメント](https://toshifumiimanishi.github.io/website-boilerplate/overview/)をチェックしてください。
 
-### Get Started
+## Get Started
 以下のコマンドでパッケージをインストールしてください。
 ```
 npm install
 ```
-### Usage
+
+## Usage
 以下のコマンドで開発用サーバーの起動 + 自動コンパイルを実行します。
 ```
 npm run dev

docs/404.html

@@ -7,13 +7,13 @@
     <meta name="generator" content="VuePress 1.4.1">
 
     <meta name="description" content="">
-    <link rel="preload" href="/website-boilerplate/assets/css/0.styles.1aea7f57.css" as="style"><link rel="preload" href="/website-boilerplate/assets/js/app.d4bdbc6e.js" as="script"><link rel="preload" href="/website-boilerplate/assets/js/4.0605786e.js" as="script"><link rel="prefetch" href="/website-boilerplate/assets/js/2.b2eb7320.js"><link rel="prefetch" href="/website-boilerplate/assets/js/3.af871f68.js"><link rel="prefetch" href="/website-boilerplate/assets/js/5.57d7c9d5.js"><link rel="prefetch" href="/website-boilerplate/assets/js/6.96b29e2e.js"><link rel="prefetch" href="/website-boilerplate/assets/js/7.91537f3d.js">
+    <link rel="preload" href="/website-boilerplate/assets/css/0.styles.1aea7f57.css" as="style"><link rel="preload" href="/website-boilerplate/assets/js/app.2f0cfccc.js" as="script"><link rel="preload" href="/website-boilerplate/assets/js/4.0605786e.js" as="script"><link rel="prefetch" href="/website-boilerplate/assets/js/2.b2eb7320.js"><link rel="prefetch" href="/website-boilerplate/assets/js/3.af871f68.js"><link rel="prefetch" href="/website-boilerplate/assets/js/5.57d7c9d5.js"><link rel="prefetch" href="/website-boilerplate/assets/js/6.ea89512f.js"><link rel="prefetch" href="/website-boilerplate/assets/js/7.91537f3d.js">
     <link rel="stylesheet" href="/website-boilerplate/assets/css/0.styles.1aea7f57.css">
   </head>
   <body>
     <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/website-boilerplate/" class="router-link-active">
       Take me home.
     </a></div></div><div class="global-ui"></div></div>
-    <script src="/website-boilerplate/assets/js/app.d4bdbc6e.js" defer></script><script src="/website-boilerplate/assets/js/4.0605786e.js" defer></script>
+    <script src="/website-boilerplate/assets/js/app.2f0cfccc.js" defer></script><script src="/website-boilerplate/assets/js/4.0605786e.js" defer></script>
   </body>
 </html>