本文参与少数派 2020 年度征文,宇宙说明书


个人博客虽早已不复当年黄金时代的盛况,但如今仍有相当一部分的拥趸,我就是其中之一。到目前为止我鼓捣自己的个人博客将近有四年时间了,逐渐地,我对它在我的生活中所承担的功能有了更清晰的认知。尤其是今年前半年疫情在家,我对整个博客体系做了一个系统性的整理,消除了最后一部分使用障碍,终于能够集中注意力于写作,这篇文章就想谈一谈我的一些探索。

1. 快速建立自己的博客

如果把整套博客体系涉及的所有技术列出来,恐怕要劝退很大一部分人,不过单纯从使用的角度来讲,它又非常简单,简单到一个完完全全的新手 1 也足以跟着下面的步骤快速构建起自己的个人博客。

第一步 :注册 Github 账户,点击 链接 进入如下图所示页面,点击右上角的 Fork;

第二步 :返回自己的主页,进入刚刚 Fork 的仓库 2(此时已出现在自己的主页中),根据下图指示先点击 Setting,然后将 shuzang.github.io 中的 shuzang 更改为你的 Github 用户名,点击 Rename 确认。然后左侧列表切换到 Pages,选择分支为 master,Save 后绿色部分出现网址即可。

第三步 :从 官网 下载 Github 的客户端软件,安装并登录后,点击 Clone repository,选择出现的唯一一个仓库 3,点击 clone 将其下载到本地。

clone 后看到的仓库页面

第四步 :进入上一步 clone 时选择的本地目录,打开 config.toml 文件,修改第一行的 baseURL,同样用自己的 Github 用户名替代 shuzang。比如,假如你的用户名是 sspai,这里就应该更改为 https://sspai.github.io,记住这个网址,之后这就是你的博客网址了。

需要修改的文件内容

第五步 :和 config.toml 在同一目录下的还有一个 content 文件夹,这个文件夹内就是你的博客内容了,其中 about.md 是网站和你个人的描述,posts 子目录下应该是你写作的所有文章。注意,所有的文章都应当是 Markdown 格式,所以,不熟悉这个格式的就需要先学一下。另外,文章标题、发布日期、标签、分类等都需要在文章开头标注,下面是一个简单的例子。

第六步 :打开 Github 客户端,根据下图依次输入描述信息和点击提交,等待一会儿,就可以从浏览器输入刚才记住的网址查看自己的博客了。

我尽量将这个教程描述的和使用一个普通的软件一样简单,而略去那些繁琐的依赖安装和命令行操作过程,就是想让完完全全的新手也能够很容易的建立自己的个人博客,所以熟悉这一套的同学就不要在意写的过于小白了。

通常情况下,通过上面的步骤就已经足够能完成博客建立和在上面发布自己的文章了,但个人博客的魅力就在于,你总是会不知不觉陷入一个「折腾」的过程,比如换一换其它好看的主题、使用自己的头像、添加评论系统、加个在线聊天、在博客上放一个虚拟人物以及域名、服务器、CDN 等更专业的内容,等等。这些进阶的内容往往是由兴趣驱动的,所以大家应该也不会嫌麻烦,就不需要写成这样小白向的文章了,我仅仅在这里放两个链接。第一个链接是我自己整理并放在我的博客中的一系列文章,基于 Hugo 博客,详细描述了我从一开始使用到现在折腾过的一些东西,第二个链接则是我收藏的关于 Hexo 博客的一个系列文章。

  1. https://shuzang.github.io/tags/hugo/
  2. http://yearito.cn/tags/Hexo/

2. 个人博客所承担的功能

个人博客所承担的首要功能是 学习过程的记录 。我们都知道,输出和输入之间是有一个中间过程的,那就是学习笔记。注意,这里学习笔记的含义是广泛的,书籍的摘录、论文的翻译、实验的过程记录等,都可以算作学习笔记。这些内容的共同点是,它们更多的是原始材料的总结归纳,自己的想法比较少,即使有,也是零散不成体系的。因此,学习笔记很难作为纯粹的输出去发表,但是作为博客却没有任何问题,博客的最大优点就在于它的包容性。

当然,有人可能会选择使用笔记类软件,比如有道云笔记、OneNote、为知笔记、石墨文档、印象笔记等,但笔记类软件对我而言是有一些需求无法满足的。首先是一些笔记类软件 没有编辑模式和阅读模式的区别 ,这会导致手机上滑动阅读时,误触的几率比较大,体验非常不好。其次,使用笔记类软件我们 无法「随时随地」地阅读 这些内容,这种随时随地不是大家通常说的全平台,而是在任何情况下,即使不是自己的手机和电脑,不需要下载专门的软件和登录自己的账号也可以访问。最后,笔记类软件的 分享功能是缺失的 ,我们必须主动的,而且只能分享给有限的几个人,但主动发给相熟的人所带来的满足感,远远不如那种无意中被别人看到然后给了个赞的满足感。

有道云笔记,图片来源:有道云笔记官网

