hugo boilerplate

雨果样板

用于构建现代网站的Hugo样板？

这款样板将Hugo与Gulp一起包装，因为您的当地开发构建了管道。

PostCSS和WebPack + Babel用于CSS和JS编译和移动。

BrowserSync用于提供现代的本地开发体验，使您可以在同步的多个设备上预览网站。

BrowserSlist用于配置浏览器支持。

SVG Sprite用于生成SVG Sprite。

安装

先决条件

要使用Gulp，必须安装节点和NPM。

设置

安装先决条件后，将存储库克隆到本地计算机，然后运行：

 npm install

这将安装雨果以及运行雨果环境所需的所有节点依赖。这可能需要一点时间！

发展

所有开发任务均使用NPM运行执行。有关命令的完整列表，请参见package.json中的"scripts" 。

地方发展

本地开发由BrowserSync提供动力，您将能够快速开发网站：

• http://localhost:3000/的本地开发服务器。
• 自动CSS更新而无需重新加载页面
• 更改内容时自动重新加载

运行本地开发服务器与运行一样简单：

 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/

内联SVG

在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参数是可选的

测试

该样板配备标准的ESLINT和Stylelint配置，这些配置将使您的CSS和JS贴上错误或常见样式问题，这些问题可与大多数流行的IDE一起使用。

测试也可以从命令行进行：

• JS： npm run eslint
• CSS： npm run stylelint

如果要自动修复棉绒错误，也可以从命令行执行此操作：

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

清理

该样板是自我清洁的，每次dist/ .tmp/以确保其内容始终是最新的。

如果您想手动清理，请运行：

 npm run clean

配置

所有构建任务均由Gulp处理，位于gulpfile.babel.js中。构建的所有部分均可在离散文件中配置，以使管理变得容易。

路径

所有构建源和目标路径均可从gulp.config.js配置。

雨果

可以从gulp.config.js配置HUGP的构建命令。构建命令是基于NODE_ENV环境变量设置的。您可以选择使用GENERATOR_ARGS环境变量加载不同的ARG。

可以使用四个选项：

• default ：始终运行的默认构建命令
• development ：开发服务器的其他构建命令
• preview ：生产开发服务器的其他构建命令
• production ：生产构建的其他构建命令

BrowserSync开发服务器

在.browsersyncrc.js中找到浏览器的配置

CSS/SASS

在.postcssrc.js中找到PostCSS的配置

JavaScript

在.webpackrc.js中找到WebPack的配置

浏览器支持

PostCSS和WebPack都使用.browserslistrc在编译时决定浏览器支持。

提示和资源

• 要了解如何与雨果一起发展，请参阅Hugo的文档
• 要了解如何使用雨果的模板系统，请参阅文档
• 静态文件应存储在hugo/static/文件夹中，因为它们应该显示在构建站点中，例如，应将CNAME文件存储在hugo/static/CNAME中，以便为/CNAME
• JavaScript文件是从src/js/ to js/{filename}.js编译的
  • JavaScript可以使用ES6，支持require()和来自NPM软件包和本地JS文件的import语句编写
• CSS文件是从src/css/ to css/{filename}.css编译的
  • 导入语句已解决并包含在编译的CSS文件中
• 有关与林业或其他CMS的兼容性，请确保始终提交hugo/文件夹中的CSS和JS文件
• 环境变量提供给您的模板，可以在模板中访问，如下所示： {{ getenv "HUGO_ENV" }}
  • 对于开发管道，这等于development
  • 对于生产管道，这等于production
  • 对于林业的应用程序内预览功能，这等于staging

使用林业

该存储库带有预先配置的基本示例内容，可以与林业一起使用，您可以使用它们来开始构建您的网站。

• 将此存储库分配给您的帐户
• 注册林业帐户，并将该存储库作为“现有站点”导入
• 当提示“项目根”时，输入hugo

贡献

欢迎所有贡献！请参阅我们的行为守则和支持指南。

许可

该样板项目由MIT许可发布。