注意:这是一篇教程性质的文章,但为了说明的简洁性并不会讲解所有细节。我默认这篇文章的读者具有一定的信息检索能力,并具备各方面的基本知识。

心血来潮决定把个人博客搬迁到自己的网站上,因此采取这种方法进行搭建,并记录一波搭建流程,大概有以下几个步骤:

  • 准备一个 Github page 的仓库
  • 准备 hexo 框架
  • 初始化你的博客
  • 部署到服务器端

除此之外,还会提到一些关于博客日常维护和美化的方式。(如果之后研究得比较顺利,或许还可以分享一些定制化、调用第三方 api、性能优化等方面的内容)

准备一个Github仓库

一个 Github page 对应于一个名称以 .github.io 结尾的仓库,仓库的名称即为 Github page 的地址。与此相关需要做的工作包括:

  • 注册一个 Github 账号
  • 在本地配置 git
  • (可选)配置 git 的用户名、邮箱、配置 ssh 公钥等

上述操作可自行完成,仓库创建好后可以在其中放置一个 README.md 文件,再访问对应 Github page 的地址,可以发现 README 文件的内容已经在其中显示了,至此 Github page 的准备已经完成。

准备hexo框架

hexo 框架的安装需要 Node.js,因此需要先安装 Node.js,可以命令行运行 npm -v 验证其是否已经安装成功(正常情况下应当输出一个形如 6.14.8 的版本号)。

安装Node.js完成后,使用 npm install -g hexo-cli 来安装hexo框架,同样可以在命令行使用 hexo -v 来检查其是否安装成功。

初始化你的博客

首先在你想要的位置创建一个文件夹,然后将工作目录切换到这个文件夹(windows下可以在右键菜单选择“Git Bash Here”,其他系统可能要经过一系列 cd 操作)。

工作目录切换完成后,工作目录所在的文件夹就将成为你的博客所在的文件夹。使用 hexo init 来把这个文件夹初始化成一个博客文件夹,然后使用 hexo g 来生成网站,因为你还没有创建博客文章,因此其中会自带一篇 Hello World 的文章。

如果你想要观察网站的效果,可以使用 hexo s 将生成的网站挂载到本地服务器,然后在浏览器访问 localhost:4000,就可以看到效果了。

将博客部署到服务器端

当你对自己博客的效果满意后,便可以部署到服务器端。

因为此处要部署到 Github page,因此以部署到 Github 为例。首先需要安装 hexo-deployer-git 模块,在博客文件夹目录下,运行 npm install hexo-deployer-git --save 来进行安装。

然后修改博客的配置文件,在目录中有一个 _config.yml,用适当的文本编辑器打开,找到其中的 # Deployment 一项,将其修改为形如以下形式:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:LittleNyima/littlenyima.github.io.git
branch: master

其中 repository 一项中填自己仓库的 git 地址,这个地址可以在 Github 的仓库页面找到,如果没有配置 ssh 公钥,应当使用 https:// 开头的地址,否则推荐使用 git@ 开头的地址。

branch 一项中填写希望推送到的分支,如果你对 git 不够了解,可以直接填入 master main(更新:在无特殊设置的情况下,Github 的默认分支名已经从 master 变为 main)。

修改这一项的同时,也可以顺便修改一下配置文件中的其他项,例如站点名称、作者等信息。

在以上的一切都配置妥当后,使用 hexo d 命令将其部署到服务器端,部署完成后再访问对应 Github page 页面,应当可以看到你的博客页面,至此,个人博客已经部署成功。

注意:之后每次对博客进行修改后,在部署前都应当先使用 hexo g 来更新文件。

如果想要添加博客,可以使用命令行的 hexo new 命令,也可以直接在 source/_posts/ 创建新的文件。

博客的美化——使用主题

hexo 框架可以使用一系列主题对博客进行美化,访问 https://hexo.io/themes/ 来获取主题。一般来说各种主题都会随附比较详细的使用文档,这里以我个人使用的 butterfly 主题(3.2.0版本)为例讲解主题的使用方式。

首先获取主题,主题的获取方式一般可以从 git 仓库进行 clone,clone 到 themes/ 文件夹下。例如:

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

然后修改 _config.yml 文件,修改 theme 的取值:

theme: butterfly

然后安装所需插件:npm install hexo-renderer-pug hexo-renderer-stylus。此时重新生成文件并挂载,可以发现主题发生了变化。

butterfly 主题提供了比较方便且详尽的定制化方法,具体可以参阅其文档。下面讲解一些比较经常用到的定制化方法。

themes/butterfly/ 文件夹下同样包含一个 _config.yml 文件,将其复制到博客的根目录下并重命名为 _config.butterfly.yml,主题的大多数内容可以在其中修改。这个新的配置文件具有较高优先级,因此当其中内容与基础配置文件冲突时,会发生覆盖。

在这个配置文件中同样具有比较详尽的注释与使用方式示例,常用的有:

  • 菜单栏的设置:在 menu 项中加入条目,例如要在菜单栏加入文字为“首頁”,超链接地址为 /,图标为 home 图标的项目,可以加入 首頁: / || fas fa-home 的条目。

    fas fa-home 是 Font-Awesome 图标在 yaml 文件中的使用形式。如果需要使用 Font-Awesome 图标,可以访问 https://fontawesome.com/icons,在其中找到所需的图标并使用。

    注意,加入条目后为了防止链接到不存在的页面,需要创建相应的页面。以标签页为例,使用 hexo new page tags 创建新的页面,然后修改 source/tags/index.md 文件头部的配置信息,例如:

    1
    2
    3
    title: 標籤
    date: 2020-10-18 18:18:06
    type: "tags"

    这部分配置信息的语法规则与 yaml 的语法规则相同,对于一些特定页面,需要设置 type。

  • 代码风格设置:包括代码块主题、复制按钮、显示语言、支持收起、自动换行等项目。

  • 社交图标设置:与菜单栏设置方法类似,在 social 条目下加入项目,例如 fab fa-github: https://github.com/LittleNyima || Github,便可在名片底部插入一个社交图标。

  • 网站各部分图片设置:包括网站图标、头像、网站头图、背景图等内容。

  • 其他项目的设置:请参阅文件内容与注释。

有关使用 hexo 配置博客的基本知识大概就是这些,当然也有一些潜在的问题,例如如何备份博客环境、使用中文标签会导致 url 中出现中文字符等内容,仍有待解决,如果找得到解决方案的话或许会在以后的博客里继续更新。(发出咕咕咕的声音)

最后,如果大家对我的博客感兴趣,欢迎持续关注!