Jekyll和GitHubPages搭建个人博客

汤晔飞

技术知识脚本

发布于：2021年5月29日

次浏览

本文介绍Jekyll的安装和基本使用。
最后本人选择了hexo搭建博客，具体原因请看hexo搭建篇。
Jekyll博客我参照B站Up主，制作了在线简历，同样很棒！参考简历，下方有视频连接可以学习。

☀环境搭建

☀搭建Ruby环境

参考：Ruby环境搭建篇(Jekyll博客)

☀安装Jekyll

Jekyll是什么？

引用自官网：
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。

简单来说，Jekyll就是将纯文本转化为静态博客网站，不需要数据库支持，也没有评论功能，想要评论功能的话可以借助第三方的评论服务。
Jekyll + Github Pages可以让你更加专注于博客内容，而不是如何搭建一个博客平台。

Jekyll官网：https://www.jekyll.com.cn/

Jekyl主题站：https://jekyllthemes.dev/

==GitHub本身自带Jekyll==

==安装Jekyll的目的就是本机预览==

优点：

使用了 Jekyll 你会发现如果你想使用多台电脑发博客都很方便，只要把远端 github 仓库里的博客 clone 下来，写文章后再提交就可以了，Hexo 由于远端提交的是静态网页，所有无法直接写 Markdown 的文章。

☀安装Jekyll

☀Jekyll运行所需要的环境:

Ruby
一种简单快捷的面向对象（面向对象程序设计）脚本语言，在20世纪90年代由日本人松本行弘(Yukihiro Matsumoto)开发。
下载地址:https://rubyinstaller.org/downloads/
RubyGems
RubyGems 是 Ruby 的一个包管理器，它提供一个分发 Ruby 程序和库的标准格式，还提供一个管理程序包安装的工具。
RubyGems 旨在方便地管理 gem 安装的工具，以及用于分发 gem 的服务器。这类似于 Ubuntu 下的apt-get, Centos 的 yum，Python 的 pip。
RubyGems大约创建于2003年11月，从Ruby 1.9版起成为Ruby标准库的一部分。如果你的 Ruby 低于 1.9 版本，也可以通过手动安装:
DevKit
DevKit 是一个在 Windows 上帮助简化安装及使用 Ruby C/C++ 扩展如 RDiscount 和 RedCloth 的工具箱。

Ruby、RubyGems、DevKit环境安装请看Ruby

☀安装配置步骤：

安装完上述所需环境后：

gem install jekyll
gem install bundler
切换bundler的安装源
bundle config mirror.https://rubygems.org https://gems.ruby-china.com

☀启动：

☀1. 新建博客启动

进入本地的一个存放博客目录

jekyll new myblog

cd mybolg

bundle exec jekyll serve 或者 jekyll server 或者 bundle exec jekyll s 看jekyll的版本。

或者

mkdir myblog

cd myblog

jekyll new .

jekyll s

☀2.从一个刚拉取的已有博客中启动

bundle install

bundle exec jekyll serve

☀第三方工具

☀GiTalk

☀GiTalk简介

Gitalk 最初推出来，应该是想配合在 github 上建博客，方便添加评论功能的。随着其他评论插件的没落，Gitalk 就火起来了。Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。它除了支持 Hexo 外，还支持 java，php 等语言开发的博客。

优点：方便，简单，很适合新手。

☀使用方法

首先需要到GitHub上去新建一个仓库用于存放评论的内容。
在设置中打开issue功能。

使用自己的博客仓库就可以了

需要注册一个Github Oauth Application具体步骤如下：

进入个人的Github首页，Settings->Applications->Developer applications->Register a new application，然后在下图中输入信息，信息输入完毕后点击"Register application"按钮。

得到Client ID 和 Client Secret

只需要将如下代码引入你想添加评论的 html 或者 jsp 页面中就可以使用了:

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>     
<script type="text/javascript">
    var gitalk = new Gitalk({
    // gitalk的主要参数
      clientID: `f8b924888078dee1cXXX`,   //上面获取到的值
      clientSecret: `7318911d69cddc8932c4b200a4e7c881a9XXX`,//上面获取到的值
      repo: `PingLunShuJu`,  //您刚才建立仓库的名字
      owner: 'Tom-shushu',   //你的GitHub用户名字
      admin: ['Tom-shushu'],  //你的GitHub用户的名字
      id: 'indow.location.pathname', //id不能重复，如果重复就会把其他页面的评论引进来
        });
      gitalk.render('gitalk-container');
</script>

注意：第一次进入时评论模块加载不出来，需要注册Github Application的账号，将博客发布服务器，登录评论模块后刷新页面，就可以正常使用了。

添加了评论后在博客仓库的issues中显示下面一条记录：

☀参数描述：

