Jekyll和Github搭建个人静态博客

连厉刚

2023-12-01

利用Github提供的Pages功能，把本地搭建的Jekyll站点部署上去，实现一个自由定制的个人静态博客。

前言
本地搭建Jekyll(以下都基于Windows环境)
事先准备
使用gem安装Jekyll
使用Jekyll创建博客站点
开启Jekyll内置服务器
Jekyll目录结构解读
使用Jekyll写博文
用Github Pages生成个人博客
Github Pages生成网站的两种方式的基本原理
创建个人仓库
为仓库创建Github Pages
将本地Jekyll代码部署到Github仓库
把仓库克隆到本地
拷贝本地Jekyll目录到版本库中
部署本地Jekyll站点到Github Pages上
为你的Github绑定域名
总结
本地开发测试
推送远程仓库
~ 前言
为什么要用Jekyll和Github来搭博客呢？
这二者都是开源免费的，可以自由定制网站风格
Github给你提供了无限流量，世界各地访问速度都很理想，延迟基本在200ms以内
不管何时何地只要提交commit就能发布新文章，让博主专注于写文章
不需要数据库，通过markdown编写静态文章生成HTML页面，提升页面响应速度
享受git的版本管理功能，不用担心有文章丢失
Github Pages是什么？

Github是一个开源代码库及版本控制系统，它可以托管各种git库，号称程序员的Facebook，影响力非常大。而Github里的Pages功能，就是用来为项目建立网站，使项目的展示能够简明易懂。我们就可以通过它来建立托管在Github上的静态网页。

Jekyll是什么？

Jekyll是一个简单免费的静态站点生成器，它根据网页源码生成静态文件，并且为我们提供了模板、插件。最关键的是可以免费部署在Github上。

创建一个新的站点

控制台可以看见（创建的地址有所不同）New jekyll site installed in D:/blog. 的提示。

开启Jekyll 内置服务器

cd blog

一定要进入创建的对应blog目录，否则服务无法开启

$ jekyll serve

启动一个地址为http://localhost:4000/的服务器

Jekyll服务器默认端口是4000，所以打开浏览器输入：http://localhost:4000 就可以看到生成的博客页面。

author

如果把 $jekyll serve 换成$ jekyll serve –watch，则功能和jekyll serve相同，但是可以在服务启动的情况下修改内容并且同步更新。简单说就是，不用再次启动服务就可以刷新浏览器看修改过的内容。

Jekyll目录结构解读

我们进入刚生成的Blog目录，可以看到Jekyll的结构如下：

blog
.sass-cache
_includes
footer.html
head.html
header.html
icon-github.html
icon-github.svg
icon-twitter.html
icon-twitter.svg
_layouts
default.html
page.html
post.html
_posts
2016-06-26-welcome-to-jekyll.markdown
_sass
_site
css
main.scss
.gitignore
_config.yml
about.md
feed.xml
index.html
.sass-cache

sass的编译缓存文件。

_include

网页模块包含文件。可以方便的把这些文件加载到你的布局或者文章中，进行重用。他们都代表了最终生成的网页中的一部分。可以用这个标签：

author

来把_include 目录下的文件file.ext包含进来。

_layouts

存放包裹在网页外部的模板。为网站所有网页提供一个基本模板。每个网页只需关注自己的内容。例如 default.html 文件：

author

这个文件中包含的就是所有网页文件所共有的东西，每个页面的内容会被填充下面这行代码中：

author

在需要使用这个模板的页面中，用YAML头信息进行引用：

author

图中 index.html 文件的头部：

layout: default

作用是通过 layout 告诉Jekyll生成 index.html 时，要在_layouts 目录下找 default.html 文件，然后把当前文件解析后添加到 default.html 的content 的部分，组成最终的 index.html 文件。

在我们写的markdown文档中也要设置YAML头信息，如我的这篇博文的头信息：

layout: post
title: “Jekyll和Github搭建个人静态博客”
date: 2016/6/26 13:03:42

categories: original

