Jekyll Learning Notes

What is a Jekyll Website?

Jekyll是一个static site generator，通过Jekyll可以用Markdown来写网站/个人博客。

Jekyll是用 Ruby 编写的，是Ruby生态中的一个包。

• Gem：Ruby生态中的包，也就是说Jekyll is a Gem。相当于node.js、python中的package
• Gemfile：Ruby生态中的依赖(dependency)，列出用到的所有Gem。相当于node.js中的package.json，python中的requirements.txt
• Bundler：是一个用Ruby写的包管理器。相当于node.js中的npm，python中的pip

一个基本的Jekyll site包含三种文件：

.
├── _config.yml
├── _layouts
│   └── default.html
└── index.md

在文件夹下新建这些文件，并把default.html放在_layouts文件夹下

分别在文件中添加以下最基本的内容：

1. _config.yml （Jekyll生成网站时使用的配置）

    name: My Jekyll Website
   

2. _layouts/default.html

3. index.md

    ---
    title: My page
    layout: default
    ---
    # Jekyll Learning Notes
   
    Content is written in [Markdown](https://learnxinyminutes.com/docs/markdown/).
    Plain text format allows you to focus on your **content**.
   
   

使用jekyll serve运行网站

通过http://127.0.0.1:4000/访问网站。该站点的文件默认内置于 _site 文件夹中

Jekyll生成网页的过程：

1. Jekyll读取__config.yml内的配置

2. Jekyll 查找带有 front matter 标签的文件（两组虚线——就像 index.md http://index.md/` 中的那样）并把Markdown转化为html

    ---
    title: My page
    layout: default
    ---
   

3. Jekyll 把转化的html页面插入到content变量中 （在default.html内）
4. 把处理完的文件写入到_site目录下

Create a template for your default layout

1. 把原来的html文件拷贝到default.html内，css样式也拷贝过来。此时，渲染出来的结果应该是一样的。

2. 清空layout的内容并将其替换为placeholder tags，这些标签会动态填充Jekyll 页面。

   嵌套的layout在Jekyll中的转化流程如下（how layouts work in Jekyll）：

Reference

1. https://jekyllrb.com/tutorials/convert-site-to-jekyll/
2. http://simpleprimate.com/blog/markdown-basics