Skip to content

manabuyasuda/website-template

Repository files navigation

Website Template

静的なWebサイトを作るためのテンプレートです。
なるべく多くの人が使えて、少しモダンな制作環境になることを目指しています。

以下のページで詳しく確認できます。

確認環境

以下の環境で動作の確認をしています。

  • macOS High Sierra 10.13.6
  • Node.js 10.16.0

Node.jsのバージョンはnodenvで固定しています。

始め方

開発に必要なパッケージなどは以下のコマンドですべてインストールされます。クローン、またはダウンロードをしたあとに実行してください。

npm install

ファイル構成

開発はsrcディレクトリでおこない、テスト用の一時ファイルはhtdocsディレクトリに出力されます。
staticディレクトリは、Gulpの処理は必要ないけれど、ファビコンや共通ファイルのような最終的にhtdocsディレクトリに含めたいファイルを置きます。
templateディレクトリはPugファイルのテンプレートです。このテンプレートを元にファイルを作成してください。

root/
├── src/
│   ├── _data/
│   │   └── ja/
│   │       └── site.json
│   ├── _mixin/
│   │   ├── _all.pug
│   │   ├── _breadcrumb.pug
│   │   └── _picture.pug
│   ├── _partial/
│   │   ├── _script.pug
│   │   └── ja/
│   │       ├── _footer.pug
│   │       ├── _header.pug
│   │       └── _meta.pug
│   ├── _template/
│   │   └── ja/
│   │       └── _default.pug
│   ├── about/
│   │   └── index.pug
│   ├── assets/
│   │   ├── css/
│   │   │   ├── base/
│   │   │   │   ├── variable/
│   │   │   │   ├── function/
│   │   │   │   ├── mixin/
│   │   │   │   ├── _normalize.scss
│   │   │   │   └── _base.scss
│   │   │   ├── namespace/
│   │   │   │   ├── sitewide/
│   │   │   │   ├── structure/
│   │   │   │   ├── layout/
│   │   │   │   ├── home/
│   │   │   │   └── top/
│   │   │   ├── _print.scss
│   │   │   ├── site.scss
│   │   │   └── styleguide/
│   │   ├── svg/
│   │   ├── img/
│   │   │   ├── sitewide/
│   │   │   ├── structure/
│   │   │   └── namespace/
│   │   └── js/
│   │       ├── site.js
│   │       ├── polyfill.js
│   │       ├── util.js
│   │       └── namespace/
│   │           ├── data/
│   │           └── js/
│   └── index.pug
├── static/
├── template/
│   ├── index.html
│   ├── ssi/
│   ├── ja/
│   └── en/
├── htdocs/
├── document/
│   ├── css.md
│   ├── html.md
│   ├── image.md
│   ├── js.md
│   └── icon.md
├── aigis/
├── config/
├── README.md
├── package.json
└── gulpfile.js

開発用タスク

以下のコマンドを実行すると、開発に必要なGulpとwebpackのタスクがすべて実行されます。

npm start

本番環境用にビルドする場合は以下のコマンドを実行します。

npm run release

本番環境の動作を検証したい場合は以下のコマンドを実行します。

npm test

HTML・CSS・JSの整形とリントをまとめて実行します。
(少なくとも)エラーが出ない状態にしてからプッシュします。

npm run lint

HTMLHintgulp-w3cjsでHTMLのリントとW3Cのバリデーションを実行します。

npm run htmlValidate

stylelint-config-standardを元にSassのリントを実行します。

npm run stylelint

Airbnb JavaScriptスタイルガイドeslint-plugin-vueを元にJavaScriptのリントを実行します。

npm run eslint

以下のような処理がおこなわれます。

  • PugをHTMLにコンパイル
  • SassをCSSにコンパイル
  • JSをES5にコンパイル(Vue.jsの単一ファイルコンポーネントも変換する)
  • SVGスプライトの生成
  • ローカルサーバーを立ち上げて動作の確認(static以下のHTMLファイルはSSIにも対応)
  • HTMLのリント
  • Sass(CSS)のリント
  • JavaScriptのリント
  • スタイルガイドの生成

対象ブラウザ

デフォルトでは下記のようなブラウザを対象にしています。

  • IE11以降
  • iOS11以降
  • Android5.1以降
  • その他ブラウザは最新版

browser-syncをhttpsで起動する

APIの実行にhttps環境が必要な場合は、以下の設定が必要です。以降の設定はmacOSでの動作を確認しています。

.env.example.envのサンプルファイル)から.envを作成します。

cp .env.example .env

.envHTTPS_KEYHTTPS_CERTに証明書へのパスを設定します。.env内の#以降がコメントになります。

#browser-syncで`https`オプションを使用する場合にコメントを解除します
#証明書の発行方法はドキュメント「https」を参照してください
#HTTPS_KEY=/Users/<ユーザー名>/<IPアドレス>-key.pem
#HTTPS_CERT=/Users/<ユーザー名>/<IPアドレス>.pem

証明書の発行方法は以下のドキュメントを参照してください。

https.md