{"id":14967581,"url":"https://github.com/manabuyasuda/website-template","last_synced_at":"2025-10-25T20:31:40.198Z","repository":{"id":19051628,"uuid":"86071537","full_name":"manabuyasuda/website-template","owner":"manabuyasuda","description":"静的Webサイト制作を少しモダンにするためのテンプレート","archived":false,"fork":false,"pushed_at":"2022-12-01T22:41:26.000Z","size":16450,"stargazers_count":60,"open_issues_count":36,"forks_count":13,"subscribers_count":6,"default_branch":"v4","last_synced_at":"2024-10-30T02:28:24.537Z","etag":null,"topics":["aigis","babel","ecss","eslint","gulp","prettier","pug","sass","ssi","stylelint","svg-sprite","vue","webpack"],"latest_commit_sha":null,"homepage":"https://manabuyasuda-website-template.netlify.app/styleguide/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manabuyasuda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-24T13:33:56.000Z","updated_at":"2024-10-04T11:00:58.000Z","dependencies_parsed_at":"2023-01-11T20:30:37.303Z","dependency_job_id":null,"html_url":"https://github.com/manabuyasuda/website-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manabuyasuda%2Fwebsite-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manabuyasuda%2Fwebsite-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manabuyasuda%2Fwebsite-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manabuyasuda%2Fwebsite-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manabuyasuda","download_url":"https://codeload.github.com/manabuyasuda/website-template/tar.gz/refs/heads/v4","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238207646,"owners_count":19434095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aigis","babel","ecss","eslint","gulp","prettier","pug","sass","ssi","stylelint","svg-sprite","vue","webpack"],"created_at":"2024-09-24T13:38:18.567Z","updated_at":"2025-10-25T20:31:34.704Z","avatar_url":"https://github.com/manabuyasuda.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Website Template\n静的なWebサイトを作るためのテンプレートです。  \nなるべく多くの人が使えて、少しモダンな制作環境になることを目指しています。\n\n以下のページで詳しく確認できます。\n\n- [Styleguide](https://manabuyasuda-website-template.netlify.com/styleguide/)\n- [document/](document/)\n  - [css.md](document/css.md)\n  - [html.md](document/html.md)\n  - [image.md](document/image.md)\n  - [js.md](document/js.md)\n  - [icon.md](document/icon.md)\n  - [https.md](document/https.md)\n\n\n## 確認環境\n以下の環境で動作の確認をしています。\n\n- macOS High Sierra 10.13.6\n- Node.js 10.16.0\n\nNode.jsのバージョンはnodenvで固定しています。\n\n\n## 始め方\n開発に必要なパッケージなどは以下のコマンドですべてインストールされます。クローン、またはダウンロードをしたあとに実行してください。\n\n```bash\nnpm install\n```\n\n## ファイル構成\n開発は`src`ディレクトリでおこない、テスト用の一時ファイルは`htdocs`ディレクトリに出力されます。  \n`static`ディレクトリは、Gulpの処理は必要ないけれど、ファビコンや共通ファイルのような最終的に`htdocs`ディレクトリに含めたいファイルを置きます。  \n`template`ディレクトリはPugファイルのテンプレートです。このテンプレートを元にファイルを作成してください。\n\n```\nroot/\n├── src/\n│   ├── _data/\n│   │   └── ja/\n│   │       └── site.json\n│   ├── _mixin/\n│   │   ├── _all.pug\n│   │   ├── _breadcrumb.pug\n│   │   └── _picture.pug\n│   ├── _partial/\n│   │   ├── _script.pug\n│   │   └── ja/\n│   │       ├── _footer.pug\n│   │       ├── _header.pug\n│   │       └── _meta.pug\n│   ├── _template/\n│   │   └── ja/\n│   │       └── _default.pug\n│   ├── about/\n│   │   └── index.pug\n│   ├── assets/\n│   │   ├── css/\n│   │   │   ├── base/\n│   │   │   │   ├── variable/\n│   │   │   │   ├── function/\n│   │   │   │   ├── mixin/\n│   │   │   │   ├── _normalize.scss\n│   │   │   │   └── _base.scss\n│   │   │   ├── namespace/\n│   │   │   │   ├── sitewide/\n│   │   │   │   ├── structure/\n│   │   │   │   ├── layout/\n│   │   │   │   ├── home/\n│   │   │   │   └── top/\n│   │   │   ├── _print.scss\n│   │   │   ├── site.scss\n│   │   │   └── styleguide/\n│   │   ├── svg/\n│   │   ├── img/\n│   │   │   ├── sitewide/\n│   │   │   ├── structure/\n│   │   │   └── namespace/\n│   │   └── js/\n│   │       ├── site.js\n│   │       ├── polyfill.js\n│   │       ├── util.js\n│   │       └── namespace/\n│   │           ├── data/\n│   │           └── js/\n│   └── index.pug\n├── static/\n├── template/\n│   ├── index.html\n│   ├── ssi/\n│   ├── ja/\n│   └── en/\n├── htdocs/\n├── document/\n│   ├── css.md\n│   ├── html.md\n│   ├── image.md\n│   ├── js.md\n│   └── icon.md\n├── aigis/\n├── config/\n├── README.md\n├── package.json\n└── gulpfile.js\n```\n\n## 開発用タスク\n以下のコマンドを実行すると、開発に必要なGulpとwebpackのタスクがすべて実行されます。\n\n```bash\nnpm start\n```\n\n本番環境用にビルドする場合は以下のコマンドを実行します。\n\n```bash\nnpm run release\n```\n\n本番環境の動作を検証したい場合は以下のコマンドを実行します。\n\n```bash\nnpm test\n```\n\nHTML・CSS・JSの整形とリントをまとめて実行します。  \n（少なくとも）エラーが出ない状態にしてからプッシュします。\n\n```bash\nnpm run lint\n```\n\n[HTMLHint](https://github.com/htmlhint/HTMLHint)と[gulp-w3cjs](https://github.com/callumacrae/gulp-w3cjs)でHTMLのリントとW3Cのバリデーションを実行します。\n\n```bash\nnpm run htmlValidate\n```\n\n[stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)を元にSassのリントを実行します。\n\n```bash\nnpm run stylelint\n```\n\n[Airbnb JavaScriptスタイルガイド](http://mitsuruog.github.io/javascript-style-guide/)や[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)を元にJavaScriptのリントを実行します。\n\n```bash\nnpm run eslint\n```\n\n以下のような処理がおこなわれます。\n\n- PugをHTMLにコンパイル\n- SassをCSSにコンパイル\n- JSをES5にコンパイル（Vue.jsの単一ファイルコンポーネントも変換する）\n- SVGスプライトの生成\n- ローカルサーバーを立ち上げて動作の確認（static以下のHTMLファイルはSSIにも対応）\n- HTMLのリント\n- Sass（CSS）のリント\n- JavaScriptのリント\n- スタイルガイドの生成\n\n## 対象ブラウザ\nデフォルトでは下記のようなブラウザを対象にしています。\n\n- IE11以降\n- iOS11以降\n- Android5.1以降\n- その他ブラウザは最新版\n\n## browser-syncをhttpsで起動する\nAPIの実行に`https`環境が必要な場合は、以下の設定が必要です。以降の設定はmacOSでの動作を確認しています。\n\n`.env.example`（`.env`のサンプルファイル）から`.env`を作成します。\n\n```\ncp .env.example .env\n```\n\n`.env`の`HTTPS_KEY`と`HTTPS_CERT`に証明書へのパスを設定します。`.env`内の`#`以降がコメントになります。\n\n```\n#browser-syncで`https`オプションを使用する場合にコメントを解除します\n#証明書の発行方法はドキュメント「https」を参照してください\n#HTTPS_KEY=/Users/\u003cユーザー名\u003e/\u003cIPアドレス\u003e-key.pem\n#HTTPS_CERT=/Users/\u003cユーザー名\u003e/\u003cIPアドレス\u003e.pem\n```\n\n証明書の発行方法は以下のドキュメントを参照してください。\n\n[https.md](document/https.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanabuyasuda%2Fwebsite-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanabuyasuda%2Fwebsite-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanabuyasuda%2Fwebsite-template/lists"}