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 搭建过程， 其访问路径将是 <i>http://username.github.com/</i>
第一步：
你需要有一个 GitHub 账号 ... ...
链接戳我 =￣ω￣= <a href='https://github.com/'>https://github.com/</a>
第二步：
建立一个新的仓库，名字为 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 : <a href='http://jekyll.bootcss.com/docs/home/'>http://jekyll.bootcss.com/docs/home/</a>
markdown : <a href='http://www.appinn.com/markdown/'>http://www.appinn.com/markdown/</a>
html : <a href='http://www.w3school.com.cn/html/'>http://www.w3school.com.cn/html/</a>
网友评论