使用Jekyll搭建自己的博客-全教程

一、jekyll介绍

jekyll是一款Blog生成器,不需要数据库的支持。jekyll用于发行生成静态网页发行。

1.文件结构

_config.yml:用于保存配置。(jekyll会自动加载这些配置)

_includes文件夹:存放可以重复利用的文件,可以被其他的文件包含(方法:{% include 文件名 %})

_layouts文件夹:存放模板文件(标签{{ content }}将content插入页面中)。

_posts文件夹:存放实际的博客文章内容(文件名格式:年-月-日-标题.md)。

_site文件夹:存放最终生成的文件(其他的目录都会被拷贝到最终文件的目录下。所以css,images等目录都可以放在根目录下)。

YAML头信息(可选的):(文章只要包含YAML头,yekyll就会将其转换成html文件)设置一些预定义的变量,或你自己定义的变量。

预定义的变量

也可定义自己的变量:比如title,在文中使用的方法:{{ page.title }}

2.常用命令(命令行输入)

$ jekyll build     :当前文件夹中的内容将会生成到 ./site 文件夹中。

$ jekyll build --destination <destination>   :当前文件夹中的内容会生成到指定文件夹中。

$ jekyll build --source <source>--destination <destination>  :将指定源文件夹中的内容生成到指定文件夹中。

$ jekyll build --watch  :查看更改,再生成。

$ jekyll serve      :启动服务器,使用本地预览,运行在http://localhost:4000/。(jekyll集成了一个服务器)

$ jekyll serve --watch     :先查看变更在启动服务器。

可以在_config.yml文件中添加配置,jekyll会自动获取其中的配置,例如

source:_source

destination:_deploy

等同于命令:jekyll build --source _source --destination _deploy

3.jekyll原理

jekyll使用Liquid语言

Liquid语言使用2种标记(Output和Tag):Output:{{content}},Tag:{% content %}

Liquid过滤器:将左边字符串通过过滤器得到想要的结果并输出。

过滤器示例

Liquid的标准过滤器:

date - 格式化日期

capitalize - 将输入语句的首字母大写

downcase - 将输入字符串转为小写

upcase - 将输入字符串转为大写

first - 得到传递数组的第一个元素

last - 得到传递数组的最后一个元素

join - 将数组中的元素连成一串,中间通过某些字符分隔

sort - 对数组元素进行排序

map - 从一个给定属性中映射/收集一个数组

size - 返回一个数组或字符串的大小

escape - 对一串字符串进行编码

escape_once - 返回一个转义的html版本,而不影响现有的转义文本

strip_html - 去除一串字符串中的所有html标签

strip_newlines - 从字符串中去除所有换行符(\n)

newline_to_br - 将所有的换行符(\n)换成 html 的换行标记

replace - 匹配每一处指定字符串并替换,如 {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'

replace_first - 匹配第一处指定的字符串并替换,如 {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'

remove - 删除每一处匹配字符串,如 {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'

remove_first - 删除第一处匹配的字符串,如 {{ 'barbar' | remove_first:'bar' }} #=> 'bar'

truncate - 将一串字符串截断为x个字符

truncatewords - 将一串字符串截断为x个单词

prepend - 在一串字符串前面加上指定字符串,如 {{ 'bar' | prepend:'foo' }} #=> 'foobar'

append - 在一串字符串后面加上指定字符串,如 {{ 'foo' | append:'bar' }} #=> 'foobar'

minus - 减,如 {{ 4 | minus:2 }} #=> 2

plus - 加,如 {{ '1' | plus:'1' }} #=> '11', {{ 1 | plus:1 }} #=> 2

times - 乘,如 {{ 5 | times:4 }} #=> 20

divided_by - 除,如 {{ 10 | divided_by:2 }} #=> 5

split - 将一串字符串根据匹配模式分割成数组,如 {{ "a~b" | split:~ }} #=> \['a','b'\]

modulo - 余数,如 {{ 3 | modulo:2 }} #=> 1

tag标签:

assign- 创建一个变量

capture- 块标记,把一些文本捕捉到一个变量中(如:把一系列字符串连接为一个字符串,并将其存储到变量中)

case- 块标记,标准的 case 语句

comment- 块标记,将一块文本作为注释

if- 标准的 if/else 块

unless- if 语句的简版

include- 包含其他的模板

raw- 暂时性的禁用的标签的解析(展示一些可能产生冲突的内容)

cycle- 用于循环轮换值,如颜色或 DOM 类

for- 用于循环 For loop(for 。。。 in 。。。  limit:int使你可以限制接受的循环项个数;offset:int可以可以让你从循环集合的第 n 项开始;reversed让你可以翻转循环)

jekyll新增的过滤器:

date_to_string - 日期转化为短格式

date_to_long_string - 日期转化为长格式

number_of_words - 统计字数({{ page.content | number_of_words }})

array_to_sentence_string - 数组转换为句子(列举标签时:{{ page.tags | array_to_sentence_string }})

markdownify - 将makedown格式字符串转换成HTML

jsonify - data to JSON

jekyll新增标签:

highlight 语言 linenos(行号,可选)- 块标签,代码高亮

post_url - 使用某篇博文的超链接(不需要写文件后缀)

gist - github gist显示代码(gist的介绍和使用 )({% gist 5555251 %})

4.书写博客

引用图片或其他资源:新建一个文件夹存放,在博文中的引用方式:{{site.url}}表示站点的根目录


其他的资源引用也是一样的。

5.创建博文目录

一个简单的例子,使用的是Liquid模板语言。

创建目录

6、分页

在_config.yml里边加一行,并填写每页需要几行:

paginate:5

对需要带有分页页面的配置: paginate_path:"blog/page:num"

blog/index.html将会读取这个设置,把他传给每个分页页面,然后从第2页开始输出到blog/page:num,:num是页码。如果有 12 篇文章并且做如下配置paginate: 5, Jekyll会将前 5 篇文章写入blog/index.html,把接下来的 5 篇文章写入blog/page2/index.html,最后 2 篇写入blog/page3/index.html。

分页教程

7、草稿

草稿是你还在创作中不想发表的文章。

创建一个名为_drafts的文件夹

8、部署到github

http://jekyll.bootcss.com/docs/github-pages/

克隆仓库到本地:

git  clone  https://github.com/用户名/用户名.github.com.git

在本地启动服务:

cd  用户名.github.com

jekyll  serve  -B

提交代码到线上:

git  add  --all         #添加到暂存区

git  commit  -m "提交jekyll默认页面"        #提交到本地仓库

git  push  origin  master         #线上的站点是部署在master下面的

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

推荐阅读更多精彩内容