layout表示使用post布局，title 是文章标题，date是自动生成的日期，categories 是该文章生成html文件后的存放目录，也就是文章的分类属性。可以在_site/original下找到。（category 只能添加一个分类属性， categories 可以添加多个分类属性。各属性使用空格隔开）

因为文章套用的是post模板，所以title会传入 post.html 文件中的Jekyll和Github搭建个人静态博客中，成为最终 index.html 页面中的文章列表标题：

author

而 post.html 又套用了default.html 模板，而default页面中的头部又由 head.html 构成：

head页面中的title属性：

Jekyll和Github搭建个人静态博客
就可以读取到这篇博文中的title并且设置在最终 index.html 文件中。

_posts

这个目录存放的就是我们所有的博文了。文件名字格式很重要，必须使用统一的格式：

YEAR-MONTH-DAY-title.MARKUP
例如，2016-06-26-MakeBlog.md，写成这样文件名才会被解析。

index.html 文件中：

post.date的值就由统一格式的文件名中的日期而来。

_sass

存放网站用到的sass文件。

_site

一旦Jekyll解析完整个网站，就会将最终的静态网站源代码放在这里（默认）。最好将这个目录放进你的.gitignore文件中。

_ plugins

虽然Jekyll默认没有生成这个文件夹，但你自己可以在根目录下创建这样一个文件夹来存放插件。这里就不详细展开插件的用法了。

_config.yml

Jekyll的配置文件，决定了如何解析网站的源代码，详细配置信息可以看这里。

使用Jekyll写博文

可以使用你喜欢的任何一个markdown编辑器，保存为规定格式（年是4位数字，月和日都是2位数字。MARKUP扩展名代表了这篇文章是用什么格式写的。）的文件名：

YEAR-MONTH-DAY-title.MARKUP
在文章头部添加YAML头信息（YAML front- matter）：

layout: post
title: “Jekyll和Github搭建个人静态博客”
date: 2016/6/26 13:03:42

categories: original

写上你的内容，保存在_posts目录里即可。

然后刷新浏览器，如果页面没有变化就需要通过Jekyll build去重新生成页面：

jekyll build
如果一开始启动服务时使用的是：

jekyll serve –watch
那么直接刷新浏览器就行，Jekyll监视到有更新会自动重新生成网站。

如果要添加文章摘要，并且显示在上面 index.html 中，可以在YAML头信息中添加一行(这里标记我们暂用~~~，你也可以换成任何你喜欢的)：

excerpt_separator: ~~~
头信息变为：

layout: post
title: “Jekyll和Github搭建个人静态博客”
date: 2016/6/26 13:03:42
categories: original

excerpt_separator: ~~~

Jekyll会自动取每篇文章从开头到第一次出现 excerpt_separator 也就是 ~~~ 的地方作为文章的摘要，并将此内容保存到变量 post.excerpt 中。

因为要显示在 index.html 的文章列表上：

author

所以需要在h2标签后再添加：

author

文章列表代码变为：

author

这样，文章摘要就被添加到了文章列表上。

本地搭建Jekyll和写文章的所有过程大致就是这些了。如有更多疑问到Jekyll官网和Jekyll中文网查阅详细资料。

~ 用Github Pages生成个人博客

Github Pages生成网站的两种方式的基本原理

方式一

一个Github账号对应一个用户或者一个组织，Github会给这个用户分配一个域名： username.github.io
在Github上有一个账号，名为 username （任意），有一个项目，名为 username.github.io （固定格式，username与账号名一致），项目分支名为 master （默认固定），这个分支有类似下面的目录结构：

author

这样，当你访问 http://username.github.io/ 时，Github会使用Jekyll解析用户 username 名下的 username.github.io 项目中，分支为 master 的源代码，为你构建一个静态网站，并将生成的 index.html 展示给你。

方式二

Github还为每个项目提供了域名，例如你的项目名为 blog ，Github会为这个项目提供一个 username.github.io/blog 的域名
在Github上有一个账号，名为 username （任意），有一个项目，名为 project （任意），项目分支名为 gh-pages （固定），这个分支也有上面那种结构。

