经验总结

  1. 首页 > 生活 > >

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

经验总结扩展阅读


上一篇：2023年农历八月十八宜行船吗 2023年10月2日行船好不好

下一篇：河南的水流向哪里