基于Jekyll搭建个人博客 wu-kan

引言

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

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

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

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

构思

目前博客的demo如下:

demo1

demo2

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

  • 用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

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

文件/目录 描述
_config.yml 保存配置数据。很多配置选项都可以直接在命令行中进行设置,但是如果把那些配置写在这儿,就不用非要去记住那些命令了。
_drafts drafts(草稿)是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。学习如何使用草稿。
_includes 可以加载这些包含部分到的布局或者文章中以方便重用。
_layouts layouts(布局)是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择
_posts 这里放的就是的文章了。文件格式很重要,必须要符合:YEAR-MONTH-DAY-title.MARKUP。 永久链接 可以在文章中自己定制,但是数据和标记语言都是根据文件名来确定的。
_data 格式化好的网站数据应放在这里。jekyll 的引擎会自动加载在该目录下所有的 yaml 文件(后缀是 .yml, .yaml, .json 或者 .csv )。这些文件可以经由 `site.data` 访问。如果有一个 members.yml 文件在该目录下,就可以通过 site.data.members 获取该文件的内容。
_site 一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进 .gitignore 文件中。
.jekyll-metadata 该文件帮助 Jekyll 跟踪哪些文件从上次建立站点开始到现在没有被修改,哪些文件需要在下一次站点建立时重新生成。该文件不会被包含在生成的站点中。将它加入到 .gitignore 文件可能是一个好注意。
index.html and other HTML, Markdown, Textile files 如果这些文件中包含 YAML 头信息 部分,Jekyll 就会自动将它们进行转换。当然,其他的如 .html, .markdown, .md, 或者 .textile 等在的站点根目录下或者不是以上提到的目录中的文件也会被转换。
Other Files/Folders 其他一些未被提及的目录和文件如 css 还有 images 文件夹, favicon.ico 等文件都将被完全拷贝到生成的 site 中。

选取模板

和丰富精美的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之外不出现其他的模块,尽量的干净、快速。

参考资料

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

WuKwechat WuKwechatappreciate WuKqq WuKalipay