Jekyll Boilerplate 项目教程

Jekyll Boilerplate 项目教程

jekyll-boilerplate A cleaned up version of the initial Jekyll setup for quick use. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-boilerplate

1、项目介绍

Jekyll Boilerplate 是一个轻量级且经过清理的 Jekyll 初始设置版本，旨在快速使用。该项目的主要动机是避免每次构建新的 Jekyll 站点时重复相同的初始化工作。Jekyll Boilerplate 提供了一些预配置的功能和文件结构，使得开发者可以更快地开始构建他们的静态站点。

主要特性

• 文件夹结构优化：创建了 assets/images 和 assets/js 空文件夹。
• Kramdown 配置：添加了 Kramdown 的初始配置。
• CSS 压缩：通过 Sass 自动压缩 CSS。
• 基础样式：添加了一些项目无关的基础样式。
• Normalize.css：引入了 Normalize.css 以确保跨浏览器的一致性。
• Git 忽略文件：将 .DS_Store 和 node_modules 添加到 .gitignore。
• 自动生成：添加了 jekyll-feed 和 jekyll-sitemap 插件，用于自动生成 Atom 订阅和站点地图。

修改和删除

• _sass 文件夹：移动到 assets/sass。
• css 文件夹：移动到 assets/css。
• 默认布局清理：清理了 default.html 布局。
• index.html 清理：清理了 index.html。
• 删除文件：删除了 about.md、page.html、post.html 布局、示例文章和 _posts 文件夹。
• 删除部分：删除了 _includes 文件夹中除 head.html 外的所有初始部分。
• 删除选项：删除了 email、twitter_username、github_username 选项。
• 删除样式：删除了所有现有的样式。

修复

• 语言属性：在默认布局中添加了 lang 属性。
• 主元素：在默认布局中添加了 <main> 元素。

2、项目快速启动

安装 Jekyll

首先，确保你已经安装了 Ruby 和 Bundler。然后，通过以下命令安装 Jekyll：

gem install jekyll bundler

克隆项目

使用 Git 克隆 Jekyll Boilerplate 项目：

git clone https://github.com/KittyGiraudel/jekyll-boilerplate.git
cd jekyll-boilerplate

安装依赖

进入项目目录后，安装所需的依赖：

bundle install

启动本地服务器

启动 Jekyll 本地服务器以预览站点：

bundle exec jekyll serve

现在，你可以在浏览器中访问 http://localhost:4000 查看你的站点。

3、应用案例和最佳实践

应用案例

Jekyll Boilerplate 适用于需要快速启动静态站点的开发者。例如，个人博客、项目文档站点、公司内部文档等。

最佳实践

• 自定义样式：在 assets/sass 文件夹中添加自定义的 Sass 文件，并通过 main.scss 引入。
• 添加页面：在项目根目录下创建新的 Markdown 或 HTML 文件，并使用 Jekyll 的 Front Matter 进行配置。
• 优化 SEO：利用 jekyll-sitemap 和 jekyll-feed 插件自动生成站点地图和 Atom 订阅，提升 SEO 效果。

4、典型生态项目

Jekyll

Jekyll 是一个静态站点生成器，使用 Markdown、Liquid 和 HTML 文件生成静态站点。Jekyll Boilerplate 是基于 Jekyll 的一个优化版本。

Liquid

Liquid 是 Jekyll 使用的模板语言，允许开发者通过模板引擎生成动态内容。

Sass

Sass 是一种 CSS 预处理器，允许开发者使用变量、嵌套规则、混合等功能，生成更高效的 CSS 代码。

Normalize.css

Normalize.css 是一个 CSS 库，用于确保不同浏览器之间的样式一致性。

通过这些生态项目，Jekyll Boilerplate 提供了一个完整的工具链，帮助开发者快速构建和优化静态站点。

jekyll-boilerplate A cleaned up version of the initial Jekyll setup for quick use. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-boilerplate