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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

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