Jekyll-Webpack-Boilerplate 使用教程

最新推荐文章于 2024-08-31 09:21:10 发布

常韵忆Imagine

最新推荐文章于 2024-08-31 09:21:10 发布

阅读量819

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00588/article/details/141582986

版权

Jekyll-Webpack-Boilerplate 使用教程

Jekyll-webpack-boilerplate⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites项目地址:https://gitcode.com/gh_mirrors/je/Jekyll-webpack-boilerplate

1. 项目的目录结构及介绍

Jekyll-webpack-boilerplate/
├── _i18n/
├── _images/
├── _includes/
├── _layouts/
├── _scss/
├── _src/
├── admin/
├── config/
├── editorconfig
├── eslintignore
├── eslintrc.js
├── gitignore
├── nvmrc
├── ruby-version
├── 404.html
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── _config.yml
├── _config_production.yml
├── about.md
├── blog.md
├── icon.png
├── index.md
├── netlify.toml
└── package-lock.json

目录结构介绍

_i18n/: 多语言文件夹。
_images/: 图片文件夹。
_includes/: 包含可重用的HTML代码片段。
_layouts/: 页面布局模板。
_scss/: SCSS样式文件。
_src/: 源代码文件夹，包含JavaScript等。
admin/: 管理相关文件。
config/: 配置文件夹。
editorconfig: 编辑器配置文件。
eslintignore: ESLint忽略配置。
eslintrc.js: ESLint配置文件。
gitignore: Git忽略配置。
nvmrc: Node版本管理配置。
ruby-version: Ruby版本配置。
404.html: 404页面。
Gemfile: Ruby依赖配置。
Gemfile.lock: Ruby依赖锁定文件。
LICENSE: 项目许可证。
README.md: 项目说明文档。
_config.yml: Jekyll主配置文件。
_config_production.yml: 生产环境配置文件。
about.md: 关于页面。
blog.md: 博客页面。
icon.png: 项目图标。
index.md: 首页。
netlify.toml: Netlify配置文件。
package-lock.json: npm锁定文件。

2. 项目的启动文件介绍

启动文件

Gemfile: 定义了Ruby的依赖包。
package-lock.json: 锁定npm包的版本。
_config.yml: Jekyll的主配置文件，包含了项目的基本配置信息。

启动步骤

安装Ruby依赖：
```
bundle install
```
安装Node.js依赖：
```
npm install
```
启动开发服务器：
```
npm start
```

3. 项目的配置文件介绍

配置文件

_config.yml: Jekyll的主配置文件，包含了网站的基本信息、插件配置等。
_config_production.yml: 生产环境的配置文件，通常包含一些生产环境的特殊配置。
netlify.toml: Netlify的配置文件，用于部署和构建配置。
eslintrc.js: ESLint的配置文件，用于JavaScript代码的规范检查。
editorconfig: 编辑器的配置文件，用于统一代码风格。

配置文件示例

`_config.yml`

title: 我的网站
description: 这是一个使用Jekyll和Webpack的现代静态网站。
baseurl: ""
url: "http://localhost:4000"
plugins:
  - jekyll-seo-tag
  - jekyll-sitemap

`_config_production.yml`

url: "https://yourdomain.com"

`netlify.toml`

[build]
  base = "/"
  publish = "_site"
  command = "npm run build"

`eslintrc.js`

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },

Jekyll-webpack-boilerplate⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites项目地址:https://gitcode.com/gh_mirrors/je/Jekyll-webpack-boilerplate