clientID String
必须. Github Application Client ID.
clientSecret String
必须. Github Application Client Secret.
repo String
必须. Github repository.
owner String
必须. Github repository 所有者，可以是个人或者组织。
admin Array
必须. Github repository 合作者 (确保对这个 repository 是有写的权限)。
id String
Default: location.href.
页面的唯一标识。
labels Array
Default: ['Gitalk'].
Github issue 的标签。
title String
Default: document.title.
Github issue 的标题。
body String
Default: location.href + header.meta[description].
Github issue 的内容。
language String
Default: navigator.language || navigator.userLanguage.
设置语言，支持 [en, zh-CN, zh-TW]。
perPage Number
Default: 10.
每次加载的数据大小，最多 100。
distractionFreeMode Boolean
Default: false。
类似Facebook评论框的全屏遮罩效果.
pagerDirection String
Default: ‘last’
评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序。
createIssueManually Boolean
Default: false.
如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
proxy String
Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.
Github oauth 请求到反向代理，为了支持 CORS。为什么要这样?

flipMoveOptions Object

Default:

{
  staggerDelayBy: 150,
  appearAnimation: 'accordionVertical',
  enterAnimation: 'accordionVertical',
  leaveAnimation: 'accordionVertical',
}

评论列表的动画。参考

enableHotKey Boolean
Default: true.
启用快捷键(cmd|ctrl + enter) 提交评论.

☀如何写Jekyll的MarkDown博客：

命名格式:yyyy-mm-dd-blogName.md
开启标题头文件：注意key: 后的value值前必须加一个空格，否则不会识别。
- layout: 布局 post、default、page
- title: 标题，显示在文本的最上方，同文件名就可以。
- description: 文章描述
- date: 日期可有可无，本身也会识别文件的日期名进行输出。
- tag: 标签为博客添加标签
- tags: [标签1,标签2] 添加多个标签
- categories: [分类1,分类2] 多个分类
- 图片

☀好看的博客模板

博客地址	亮点
https://github.com/leopardpan/leopardpan.github.io	此模板须放在github.io首页，因为很多路径未用当前相对路径，使用的是项目的相对路径/，所以需放在github.io首页仓库中使其生效。
https://yuanlichenai.cn/	关灯，黑夜模式切换，阅读时的右侧目录好用，测试中嵌入音乐
https://blog.ixxoo.me/	READ和NOTE板块很好。
https://mmistakes.github.io/mm-github-pages-starter/posts/	风格简单，搜索好看。
https://mmistakes.github.io/jekyll-theme-basically-basic/	有一张背景图，导航栏隐藏。
https://jekyller.github.io/jasper/#	比漂亮的模板
https://yuanlichenai.cn/
https://github.com/jekyller/jasper.git

☀模板改造记录

基于，潘柏信的模板

删除posts文件夹下原作者的文章。
README.md 写上自己仓库的信息，指向原作者连接的信息。
删除原作者迁移博客残留文件。Gemfile、Gemfile.lock、Rakefile
Feed.xml为iss订阅的东西，不用可以删除。让博客支持iss订阅，则不需要删除。
CNAME为域名映射的文件。没有域名直接删除。
修改images中的图片。(主目录)个人头像、(paying)微信、支付宝打赏等，不需要直接将paying删除,同时将include中的newold.html中的打赏相关的html和div删除。
images中的post为作者写文章markdown引用的图片资源，不需要也可以删除，或者添加自己的图片。
js文件夹为网站脚本，images为图片地址。css为样表，可修改。post为写文章的地方，支持markdown或者html会套上网站的样表展现。layout为网站的样表(相当于一个整个的汽车)。layout所需的部件都在include中。
修改_config.yml，按照注释配置即可。
全文替换作者的用户名域名。
配置百度站内搜索。
将写好的markdown文件，放入_post文件夹中，jekyll服务会自动将md文件解析生成为html放在__site文件夹，根据年月划分目录存入。
添加评论系统：GiTalk
添加分类功能：引入categories.md 连接

☀🎉🎉🎉Jekyll制作在线简历

参考视频：

个人简历

☀加载速度优化方案

思路：使用谷歌Network功能，查看加载资源文件，哪一个资源文件最耗时，优化将其变短。

将加载时间长的js相关的功能隐藏，放在一个可触发的按钮中，点击按钮后再去加载js和对应的功能。
加载非本地其他域名的资源响应慢：
- 将资源放到本地，通多本地去加载。
- 使用离地区比较近的域cdn。https://www.bootcdn.cn/
  优秀cdn网站整理
协议转发耗时，使用了http协议访问，转发到https下，这个转发的过程会消耗时间。如果明确了协议直接写固定会节省时间。
加载的图片比较大，也会耗时，无损压缩网站,将图片压缩。
如果本机测试很快，但是发布的服务器本身访问带宽慢，可以直接将jekyll生成得site文件发布到中国的主机上。与主机的ping值主要决定了访问速度。