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上。

相关语言

YAML一个几乎所有编程语言都支持的易读友好的数据序列化标准
Liquid一个ruby上的开源模板语言
~ 本地搭建Jekyll (以下都基于Windows环境)

事先准备

安装Jekyll很简单,但你得先做好一些准备工作,确保你的系统里有如下配置:

  1. Ruby

Ruby是一种纯粹的面向对象编程语言。我们在这里不做过多介绍。安装Jekyll需要电脑上安装Ruby,以下是安装步骤:

Window 系统下,我们可以使用 RailsInstaller 来安装 Ruby 环境,下载地址为:点击进入下载页面
下载 RailsInstaller 之后,双击 railsinstaller-3.2.0 文件,启动 Ruby 安装向导
点击 Next,继续向导,记得勾选 Add Ruby executables to your PATH,直到 Ruby 安装程序完成 Ruby 安装为止
安装后,通过在命令行中输入 $ ruby -v 命令来确保一切工作正常
如果一切工作正常,将会输出所安装的 Ruby 解释器的版本。如果您安装了其他版本,则会显示其他不同的版本
安装成功示例:

$ ruby -v
ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]
2. RubyGems

用RubyInstaller安装Ruby之后都附带有Gems,如有需要可以从这里单独下载RubyGems。

使用gem安装Jekyll

代码示例中#及其后面的语句为注释
打开cmd命令行程序,输入以下命令:

$ gem install jekyll
所有Jekyll的gem依赖包都会被自动安装。

使用Jekyll创建博客站点

先进入你想创建博客的目录下,比如我要在D盘创建一个博客,就在命令行输入:

cd d:
然后输入创建博客的命令:

jekyll new blog

创建一个新的站点

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

开启Jekyll 内置服务器

cd blog

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

$ jekyll serve

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

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

author

如果把 jekyllserve 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文件夹里写文章,然后推送到远程仓库就可以了

 类似资料: