GitHub Pages 和 Jekyll 笔记 _生活百科

GitHub Pages 和 Jekyll 笔记
快速创建(使用默认的Jekyll引擎)1. 新建仓库新建一个空仓库, 名称为username.github.io, 其中 username 就是你的GitHub账号名称
2. 增加文件Clone到本地, 在里面建两个文件 _config.yml 和 index.md
_config.yml 是 Jekyll 的配置文件
theme: jekyll-theme-minimaltitle: My Homepagedescription: For daily notesindex.md 是站点的首页
# Test PageIt's a test page## Header 2content3. 提交将内容提交到仓库
git add -Agit commit -m "update"git push4. 等待发布此时在仓库首页, 能看到一个棕色的小点, 表示有action正在执行, 点击能看到acion的详情, 等action执行完毕, 就能通过 https://username.github.io 访问网站了.
GitHub Pages 上的Jekyll大部分的 Jekyll 选项都可以通过 _config.yml 配置使用, 配置项参考, 但是有一些在 GitHub Pages 中是固定的, 不可更改
lsi: falsesafe: truesource: [your repo's top level directory]incremental: falsehighlighter: rougegist:noscript: falsekramdown:math_engine: mathjaxsyntax_highlighter: rouge默认设置下, Jekyll 不处理以下文件和目录

目录 /node_modules
目录 /vendor
以_, ., 或#开头的文件或目录
以~结尾的文件或目录
在配置文件的 exclude 中设置的文件或目录

如果需要 Jekyll 处理以上情况的文件或目录, 需要在配置文件的 include 中单独设置.
Jekyll使用整体目录结构一个 Jekyll 网站整体的目录结构如下

├── _config.yml├── _data│└── members.yml├── _drafts│├── begin-with-the-crazy-ideas.md│└── on-simplicity-in-technology.md├── _includes│├── footer.html│└── header.html├── _layouts│├── default.html│└── post.html├── _posts│├── 2007-10-29-why-every-programmer-should-play-nethack.md│└── 2009-04-26-barcamp-boston-4-roundup.md├── _sass│├── _base.scss│└── _layout.scss├── _site├── .jekyll-cache│└── Jekyll│└── Cache│└── [...]├── .jekyll-metadata└── index.html # can also be an 'index.md' with valid front matter

设置模板通过指定模板, 可以使 Jekyll 生成不同式样的页面, GitHub Pages 支持的模板, 可以在这里查看 https://pages.github.com/themes/, 当前支持的模板有

Architect
Cayman
Dinky
Hacker
Leap day
Merlot
Midnight
Minima
Minimal
Modernist
Slate
Tactile
Time machine

设置全局变量完整的配置项参考 https://jekyllrb.com/docs/configuration/
组合/列表变量通过collections变量定义 https://jekyllrb.com/docs/collections/
数据文件放置到 _data 目录, 支持 YAML, JSON, CSV 和 TSV 文件(扩展名为 .yml, .yaml, .json, .tsv, 和 .csv).
例如 _data/members.yml
- name: Eric Millgithub: konklone- name: Parker Mooregithub: parkr- name: Liu Fengyungithub: liufengyun或者_data/members.csv
name,githubEric Mill,konkloneParker Moore,parkrLiu Fengyun,liufengyun通过site.data.members引用数据中的值, 例如

<ul>{% for member in site.data.members %}<li><a href="https://github.com/{{ member.github }}">{{ member.name }}</a></li>{% endfor %}</ul>

_data 目录支持子目录, 对应的在引用变量中要增加子目录名作为变量路径, 例如文件 _data/orgs/jekyll.yml
username: jekyllname: Jekyllmembers:- name: Tom Preston-Wernergithub: mojombo- name: Parker Mooregithub: parkr_data/orgs/doeorg.yml
username: doeorgname: Doe Orgmembers:- name: John Doegithub: jdoe上面的数据可以通过site.data.orgs进行引用, 例如

<ul>{% for org_hash in site.data.orgs %}{% assign org = org_hash[1] %}<li><a href="https://github.com/{{ org.username }}">{{ org.name }}</a>({{ org.members | size }} members)</li>{% endfor %}</ul>

静态文件在 _config.yml 中定义一个路径下的全部文件, 属性增加image = true
defaults:- scope:path: "assets/img"values:image: true然后可以在变量中进行过滤

{% assign image_files = site.static_files | where: "image", true %}{% for myimage in image_files %}{{ myimage.path }}{% endfor %}

设置页面变量在任何 Jekyll 处理的页面文件的最开始(如果是UTF-8, 需要确认没有BOM), 以三横线开始和结束的一段YAML代码用于设置当前页面的页面变量, 例如
---layout: posttitle: Blogging Like a Hacker---这里可以引用之前定义的变量, 也可以定义新的值, 例如