后两个缺点其实是可以利用在线写作平台弥补的,毕竟,脸皮厚一点,就算不成体系,发表在 CSDN 、掘金、语雀等在线平台,甚至我们的少数派,也顶多是没人看,作为一个在线笔记本还是绰绰有余的(当然还是不推荐这么做的)。我们不得不承认,这些在线平台的阅读体验往往比笔记类软件要好得多。但在线平台有它们的缺点,首先是每个 平台都有一定的内容倾向 ,比如技术类、生活类、书评、影评、游记、散文等等,又或者文章、视频、音频、图片等,很难有一个平台具有完全的包容性,而我们的思想却天马行空,似乎每一种都想写两句。个人博客是没有这种限制的,不管什么样的形式都可以发布。其次是 在平台上写作我们对内容的所有权是受限的 ,这里所有权不是指版权的问题,而是内容能否一直存在。以简书为例,我曾经在简书写过一段时间,但有一天我的账户突然就被封了(也可能是文章被锁定,记不太清了),理由是「涉及敏感内容」,经过邮件申诉之后得到了解封,但没有得到解释。几个月后突然就再次被封,我就意识到,我对我的文章并没有控制权,于是我导出了所有文章,注销了简书的账号,开始转向自建博客写作。最后还有一个不太重要的原因,那就是 编辑器的易用性 。以 CSDN 为例,很久之前,我也在 CSDN 写过一些东西,但是,当时 CSDN 的编辑器并不好用,在使用过程中遇到的困难足以抵消一开始文章写作的热情,这直接导致了三五篇文章过后我就再也提不起兴趣。与之相反的是,简书的编辑器做的简单易用,那种写作时不需要考虑其他事情的丝滑感一下就击中了我的内心,这是后来我转移到简书平台的原因,当然,少数派的在线富文本编辑器也挺好用的。

CSDN 现在的在线 Markdown 编辑器

我相信对我而言,或许对很多还在玩博客的人都是,学习笔记所占的数目最多。但除此之外,个人博客中还可能包括:课程作业、日记、影评、游记、周期性的复盘、图库、音乐和视频的收集等等,甚至我见过有人将个人博客当作 QQ 空间或微博总是发短句子的。还是那句话, 个人博客最大的优点在于其广泛的包容性

最后还想提一个比较有意思的问题,很多人坚持 「All in one」的思路,即把笔记、收藏、日程规划等都利用同一个软件完成,典型的代表就是 Notion 和 印象笔记。我承认工具的减少有其积极的意义,但在我的个人体系中,还是更倾向于把它们分开,因为收藏的内容是纯粹的原材料,需要在上面做二次加工,All in one 的做法很容易让我陷入一种收藏等于学会了的尴尬境地,而日程规划交互操作比较多,我还是更希望使用专业一些的工具。

3. 博客方案的演进

之前没有写清楚,这里声明一下,我提到的个人博客主要指的是静态博客,不涉及服务器,当然也不涉及域名,因为使用服务器真的会多很大一部分工作量,而域名在国内还需要备案,挑选、续费都是一大堆的问题。下面就慢慢来介绍整个方案的组成和演进过程。

3.1 博客框架

我最开始接触到的 静态博客框架 Hexo,官网宣称几分钟构建自己的个人博客(虽然好像没什么错,但只有足够熟悉之后才能达到这个效果),而且网上有着大量利用 Hexo + Github Pages 搭建自己的个人博客平台的教程,将上手难度降到了最低。这一套体系我大概用了不到一年的时间,当时用的主题是 Next,也积累了不少经验,但到后期就遇到了不少问题。

最核心的问题就是渲染速度,当文章数量到百篇以上时,Hexo 渲染时间就会明显延长,文章数量越多,这种时间的感知就越明显。另外一个问题是 Hexo 是基于 Node.js 的,使用 npm 来安装自己和相关的插件,这固然为其带来了丰富的可定制性,但有过经验的都知道,npm 的包管理机制一言难尽,别说 windows 了,就是在 Linux 上使用都时常会遇到一堆的问题,我实在是不忍心折腾我的 windows 系统。

基于以上两点原因,我在查找了不少静态博客框架后选择了 Hugo。文章数量的增加对 Hugo 的渲染速度并没有太大影响,而且 Hugo 是作为一个独立软件安装的 ,虽然失去了 Hexo 的可定制性,但也变得足够简单易用,最重要的是,虽然失去了 Hexo 主题的丰富性,但 Hugo 中还是有几个想象力天马行空的主题足以引起我的兴趣。

Hugo 和 Hexo,图片来源:必应图片

3.2 主题

凡是涉及一点技术的东西,总免不了经历一段「瞎折腾」的时光,只不过,我们总是乐在其中罢了。有那么一段时间,写作似乎都成了次要的事,每天忙于尝试各种不同的主题,以及给博客添加或删除功能。不过也正是有了这些尝试,我才逐渐思考清楚自己需要的是什么,以及试验出一套足够方便的工具组合和使用方式。我将我认为一个博客应当包括的、可包括的和没有必要的一些功能总结如下表(暂时只想到这些)。

