什麼是Jekyll
Jekyll是基於Ruby的網頁生成引擎,能夠將liquid樣板以及用markdown寫的內容轉換為HTML的靜態網頁。其特色是不需要資料庫就可以建成一個blog網站。因為GitHub也是用Ruby寫的,因GitHub Pages預設是用Jekyll來當網頁的生成。
Liquid Template 模板引擎
Jekyll也是基於Ruby寫的的網頁模板引擎,所謂模板引擎是可以把一個模板動態生成一個HTML網頁。一個Liquid網頁模板是除了HTML之外,額外增加三種程式碼:
- objects
- tags
filters.
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-metadata └── index.html # can also be an 'index.md' with valid YAML Frontmatter
_config.yml設定檔
comments: true
# highlighter: pygments
highlighter: rouge
markdown: redcarpet
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
# markdown: kramdown
# kramdown:
# input: GFM
# syntax_highlighter: rouge
gems: [jekyll-paginate]
paginate: 20
paginate_path: "/page:num/"
layout: post
excerpt_separator: "[-----]"
permalink: /:year/:month/:day/:title.html
# mode: dev
mode: product
baseurl: "/webcourse" # the subpath of your site, e.g. /blog
url: "https://htchutw.github.io" # the base hostname & protocol for your site
github_username: htchutw
name: Web課程
title: 網頁系統開發課程
description: "網頁系統開發課程 weblog"
my:
displayName: AU-CSIE
realName: HTCHU
realName_cn: 朱學亭
jobTitle: "Web programmer"
contact:
email: [email protected]
github: http://www.github.com/htchutw
skills:
frontend: ["HTML | Markdown", "CSS | SASS", "JS | jQuery", "Bootstrap"]
backend: ["PHP", "MySQL", "Asp.Net", "JSP", "MongoDB", "node.js"]
tools: ["VS Code", "Git | Github", "Linux", "Jekyll", "Hexo"]
collections:
qqGroupGuide:
output: true
defaults:
- scope:
path: ""
type: "posts"
values:
excerpt: "{{ page.content }} | slice: 0 300"
- scope:
path: ""
type: "qqGroupGuide"
values:
layout: markdownreader_bare
include/header.html
<header id="l-header">
<div class="container">
<div class="row logo">
<div class="col-lg-7">
<h1>亞大資工</h1>
</div>
<div class="col-lg-5">
<p>網頁系統開發課程作業</p>
<p>朱學亭(920100625)</p>
</div>
</div>
<div class="row navicon">
<a href=""><i class="fa fa-navicon"></i></a>
</div>
<div class="row navbar">
<nav class="col-lg-8 col-md-8 col-xs-12">
<ul class="row">
<li class="col-lg-3"><a href="{{ site.baseurl }}/">HOME</a></li>
<li class="col-lg-3">
<ul class="subnav">
<a href="javascript:void(0)">POST</a>
<li><a href="{{ site.baseurl }}/category">CATEGORY</a></li>
<li><a href="{{ site.baseurl }}/tag">TAG</a></li>
</ul>
</li>
<li class="col-lg-3"><a href="{{ site.baseurl }}/about">ABOUT</a></li>
</ul>
</nav>
</div>
</div>
</header>
練習二
將webcourse檔案庫建成Github Pages https://uuu.github.io/webcourse
git clone https://github.com/htchutw/webcourse.git
cd webcourse
git config --global user.email "[email protected]"
git config --global user.name "uuu"
git init
git remote add origin https://github.com/uuu/webcourse.git
git add .
git commit -m "first"
git push -u origin master