光年旅行者:技术博客的诞生

自2017年8月以来,我一直在使用 WordPress 来撰写关于我的日常生活的博客。但我一直想创建一个专用于存放技术文章的新的技术博客,只不过这个想法由于种种原因迟迟没有实施。现在,我终于下定决心了来搞一个只属于我自己的技术博客了。

Step 0: 选择工具

从零开始搭建一个博客对我来说并不容易,尤其是在对网络开发技术知之甚少的情况下。我决定选择一个博客工具,而不是从头开始构建我的博客。我最终选择了 Hexo,一种流行的静态站点生成工具。我的一些朋友也在使用 Hexo 制作他们的博客。

Hexo 将 Markdown 格式的文章草稿转换为 HTML 格式的渲染好的博客文章,这其中大多数繁琐的工作都由 Hexo 处理。我们只需要专注于撰写文章就可以了。(至少理论上是这样 >_<)

在 Hexo 中,theme 定义了网站和博客文章的外观。Hexo 带有一个名为 Landscape 的内置主题。 Hexo Showcase 上还有许多可爱的主题。我可以直接使用其中一个主题。但我的内心低语萦绕:要为自己的技术博客做一个独一无二的主题。那就开始吧!

Step 1: 挑选字体

我一直喜欢使用免费和开源的字体。但是去哪里发掘字体呢?欸,不是开玩笑,但我发现 Crusader King III 的 Modding 维基页面 非常有用。页面上说可以在 Font Squirrel、Cool Text、Vic Fieger 的网站和 Google Fonts 上找到许多的宝藏字体。不过,适用于中文的字体太少了,思来想去其实也就那几个。可以做的选择不多。

Step 2: 制作一个简单的布局

关于网站布局,我想找一些现有的博客网站/主题参考。例如,在不接触 Hexo 引擎源码的情况下,通过考察 Hexo 本身内置的流行主题:Landscape 等。

按照 Hexo 文档中的 指南,我在几分钟内制作了一个基本主题。

Hexo 使用模板渲染引擎将 Markdown 渲染成 HTML。借助于渲染引擎,我们能以编程方法来控制渲染结果。而 Hexo 官方支持多种渲染引擎。在所有引擎中,我选择使用 EJS,即嵌入式 JavaScript 引擎。EJS 与原生 JavaScript 的基本语法是相同的,因此非常容易上手。

Step 3: 授予名字

完成基本布局后,我想给主题起个漂亮的名字。Alisha 浮现在我的脑海中。这是我最喜欢的角色扮演游戏/动漫《热情传说》中的角色名称。

我想给博客命名为 Lightyears Traveler,其灵感来源于 Square Enix 发行的PRG《八方旅人 Octopath Traveler》。

我在 GitHub Actions 上部署了博客和主题——大功告成。Alisha 现在还是一个非常简单的主题。就把这当作是她打怪升级的起点吧。

好像不知不觉就把技术文章写成一篇中二的文章了…… 咳咳,See you next time~