应当包括的功能可包括的功能没有必要的功能
归档、标签、分类体系夜间模式对流程图的支持(如 mermaid)
文章目录对音频、视频的支持对互动地图的支持(如 mapbox)
搜索对 emoji 的支持对交互式图表的支持(如 Echarts)
对数学公式的支持顶部阅读进度条鼠标点击、页面滚动等特效
代码高亮国际化类似豆瓣的图书、电影已读页面
 评论系统在线聊天通信(如 Tidio)
  虚拟人物(如 Live2D)

其中,对数学公式的支持对我非常重要(论文原因),而由于浏览器通常都支持夜间模式,大部分博客的受众也往往是母语,夜间模式和国际化等功能是一些可包括也可不包括的功能。剩下的没有必要的功能主要是对页面加载速度有影响,如果自己可以优化到没有影响,也无所谓,不过我个人更喜欢极简一些的风格。事实上,这些功能都是玩博客的时候折腾最多的,但是用的非常少,往往一时的新鲜感过后,还是会去掉,就比如在线聊天、已读图书和电影时间线、虚拟人物这些,花费了大量时间,最后还是没有停留在我的博客中。Hexo-Chic 主题的开发者在自己的 主题开发回顾 中写到,一个主题的功能应该符合「奥卡姆剃刀」原则,我觉得非常有道理。

奥卡姆剃刀原则: 如无必要 勿增实体

我目前使用的主题是 LoveIt,不过目前已经变得有些臃肿,从它的起源 LeaveIt 你可以体会到一部分它的核心设计理念。

3.3 Github

Github 主要用于存储博客文件,同时利用 Github Pages 展示博客(这样不需要自己购买服务器和申请域名),利用 Github Action 进行持续集成完成渲染和推送工作。

我一开始的做法是使用两个仓库,一个仓库存放原始博客文件,利用 Travis CI 自动渲染并将渲染完成的网页文件推送到另一个仓库。后来调整为使用一个仓库完成所有工作,blog 分支存放博客文件,渲染完成后自动推送到 master 分支。直到去年从阮一峰大神的博客里了解到 Github Action 后,用它替代了 Travis CI,使用体验真的提升了很多。

网上很多人说 Github 有被墙的风险,可能因为我在学校的缘故吧,还从来没遇到过,不过有趣的是即使我使用手机的运营商网络,也可以正常访问啊。解决 Github 访问问题的方法有很多,比如修改 Hosts 文件,或者换用国内的 码云 等平台,这里就不详细介绍了。

3.4 评论系统

评论系统 我一开始的时候使用 Gittalk,因为想把所有功能都利用 Github 完成,但是后来接触到 Valine 后就瞬间被捕获,毕竟太好看了。目前主要在用 Valine,评论文件目前存储在 Leancloud 中。

Gittalk
Valine

3.5 Markdown 编辑器

Markdown 编辑器 换了很多,不过最后发现还是偏爱 Typora ,这种所见即所得的编辑器真的让人欲罢不能,写作体验甚至比富文本编辑器都好。

图床使用过 Github issues 和 路过图床 ,后来还有一段时间直接存放在本地(会在下面的 OneDrive 同步部分详细介绍),现在在用 picgo-core 和 腾讯云存储配合,这种方式依然存在删除图片的时候非常麻烦的问题,但相比于手动上传到图床获取链接已经好了很多,而且加载速度和直接存放在本地不是一个级别。

3.6 OneDrive 同步

利用 OneDrive 做文件同步是我自己尝试出的一种对 Github 的补充。基本思路是将 clone 的博客仓库直接放到 OneDrive 中,主要原因是 Github commit 时一般都是很多内容一起提交的,在写博客的时候,如果我写了三分之一文章就提交,就觉得怪怪的,简直逼死强迫症。这时候如果要离开实验室回宿舍了,想在宿舍继续编辑,就非常麻烦,总担心之后要解决冲突问题,非常讨厌这个,利用 OneDrive 做第二次同步就没有这种问题了。

另外一个利用 OneDrive 同步解决的核心问题是图片的备份。在 Typora 的「偏好设置—>图像」中,可以选择图片插入时复制到指定路径,这里选择 OneDrive 中的一个文件夹,可以起到图片备份的作用,毕竟对云端图床还是不放心。甚至,要不是 OneDrive 的外链获取不方便,都可以直接用 OneDrive 做图床了。

4. 后记

我写个人博客初心就是想创建一个自留地,所以就不放博客链接了,这里总结一下用到的工具和技术作为结尾。

  • Hugo:基础博客框架
  • LoveIt:Hugo 社区的一款博客主题
  • Valine:文章评论组件
  • LeanCloud:评论数据云存储
  • Github:博客文件存储,Github Pages 和 Github Action 是两个使用的重要功能
  • Git:这里用作博客文件管理
  • Markdown:一种方便的写作语言
  • TOML:一种配置文件格式,用于文章开头的元数据定义
  • Typora:Markdown 编辑器
  • Tencent Cloud: 利用对象存储提供图床服务

希望个人博客能给大家的生活带来一些不一样的东西。

48
14