利用Jekyll搭建自己的GitHub博客

爬坑小项目 Jekyll 搭建博客

创建时间:2018-11-04 11:19

阅读:

Jekyll官方文档
GitHub Pages tutorial

写在前面

　　GitHub提供一种功能叫做GitHub Pages,可以利用它来搭建自己博客或者网站(只支持静态站点的搭建)。不仅如此，GitHub还
支持Jekyll解析。所以只要按照Jekyll的规则来建立文件，然后把它push到GitHub上就能搭建出自己的博客。
当然，最方便的方式就是到Jekyll Themesclone别人做好的主题。但如果有一定的前端知识，也可以自己一行一行代码敲出自己独一无二的博客来。下面
主要说的是用Jekyll搭建博客的总体思路。

开始搭建　　

一、到GitHub官网注册一个账号

二、点击绿色的`new repository`按钮新建一个代码仓库，这里假定新建了一个叫做`blogDemo`的仓库。

三、把仓库克隆到本地进行编辑

四、创建配置文件

　　在项目的根目录下创建一个名为_config.yml的文件，打开输入以下内容：

1	baseurl:/blogDemo

五、创建模板文件。

　　1. 在项目根目录下创建一个_layouts的目录，用来存放模板文件。
　　2. 进入该目录，创建一个posts.html文件，用来作为博客文章的模板文件。并在该文件中输入以下内容。

`<!DOCTYPE html>`  
`<html>`  
`<head>`  
　　`<meta http-equiv="content-type" content="text/html;` `charset=utf-8" />`  
　　`<title>`{\{page.title}}`</title>`   
`</head>`   
`<body>`   
　　{\{content}}   
`</body>`   
`</html>`

Jekyll使用Liquid模板语言，表示文章标题，

写在前面

开始搭建　　

一、到GitHub官网注册一个账号

二、点击绿色的`new repository`按钮新建一个代码仓库，这里假定新建了一个叫做`blogDemo`的仓库。

三、把仓库克隆到本地进行编辑

四、创建配置文件

　　在项目的根目录下创建一个名为_config.yml的文件，打开输入以下内容：

1	baseurl:/blogDemo

五、创建模板文件。

`<!DOCTYPE html>`  
`<html>`  
`<head>`  
　　`<meta http-equiv="content-type" content="text/html;` `charset=utf-8" />`  
　　`<title>`{\{page.title}}`</title>`   
`</head>`   
`<body>`   
　　{\{content}}   
`</body>`   
`</html>`

Jekyll使用Liquid模板语言，{{page.title}}表示文章标题，{{content}}表示文章内容。这只是一个比较简单的文章展示页举例，具体要做成什么样式还要自己进一步敲代码完成。

六、创建文章

　　1. 回到项目根目录，创建一个_posts目录用于存放博客文章。
　　2. 进入该目录，创建一篇文章。文章可以是用HTML文件，也可以是markdown文件。但文件名有严格要求必须是年-月-日-标题.后缀名。比如这里新建一个2017-12-18-Hello-World.md的文件。
　　3. 在该文件中填入以下内容。

---
layouts: posts
title: Hello-World  
---
<h2>{{ page.title }}</h2>   
<p>我的第一篇文章</p> 
<p>{{ post.date | date:'%Y-%m-%d' }}</p>

　　yaml文件头：每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线”—“，标记开始和结束，里面每一行设置一种元数据。三根短划线前面，是不能有空格的！需要注意的是，yaml文件头中变量与变量值之间要用空格隔开,如title: Hello-World
冒号后面有空格。

　　“layout: posts”，表示该文章的模板使用_layouts目录下的posts.html文件；
　　“title: 你好，世界”，表示该文章的标题是”你好，世界”，如果不设置这个值，默认使用嵌入文件名的标题，即”Hello World”.
　　在yaml文件头后面，就是文章的正式内容，里面可以使用模板变量。{{ page.title }}就是文件头中设置的”你好，世界”，{{ page.date }}则是嵌入文件名的日期（也可以在文件头重新定义date变量），”| date:’%Y-%m-%d’ “表示将page.date变量输出格式为：年-月-日。

七、创建博客首页

　　回到根目录，创建一个index.html的文件，输入以下内容。

---
layout: posts
title: 我的Blog  
`---`  
`<h2>`{\{ page.title }}`</h2>`  
`<p>最新文章</p>`  
`<ul>`  
　　`{`% for post in site.posts %}  
　　　　`<li>`{\{ post.date | date_to_string }}   
	`<a href="`{\{ site.baseurl }}{\{ post.url }}`">`{\{ post.title }}`</a></li>`  
　　`{`% endfor %}     
`</ul>`

　　它的Yaml文件头表示，首页使用posts模板，标题为”我的Blog”。然后，首页使用了{% for post in site.posts %}，表示对所有帖子进行一个遍历。这里要注意的是，Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。首页模板也可以自己在_layouts中自己定义喜欢的布局，然后再引入进来，这里只是一个简单的举例。
　　至此，一个简单的博客就搭建完成了。整个项目的目录结构如下：

