什麼是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