hugo boilerplate

雨果樣板

用於構建現代網站的Hugo樣板？

這款樣板將Hugo與Gulp一起包裝，因為您的當地開發構建了管道。

PostCSS和WebPack + Babel用於CSS和JS編譯和移動。

BrowserSync用於提供現代的本地開發體驗，使您可以在同步的多個設備上預覽網站。

BrowserSlist用於配置瀏覽器支持。

SVG Sprite用於生成SVG Sprite。

安裝

先決條件

要使用Gulp，必須安裝節點和NPM。

設定

安裝先決條件後，將存儲庫克隆到本地計算機，然後運行：

 npm install

這將安裝雨果以及運行雨果環境所需的所有節點依賴。這可能需要一點時間！

發展

所有開發任務均使用NPM運行執行。 See "scripts" in package.json for a full list of commands.

地方發展

本地開發由BrowserSync提供動力，您將能夠快速開發網站：

• A local development server at http://localhost:3000/ .
• 自動CSS更新而無需重新加載頁面
• 更改內容時自動重新加載

運行本地開發服務器與運行一樣簡單：

 npm start

這將顯示所有草稿，未來的日期或過期的內容，這些內容未包含在您的生產構建中。

如果您想通過該網站來開發它將出現在生產中，請運行：

 npm run preview

生產建造

為了在本地機器上生成最終的生產構建，您可以運行：

 npm run build

The fresh production build of your site will end up in the dist/ directory.

雨果命令

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/

內聯SVG

Any SVGs found in src/img/ will be combined into a single SVG Sprite at hugo/static/svg/sprite.symbol.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) -}}

Note: the class , width , and height params are optional

測試

該樣板配備標準的ESLINT和Stylelint配置，這些配置將使您的CSS和JS貼上錯誤或常見樣式問題，這些問題可與大多數流行的IDE一起使用。

測試也可以從命令行進行：

• JS: npm run eslint
• CSS: npm run stylelint

如果要自動修復棉絨錯誤，也可以從命令行執行此操作：

• JS: npm run eslint:fix
• CSS: npm run stylelint:fix

清理

This boilerplate is self-cleaning, and will remove the production dist/ and development .tmp/ folders every time a command is run to ensure that their contents are always up to date.

如果您想手動清理，請運行：

 npm run clean

配置

All build tasks are handled by Gulp and are located in gulpfile.babel.js .構建的所有部分均可在離散文件中配置，以使管理變得容易。

路徑

All build source and destination paths can be configured from gulp.config.js .

雨果

The build commands for Hugp can be configured from gulp.config.js . Build commands are set based on the NODE_ENV environment variable. You can optionally load different args using the GENERATOR_ARGS environment variable.

可以使用四個選項：

• default : the default build commands that are always run
• development : additional build commands for the development server
• preview : additional build commands for a production development server
• production : additional build commands for production builds

BrowserSync開發服務器

The configuration for BrowserSync is found in .browsersyncrc.js

CSS/SASS

The configuration for PostCSS is found in .postcssrc.js

JavaScript

The configuration for Webpack is found in .webpackrc.js

瀏覽器支持

Both PostCSS and Webpack use .browserslistrc to decide on browser support when compiling.

提示和資源

• 要了解如何與雨果一起發展，請參閱Hugo的文檔
• 要了解如何使用雨果的模板系統，請參閱文檔
• Static files should be stored in the hugo/static/ folder as they should appear in the built site Eg, a CNAME file should be stored at hugo/static/CNAME to become /CNAME
• Javascript files are compiled from the root of src/js/ to js/{filename}.js
  • Javascript can be written using ES6, supporting require() and import statements from npm packages and local JS files
• CSS files are compiled from the root of src/css/ to css/{filename}.css
  • 導入語句已解決並包含在編譯的CSS文件中
• For compatibility with Forestry or other CMSs, ensure that compiled CSS and JS files in the hugo/ folder are always committed
• Environment variables are provided to your templates, which can be accessed in templates as follows: {{ getenv "HUGO_ENV" }}
  • For development pipelines, this is equal to development
  • For production pipelines, this is equal to production
  • For Forestry's in-app preview feature, this is equal to staging

使用林業

該存儲庫帶有預先配置的基本示例內容，可以與林業一起使用，您可以使用它們來開始構建您的網站。

• 將此存儲庫分配給您的帳戶
• 註冊林業帳戶，並將該存儲庫作為“現有站點”導入
• When prompted for the "Project root", enter hugo

貢獻

歡迎所有貢獻！請參閱我們的行為守則和支持指南。

許可

該樣板項目由MIT許可發布。