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
HTMLHintとgulp-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
.envのHTTPS_KEYとHTTPS_CERTに証明書へのパスを設定します。.env内の#以降がコメントになります。
#browser-syncで`https`オプションを使用する場合にコメントを解除します
#証明書の発行方法はドキュメント「https」を参照してください
#HTTPS_KEY=/Users/<ユーザー名>/<IPアドレス>-key.pem
#HTTPS_CERT=/Users/<ユーザー名>/<IPアドレス>.pem
証明書の発行方法は以下のドキュメントを参照してください。
-
Moved to http://blog.tangcs.com/2010/12/30/website-template-generators/ 转载于:https://www.cnblogs.com/WarrenTang/archive/2010/12/30/1922342.html
-
Techqueria.org The GitHub repo was archived on May 10th, 2021 since Techqueria migrated our website to Wordpress. If you're interested in Techqueria supporting open source projects related to Latinx i
-
music-website 项目说明 本音乐网站的客户端和管理端使用 VUE 框架来实现，服务端使用 Spring Boot + MyBatis 来实现，数据库使用了 MySQL。实现思路可以看这里；项目启动方法看文章末尾。 项目预览 前台截图预览 后台截图预览 项目功能 音乐播放 用户登录注册 用户信息编辑、头像修改 歌曲、歌单搜索 歌单打分 歌单、歌曲评论 歌单列表、歌手列表分页显示 歌词同步
-
JSON Resume Website Visit the website at https://jsonresume.org/ Development There are two ways to run this website, locally or inside a VM. Locally Dependencies: Git Debian-based OS (e.g. Ubuntu) 1.
-
ember-website This project contains the current emberjs.com website, using server-side rendering techniques to generate a static website.Components come from ember-styleguide. Prerequisites You will n
-
Crystal Website Powered by Jekyll Development setup (via docker) Checkout the repository Run $ docker-compose up Open a browser in localhost:4000 The docker container will launch jekyll with --increme