/blogDemo
　　|--_config.yml  
　　|--_layouts  
　　|　　|--posts.html
　　|--_posts  
　　|　　|--2017-12-19-HelloWord.html
　　|--index.html

八、把代码上传到GitHub仓库

　　1. 上传完文件后，到GitHub官网进入该项目找到settings这个选项。
　　2. 往下拉找到GitHub Pages，把source选为master branch
　　3. 稍等一会就通过https://username.github.io/blogDemo,比如我这里是[https://fishrong.github.io/blogDem](https://fishrong.github.io/blogDemo)。当然如果你把博客直接写在了username.github.io这个仓库下就可以直接访问https://username.github.io/。
　　4.

九、域名解析到博客

　　1. 在项目根目录下新建一个名为CNAME的文件，文件内容为你的域名如：

1	www.example.com

进入域名管理，在域名解析里添加如下两条记录

　　　 主机记录：@；记录类型：CNAME;记录值：username.github.io/blogDemo(也就是博客首页地址)。 　　　主机记录：www；记录类型：CNAME;记录值：username.github.io/blogDemo(也就是博客首页地址)。
　　3. 需要等待一会才能通过域名访问。

参考链接：

Jekyll官方文档

GitHub Pages tutorial

表示文章内容。这只是一个比较简单的文章展示页举例，具体要做成什么样式还要自己进一步敲代码完成。

六、创建文章

---
layouts: posts
title: Hello-World  
---
<h2>{{ page.title }}</h2>   
<p>我的第一篇文章</p> 
<p>{{ post.date | date:'%Y-%m-%d' }}</p>

　　“layout: posts”，表示该文章的模板使用_layouts目录下的posts.html文件；
　　“title: 你好，世界”，表示该文章的标题是”你好，世界”，如果不设置这个值，默认使用嵌入文件名的标题，即”Hello World”.
　　在yaml文件头后面，就是文章的正式内容，里面可以使用模板变量。就是文件头中设置的”你好，世界”，则是嵌入文件名的日期（也可以在文件头重新定义date变量），”| date:’%Y-%m-%d’ “表示将page.date变量输出格式为：年-月-日。

七、创建博客首页

　　回到根目录，创建一个index.html的文件，输入以下内容。

---
layout: posts
title: 我的Blog  
`---`  
`<h2>`{\{ page.title }}`</h2>`  
`<p>最新文章</p>`  
`<ul>`  
　　`{`% for post in site.posts %}  
　　　　`<li>`{\{ post.date | date_to_string }}   
	`<a href="`{\{ site.baseurl }}{\{ post.url }}`">`{\{ post.title }}`</a></li>`  
　　`{`% endfor %}     
`</ul>`

　　它的Yaml文件头表示，首页使用posts模板，标题为”我的Blog”。然后，首页使用了{% for post in site.posts %}，表示对所有帖子进行一个遍历。这里要注意的是，Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。至于就是_config.yml中设置的baseurl变量。首页模板也可以自己在_layouts中自己定义喜欢的布局，然后再引入进来，这里只是一个简单的举例。
　　至此，一个简单的博客就搭建完成了。整个项目的目录结构如下：

/blogDemo
　　|--_config.yml  
　　|--_layouts  
　　|　　|--posts.html
　　|--_posts  
　　|　　|--2017-12-19-HelloWord.html
　　|--index.html

八、把代码上传到GitHub仓库

九、域名解析到博客

　　1. 在项目根目录下新建一个名为CNAME的文件，文件内容为你的域名如：

1	www.example.com

进入域名管理，在域名解析里添加如下两条记录

　　　 主机记录：@；记录类型：CNAME;记录值：username.github.io/blogDemo(也就是博客首页地址)。 　　　主机记录：www；记录类型：CNAME;记录值：username.github.io/blogDemo(也就是博客首页地址)。
　　3. 需要等待一会才能通过域名访问。

参考链接：

Jekyll官方文档

GitHub Pages tutorial

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

利用Jekyll搭建自己的GitHub博客

写在前面

开始搭建

一、到GitHub官网注册一个账号

二、点击绿色的new repository按钮新建一个代码仓库，这里假定新建了一个叫做blogDemo的仓库。

三、把仓库克隆到本地进行编辑

四、创建配置文件

五、创建模板文件。

写在前面

开始搭建

一、到GitHub官网注册一个账号

二、点击绿色的new repository按钮新建一个代码仓库，这里假定新建了一个叫做blogDemo的仓库。

三、把仓库克隆到本地进行编辑

四、创建配置文件

五、创建模板文件。

六、创建文章

七、创建博客首页

八、把代码上传到GitHub仓库

九、域名解析到博客

参考链接：

Jekyll官方文档

GitHub Pages tutorial

六、创建文章

七、创建博客首页

八、把代码上传到GitHub仓库

九、域名解析到博客

参考链接：

Jekyll官方文档

GitHub Pages tutorial

开始搭建　　

二、点击绿色的`new repository`按钮新建一个代码仓库，这里假定新建了一个叫做`blogDemo`的仓库。

开始搭建　　

二、点击绿色的`new repository`按钮新建一个代码仓库，这里假定新建了一个叫做`blogDemo`的仓库。