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上面的數據可以通過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---這里可以引用之前定義的變量, 也可以定義新的值, 例如

推薦閱讀