hugo boilerplate
1.0.0
現代のウェブサイトを構築するためのヒューゴボイラープレート？
このボイラープレートは、地元の開発をビルドするパイプラインとして、ヒューゴをGulpで包みます。
PostCSSおよびWebpack + Babelは、CSSおよびJSコンパイルと輸送に使用されます。
BrowserSyncは、最新のローカル開発エクスペリエンスを提供するために使用され、複数のデバイスでサイトを同期させることができます。
BrowserSlistは、ブラウザサポートの構成に使用されます。
SVGスプライトは、SVGスプライトを生成するために使用されます。
Gulpを使用するには、ノードとNPMをインストールする必要があります。
前提条件がインストールされたら、リポジトリをローカルマシンにクローンしてから実行します。
npm install
これにより、HugoとHugo環境を実行するために必要なすべてのノード依存関係がインストールされます。これには少し時間がかかるかもしれません！
すべての開発タスクは、NPM実行を使用して実行されます。コマンドの完全なリストについては、package.jsonの"scripts"を参照してください。
ローカル開発はbrowsersyncを搭載しています。
http://localhost:3000/のローカル開発サーバー。ローカル開発サーバーを実行することは、実行するのと同じくらい簡単です。
npm start
これにより、生産ビルドには含まれていないすべてのドラフト、将来のデート、または期限切れのコンテンツが表示されます。
生産に表示されるサイトを使用して開発したい場合は、実行してください。
npm run preview
ローカルマシンで最終的な生産ビルドを生成するには、実行できます。
npm run build
サイトの新鮮な生産ビルドは、 dist/ディレクトリになります。
HugoのCLIコマンドはすべて、実行してNPMを実行できます。
npm run hugo -- <command> --<param>
例えば：
npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md
.
├── .tmp/ // Temporary directory for development server
├── dist/ // The production build
├── hugo/ // The Hugo project; content, data and static files
| ├── .forestry/ // Contains Forestry.io configuration files
| ├── content/ // Where all site content is stored
| ├── data/ // TOML, YAML or JSON files containing site data
| ├── layouts/ // Your site's layouts
| | ├── partials/ // Your site's partials
| | └── shortcodes/ // Your site's shortcodes
| ├── static/ // Where all static files live
| | ├── css/ // Where compiled CSS files live
| | ├── js/ // Where compiled JS files live
| | └── uploads/ // Where user uploads are stored
| └── config.toml // The Hugo configuration file
└─── src/
├── css // CSS/SCSS source files to be compiled to /css/
└── js // JS source files to be compiled to /js/
src/img/で見つかったSVGは、 hugo/static/svg/sprite.symbol.svgの単一のSVGスプライトに結合されます。
このボイラープレートには、レイアウトでSVGを使用するためのシンプルな部分が付属しています。 IDを渡すことにより、SVGを選択できます。
{{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}
注： class 、 width 、 heightパラメーションはオプションです
このボイラープレートには、最も人気のあるIDEで動作するエラーや一般的なスタイルの問題について、CSSとJSを並べる標準のESLINTおよびSTYLELINT構成が付属しています。
テストは、コマンドラインからも実行できます。
npm run eslintnpm run stylelintLintエラーを自動的に修正する場合は、コマンドラインからもこれを行うことができます。
npm run eslint:fixnpm run stylelint:fixこのボイラープレートはセルフクリーニングであり、コマンドが実行されるたびに、そのコンテンツが常に最新であることを確認するたびに、生産dist/および開発.tmp/フォルダーを削除します。
手動でクリーンアップしたい場合は、実行してください。
npm run clean
すべてのビルドタスクはGulpによって処理され、 gulpfile.babel.jsにあります。ビルドのすべての部分は、管理を容易にするために、個別のファイルで構成できます。
すべてのビルドソースおよび宛先パスは、 gulp.config.jsから構成できます。
HUGPのビルドコマンドは、 gulp.config.jsから構成できます。ビルドコマンドは、 NODE_ENV環境変数に基づいて設定されます。 GENERATOR_ARGS環境変数を使用して、オプションで異なるargをロードできます。
4つのオプションが利用可能です。
default ：常に実行されるデフォルトのビルドコマンドdevelopment ：開発サーバーの追加のビルドコマンドpreview ：生産開発サーバーの追加のビルドコマンドproduction ：生産ビルドの追加のビルドコマンドbrowsersyncの構成は.browsersyncrc.jsにあります
PostCSSの構成は.postcssrc.jsにあります
Webpackの構成は.webpackrc.jsにあります
postcssとwebpackの両方が.browserslistrc使用して、コンパイル時にブラウザーサポートを決定します。
hugo/static/フォルダーに保存する必要があります。たとえば、cnameファイルはhugo/static/CNAMEに保存する必要があります/CNAMEsrc/js/のルートからjs/{filename}.jsにコンパイルされます。require() 、およびimportステートメントを使用して記述できますsrc/css/ to css/{filename}.cssのルートからコンパイルされますhugo/フォルダー内のCSSおよびJSファイルが常にコミットされていることを確認してください{{ getenv "HUGO_ENV" }}developmentに等しいproductionに等しいstagingに等しいこのリポジトリには、林業を使用するために事前に構成された基本的な例コンテンツが付属しています。これは、サイトの構築を開始するために使用できます。
hugoを入力してくださいすべての貢献は大歓迎です！私たちの行動規範とサポートガイドラインをご覧ください。
このボイラープレートプロジェクトは、MITライセンスの下でリリースされます。
