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>