Jekyll + Github Pages搭建文档

目录

• Jekyll 和 Github Pages是什么？
• Jekyll 基础
  • 1. Jekyll 目录结构
  • 2. 关于布局
  • 3.更进一步
• 本篇文章主要内容
• 1. 使用collection
  • 1.1 为什么要使用collection
  • 1.2如何使用collection
    • 1.2.1 告诉Jekyll读取你的collection
    • 1.2.2 添加内容
• 2. 配置左侧边栏
• 3.优化前后页按钮
• 4. 添加代码块一键复制功能
• 5. 更改Logo和Favion
• 6. 修改字体高亮颜色和大小

如何快速使用博客见Jekyll + Github Pages快速使用 , 本篇文章讲述如何改造Jekyll的TeXt主题。

Jekyll 和 Github Pages是什么？

Jekyll 是一个简单的博客生成工具。

GitHub Pages 是一个静态网站托管服务，直接从github仓库托管你个人、公司或者项目页面 ，并且不需要你写任何后端语言来支持。托管在GitHub Pages上，就可以从网络上访问你的博客。

要发布博客的话，既可以在本地添加添加markdown文件，推送到GitHub仓库，也可以直接在Github上进行编辑。

Jekyll 基础

1. Jekyll 目录结构

__posts 博客内容
_pages 其他需要生成的网页，如About页
_layouts 网页排版模板
_includes 被模板包含的HTML片段，可在_config.yml中修改位置
assets 辅助资源 css布局 js脚本 图片等
_data 动态数据
_sites 最终生成的静态网页
_config.yml 网站的一些配置信息
index.html 网站的入口

2. 关于布局

以首页为例，打开根目录下的index.html（网站首页）可以看到：

—

layout: articles

—

html代码段

上面的articles就是_layouts\articles.html，布局中又可以通过如下方式就像调用函数一样调用_includes下的html片段

{%- include article-list.html articles=_articles type=‘grid’ -%}

注：其他页面的布局设置为_config.yml中的defauls/values/layout

3.更进一步

如果想更详细的了解Jekyll，可以访问：

1. Jekyll官方网站
2. Jekyll使用的模板语言：Liquid
3. 极客学院的Jekyll教程
4. Github+Jekyll 搭建个人网站详细教程