基于Jekyll搭建个人博客 dfydada

引言

最开始我是在CSDN上写博客的。博客写了一年多，访问量勉强破万，感觉其中至少有三成是自己贡献的。而且CSDN上的广告是越来越多，网页编辑器也是越来越不好用。

十一月份，在青岛的ICPC区域赛失利之后，想要重新开始，和过去告别。也从此转移自己写博客的阵地。考虑过转投暂时还比较干净而且可以部分定义页面的博客园，但是最终还是决定在Github Pages上搭建属于自己的博客。

然后，翻了一些网上的教程，用Hexo框架和NexT主题搭了一个比较素雅的符合个人审美的博客。然而，Hexo搭建的博客需要先在本地生成博客页面然后再上传到服务器上，每次发博客都需要在电脑重新生成页面并上传，感觉没有那么方便。在不同电脑上想要发博客更是十分困难，感觉如果胡乱操作后本地部署的文件发生了一定的错乱，恢复起来会十分麻烦。

后来发现，Github Pages原生支持Jekyll，因此如果只需要推送文章可以直接在github的仓库里做。于是决定在期末考试后用Jekyll重新搭建个人博客。原来的博客不再维护。

构思

目前博客的demo如下：

想搭建一个足够干净、页面几乎不要有多余元素的博客，同时博客的功能还要足够丰富，满足我以下的需求：

• 用Markdown写博客
• 支持Latex公式
• 支持mermaid等插件
• 个性化Live2D
• 分享一些我在其他网站的个人账号
• 移动端适配
• 足够快的加载速度
• 访问量统计，评论互动
• ……（需求是会逐渐增长的，参见关于）

其中，Live2D是我某次访问别人的博客初次见到的，感觉非常吸引人。最终的目标是去掉网页上所有多余的元素，只剩下博文和Live2D看板娘，看板娘本身还可以作为博客访问的导航，感觉会十分有新意。

搭建过程（不定期更新）

我目前读的专业是计科超算方向，所以软件工程专业相关方面的基础几乎为0😌，大部分的内容都是参考网上教程慢慢摸索的，假如对某些过程有意见和建议欢迎向我提出！

开发环境

这个学期选了一门Linux相关的公选课，感觉还不错，因此直接把开发环境是搭建在Windows Subsystem for Linux（简称WSL）上了，Windows下也可以直接访问其中的环境，详见这篇博客。

sudo apt install jekyll

Jekyll是基于Ruby和Node.js环境的，很多依赖的包也会同时安装进来。现在，找在目录下打开终端，运行如下代码，加入新建了一个名为blog的文件夹，则说明安装成功了。

jekyll new blog

结构解析

观察刚刚生成的博客目录，有如下的结构：

├──_config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html

它的结构还算是比较简单清晰，详细功能如下表。

选取模板

和丰富精美的Hexo比起来，好的Jekyll模板真的是太少了…经过漫长时间的挑选，最终选择在lanyon主题的基础上修改啦。

这里选我自己的博客为模板，也可以在GitHub上慢慢翻一些别人的博客或模板。

git clone https://github.com/wu-kan/wu-kan.github.io YourBlog

发送到Github托管

把本地文件修改后，上传到博客仓库的master或者gh-pages分支即可。

定制

Update: 注意！以下移植插件的办法即将/已经过时。目前的计划（v2.3.0）是，将所有插件做成jsloader的形式，这样引用的时候只要<script src='/public/js/x.js'></script>即可，可以加快页面访问速度。目前的计划是完全去掉_include/目录下的所有文件。

我把博客实现的的插件基本上都封装起来了，拿走的流程都差不多：

• 将我博客代码仓库下_includes\相关文件加入你自己的_includes
• 在你的_config.yml内加入相关配置项（如果有的话，可以参看我的）
• 最后在需要这个插件的地方加入include语句即可

加入Live2D看板娘

参考网页添加 Live2D 看板娘。

已经将相关代码封装，将我博客代码仓库下_includes\live2d.html加入你自己的_includes，在</body>标签前加入如下代码。

{% include live2d.html %}

随后在你的_config.yml内加入如下配置项：

live2d:
  enable: true
  live2d_settings:
    - key: "'waifuEdgeSide'"
      value: "'right:0'"
    - key: "'modelId'"
      value: 5

• Live2D的前端基于fghrsh/live2d_demo修改，感谢。
• Live2D的后端暂时使用了fghrsh提供的api，感谢。

数学公式渲染

这里选择速度更快的KaTeX来渲染，参考使用KaTeX代替MathJax渲染公式。

已经将相关代码封装，将我博客代码仓库下_includes\katex.html加入你自己的_includes，在</body>标签前加入如下代码。

{% include katex.html %}

随后在你的_config.yml内加入如下配置项：

katex: # KaTeX
  enable: true
  stylesheet: //unpkg.com/katex/dist/katex.min.css
  src: //unpkg.com/katex/dist/katex.min.js
  auto-render: //unpkg.com/katex/dist/contrib/auto-render.min.js
  delimiters: true # 开启行内公式$\KaTeX$支持

mermaid流程图

已经将相关代码封装，将我博客代码仓库下_includes\mermaid.html加入你自己的_includes，在</body>标签前加入如下代码。

{% include mermaid.html %}

随后在你的_config.yml内加入如下配置项：

mermaid: # https://github.com/knsv/mermaid
  enable: true
  src: //unpkg.com/mermaid/dist/mermaid.min.js
  stylesheet: //unpkg.com/mermaid/dist/mermaid.min.css
  markdown-expand: true

valine评论系统

配置详见官方手册，说得很清楚了。

已经将相关代码封装，将我博客代码仓库下_includes\valine.html加入你自己的_includes，在你需要评论模块的地方加入如下代码。

{% include valine.html %}

随后在你的_config.yml内加入如下配置项（这是我的，请根据官方手册上的说明获取自己的参数）：

valine:
  enable: true
  src: //unpkg.com/valine/dist/Valine.min.js
  appId: ******
  appKey: ******
  notify: true # 评论回复邮件提醒
  verify: true # 验证码服务
  avatar: identicon
  placeholder: 在这里评论吧！
  visitor: true # 文章访问量统计
  highlight: true # 代码高亮
  avatarForce: false # 每次访问强制拉取最新的评论列表头像
  recordIP: true # 记录评论者IP

下一步计划

详细的开发计划及建站内容详见博客详情页。

从这个页面得到的灵感，目标是博客上除了文章和作为导航的Live2D之外不出现其他的模块，尽量的干净、快速。

参考资料

大部分的参考链接已在原文给出，同时搭建本博客的过程中还参考了以下内容，感谢作者们：

• Jekyll + Github Pages 博客搭建入门
• Jekyll博客Next主题超深度配置
• 【应用软件】Jekyll 配置