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 搭建过程, 其访问路径将是 <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>

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    aimaile阅读 23,100评论 6 424
  • 文/张江健 近日,在2015年实现爆发式增长的链家举办了14周年庆,董事长左晖总结了14年以来最为显著的十八项成绩...
    张江健阅读 343评论 0 2
  • 睡眼朦胧的你, 就像猫一样慵懒的躺在地上, 想和你从清晨到黄昏, 深夜到黎明, 想和你一起畅谈人生, 一起细说那蜜...
    X西西G阅读 359评论 0 51
  • 我坐在椅子上,那个长长的带有靠背的椅子,看着江对岸升华着的霓虹闪烁。黑漆漆的江面,只得在远处看见些许舟船的影子...
    猫扑早安阅读 204评论 4 5