建立基礎

• 在你的電腦上，用 jekyll 建立一個架構。

在本機端建立 Jelyll 檔案結構，因為 Github 的 github page 是認＂XXX.github.io＂為可顯示的網頁，基本上將我們的 root 取名叫＂{你的Github名稱}.github.io＂，或是＂{你的Github名稱}.github.io/{你的專案名稱}＂，這樣才能使 github page 能夠生效。

    $ jekyll new {你的Github名稱}.github.io
    $ cd {你的Github名稱}.github.io

• 可以看到檔案結構為：

    {你的Github名稱}.github.io
    ├── _includes
    |	  ├── footer.html
    |	  ├── header.html
    |	  └── ...
    ├── _layouts
    |	  ├── default.html
    |	  ├── page.html
    |	  └── post.html
    ├── _posts
    |	  └── 2018-10-24-welcome-to-jekyll
    ├── _config.yml
    ├── about.md
    ├── feed.xml
    └── index.html
  

---

內容說明：

針對上面檔案架構來說明。

_layout 和 _include

• 外觀 模板，組成部落格的 HTML 檔案。
• Blog 的模版可以參考這裡－jekyll theme 1，可download其他作者的模版 HTML、css、js 等，找到喜愛的 Template Github 網站 Fork 一份到自己的帳號並且修改。 ​

_posts

• 用來 存放文章。
• Markdown 來撰寫。
• 檔名符合格式：年-月-日-標題.md

  2018-12-31-happy-new-years.md
  

index.html

• 初始呈現出來的網頁。

about.md

• 自我介紹頁面。
• Markdown 來撰寫。

_config.yml

• 包含 部落格內的所有設定。
• 網址路徑、網站描述、markdown 寫法等。

    highlighter: rouge
    markdown: kramdown
    title: Cleo
  
    defaults:
        -
        values:
            title: Cleo Engineer Notes
    author:
        name: Cleo
        email: second934@gmail.com
        github: cleoliu
        bio: Writing and Learning!
        profile_photo: IMG_6726.jpg
      
    categories_path: categories.html
    tags_path: tags.html
    aboutme_path: aboutme.html
  

---

Liquid模板語言

• 可在 html 檔案中使用。

  ​

• 參考 _config.yml 中的內容來使用。
• 舉例：

    page.title 表示文章標題。
    content 表示文章內容。
  

• 可參考：Jekyll cheatsheet 1

---

創建文章

• 進入 _posts 目錄，新增文件，檔名格式：

    年-月-日-標題.md  
    2018-12-31-happy-new-years.md
  

• 內文：

  • 必須有一個 yaml front，用來設置一些數據。用三根短劃線＂—＂，標記開始和結束。

    

  • layout:default：表示該文章的模板使用 _layouts 目錄下的 default.html 文件。
  • title：表示該文章的標題。
  • 之後的內文可用 markdown 語法來撰寫。

• 其他 front 參數：

  

---

ref：

• https://rhadow.github.io/2015/02/18/Jekyll-x-Github-x-Blog-Part1/
• http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
• https://medium.com/@spences10/starting-again-with-jekyll-a85941bcbfa9
• http://www.ashkincode.com/blog/github-jekyll/