那么当你访问 http://username.github.io/project 时，Github会去解析 username 用户下，project 项目的 gh-pages 分支下的源代码，为你构建网站。

所以要搭建自己的博客你有两种选择：

建立名为 username.github.io 的项目，在 master 分支下存放网站源代码

建立名为 blog 的项目，在 gh-pages 分支下存放网站源代码

接下来我们用第二种方式搭建博客

创建个人仓库

因为我们使用第二种方式创建，所以仓库的名称可以随意取。在这以Test01为名字。

在Repossitory name处填入Test01，选择Public类型，然后点击下面的Create respository按钮：

author

为仓库创建Github Pages

点击Settings设置：

author

翻到下面，选择Launch automatic page generator：

author

再接着编译一下内容，选择页面上的元素，再点Continue to layouts：

author

选好模板，点击Publish page，就生成了Github Pages：

author

并且，分支自动设置为了gh-pages：

author

让我们打开这个网站看看效果吧！在浏览器输入： http://zyc8904.github.io/Test01 (zyc8904换成你的github名称，Test01换成项目名)：

author

可能有人会问，地址栏怎么和我输入的网址不一样。这是因为我把域名绑定到了我的github上，zyc8904.github.io 被自动指向为我的域名，不要着急，后面我会教大家如何绑定域名

将本地Jekyll代码部署到Gihub仓库

我们的目的就是在本地利用Jekyll搭建好博客，并且测试开发，写文章，然后推送到Github仓库里，发布到线上。前面已经教大家搭建好了本地Jekyll，接下来就教大家把它推送到Github仓库中。

把仓库克隆到本地

这里我以windows下的Git客户端：Github for windows 为例来为大家讲解（如果想用Git Bash命令行克隆，请移步这里）

首先打开我们的Github for windows客户端，点击左侧的 + 号按钮：

author

选择Clone，并且找到刚才新建的Test01仓库，然后点击最下方的Clone按钮：

author

然后选择存放位置，这里我放到D盘，然后点击确定：

author

这样我们的Test01就被克隆到了本地。打开D盘可以看见这个文件夹。这时我们启动Jekyll服务，别忘了进入Test01目录下：

cd d:\Test01
jekyll serve –watch
现在我们打开[http://localhost:4000]，就可以看见我们在Github上创建的Pages页面了。

拷贝本地Jekyll目录到版本库中

删除Test01下的示例文件和文件夹：_site 、stylesheets 、index.html 、params.json。

再把本地Jekyll创建的blog里的所有文件和文件夹全都拷贝到Test01里面。

如果你前面和我用的是一样的命令的话

jekyll serve –watch
这时你可能会发现cmd命令行中，自动处理了一些操作并且显示：

author

这就是我加–watch 的原因，不用再自己去生成，Jekyll服务器检测到你有变化会自动再生成页面，这时你在刷新浏览器，那么就会看到Github页面就会被Jekyll生成的页面代替了：

author

部署本地Jekyll站点到Github Pages上

打开Github for windows客户端，会看到 changes 上面有个点，说明他已经检测到我们的仓库的变化，并且自动把变化都列举在了下面：

author

这时我们在下方填入这次改变的名称和描述，点击Commit to gh-pages。然后再点击右上角的Sync把这次改变push到Github远程仓库里：

author

稍等几分钟，我们再次访问 http://zyc8904.github.io/Test01 就可以看见我们用Jekyll做的站点已经被部署到github上了：

author

以后你只要在本地Test01文件夹下的_posts文件夹里写文章，然后推送到远程仓库就可以了

Jekyll和Github搭建个人静态博客

创建一个新的站点

一定要进入创建的对应blog目录，否则服务无法开启

启动一个地址为http://localhost:4000/的服务器

layout: default

categories: original

categories: original

excerpt_separator: ~~~

Github Pages生成网站的两种方式的基本原理

相关阅读

相关文章

相关问答

相关文档