Jekyll 静态网站搭建

GitHub Pages

正如 GitHub Pages 首页所介绍的

Websites for you and your projects

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHub Pages 正是用于为你以及你的项目构建静态网站

并且完全托管于GitHub上，你只需修改编辑并直接push就能在线看到其改变

而 GitHub Pages 提供了对 jekyll 的全面支持，用以自动生成展示所需的静态页面

Jekyll

jekyll 是一个生成静态网页的工具，无需数据库的支持，它会根据网页源码生成静态文件

jekyll 提供了模板、变量、插件等功能，所以，虽然没有后端数据库，但实际上可以用来编写一个较为完整的网站

因而，我们要做的就是，在本地编写符合 jekyll 规范的源码，然后上传至GitHub，由GitHub生成并托管整个网站

这么做的好处有：

• 免费
• 网站由 GitHub 托管，节省管理服务器的精力
• 网页的生成也由 GitHub 负责，你只需要提供内容

而它的缺点是：

• 生成的是静态网页，动态功能依赖外部服务
• 没有数据库，因而不适合大型网站

但是，用来构建个人 blog 绰绰有余了不是嘛 ╮(╯▽╰)╭

一个栗子

这个栗子只记录 user 级别的 blog 搭建过程， 其访问路径将是 http://username.github.com/

第一步：

你需要有一个 GitHub 账号 ... ...

链接戳我 =￣ω￣= https://github.com/

第二步：

建立一个新的仓库，名字为 username.github.io ，其中 username 是你自己的用户名应该不用再说了吧 o(︶︿︶)o

第三步：

使用你的 GitHub Client 将新的仓库 clone 到本地

~ $ git clone https://github.com/username/username.github.io

第四步：

在这个空的仓库中，建立 jekyll 的目录结构， 该结构如下：    
.
|--- _config.yml
|--- _drafts
|   |--- begin-with-the-carzy-ideas.textile
|   |___ on-simplicity-in-technology.markdown
|--- _includes
|   |--- footer.html
|   |___ header.html
|--- _layouts
|   |--- default.html
|   |___ post.html
|--- _posts
|   |--- 2016-06-10-why-every-programmer-should-play-nethack.textile
|   |___ 2016-06-20-barcamp-boston-4-roundup.textile
|--- _data
|   |___ members.yml
|--- _site
|___ index.html

来看看这些都有什么用：

文件/目录	描述
_config.yml	保存配置数据
_drafts	保存了未发布的文章，这些文件的格式中都没有 title.MARKUP 数据
_includes	外部资源，可以使用标签 {% include file.ext %}来把文件 _include/file.ext 包含进来
_layouts	layouts 是包裹在文章外部的模板，其布局可以在YAML头信息中根据不同文章进行选择
_posts	存放了文章内容。文件名格式必须符合：YEAR-MONTH-DAY-title.MARKUP
_data	存放了格式化后的站点数据。 jekyll 将会加载目录下的所有yaml文件
_site	存放了 jekyll 转换后的静态页面文件
index.html	文件中只要存在 yaml 头信息，就会被 jekyll 转换

当然，只是简单演示的话，有 index.html 就足够了。

第五步：

使用你的 GitHub Client 提交本次更改

浏览器中键入

    http://username.github.io

即可看到更改的结果

小结

更进一步的了解 jekyll 其他功能，需要你具备一定的 html/markdown 知识， 以及对 jekyll 配置和本地调试有相关的了解

下面是传送门

jekyll : http://jekyll.bootcss.com/docs/home/

markdown : http://www.appinn.com/markdown/

html : http://www.w3school.com.cn/html/