本文记录博客搭建过程及对博客做的修改

本博客根据以下两个教程搭建：

如何使用 vercel + hexo 搭建博客

使用Vercel+Github搭建个人博客 - 徐艺扬

在此对作者表示感谢。

准备工作#

本博客是由Hexo驱动的静态博客，托管于Vercel，因此需要一个Github账号。

之后会用到Node.js，然后运行

1
npm install hexo-cli -g

安装Hexo-Cli

注意！#

由于Vercel提供的vercel.app在国内已经不能正常访问，因此需要使用域名+CDN加速的方式来保证国内能够正常访问。

你也可以使用同类型的Netlify或者直接将网页部署于Github Pages。

搭建过程#

创建项目#

首先在Vercel上注册一个账号（推荐使用Github账号登陆）

点击Add New-Project创建一个新项目

选择右下角的Browse All Templates，在模板中找到Hexo

230425更新：现在似乎在模板中已经无法找到Hexo，不过仍然可以通过以下链接进行创建：

这是一个链接

原理是从Vercel的Github账户中克隆一个仓库，所以如果未来这个链接也失效的话可以手动Clone这个仓库

不过据我观察这个模板貌似有些旧了，如果能力足够的话建议还是hexo init自己全新创建一个？

然后可以给项目起一个你喜欢的名字，建议把仓库设在Github

稍等片刻，随后便可以看到成功的界面

Vercel会给你的项目提供vercel.app域名，但是国内无法正常访问（悲）

将仓库克隆至本地#

如果你从未接触过Git这个工具的话，我推荐你使用Github Desktop作为日常管理博客的工具。

登录然后点击Clone Repository将刚刚创建的仓库克隆到本地

打开仓库目录右键点击在终端中打开，我们先对博客进行一些初步设置。

安装主题#

一个好看且强大的主题可以让博客更加养眼，而且之后设置是会很方便。

我选用Butterfly。

在仓库根目录下输入

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

安装对应的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

我在这里遇到了一些问题：

根据他的提示运行
Terminal window
1
npm audit fix --force
即可修复

打开根目录下的_config.yml，拉到最后改为butterfly（你安装的主题名）以应用主题。

注意：所有配置项冒号后均有空格

根据主题说明文档相应的修改网站名称、语言等Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

然后将本地的修改同步到Github

等待片刻就可以看到你对网站做的更改了，Vercel会自动部署并邮件通知你

发布文章#

文章存储于/source/posts文件夹下，使用Markdown语法。

你可以参照Hello World中的内容进行修改，随后将文件同步至Github便可以发布文章。

图片可以选择图床或者CDN存储，将获得的链接按以下格式复制到文档里即可插入

1
![名称](链接)

进一步设置#

加速访问#

由于vercel.app无法在国内访问，因此需要额外购买域名并配合CDN加速来保障国内的顺利访问。

购得域名后，首先在Vercel里添加你的域名，随后根据Vercel给出的配置到服务商添加解析记录

然后选择一个CDN，按照指引将你的域名套上CDN，不出意外的话你现在可以用你的域名访问你的博客了。

评论系统#

评论系统对于一个博客来说无疑是十分重要的，这里选择Waline（因为Butterfly主题已内置）

配置方法参照快速上手 | Waline即可，这里不再赘述。

随后根据主题说明文档进行应用即可（如果主题没有内置则比较麻烦，具体步骤可在网上搜索。）

美化&设置#

添加字数统计插件#

安装插件

1
npm install hexo-wordcount --save

然后修改butterfly的主题配置文件找到wordcount设置项

添加留言板#

官方没有给出留言版的页面，但我们可以通过一个普通的页面+评论区来实现此功能。

首先创建一个新的页面

1
hexo new page guestbook

这时会创建\source\guestbook\index.md，你可以编辑此文件来修改留言板页面中的内容

最后在主题配置文件menu配置项中添加以下内容

1
留言板: /comments/  || fas fa-comment-dots

修改图标可以到网上找喜欢的Font Awesome图标然后替换|| 后的内容

空调#

见为你的博客安装上便携小空调 | 安知鱼 (anheyu.com)

石蒜模拟器#

来自dsrkafuu/sakana-widget: Sakana widget for Web. | 网页小组件版本的石蒜模拟器。 (github.com)

经过一番折腾之后摸索出了应用的办法

将下列代码添加至\themes\butterfly\layout\includes\layout.pug中

1
html
2
  head
3
    link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.css')
4
  body
5
    #sakana-widget(style='position:fixed;bottom:10px;right:10px;')
6
    script.
7

8
      function initSakanaWidget() {
9
          new SakanaWidget().mount('#sakana-widget');
10
        }
11

12
    script(async, onload='initSakanaWidget()', src='https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.js')

本站根据Github上作者的说明对人物进行了替换。

Waline相关#

Waline除了评论功能之外，还有其他的功能。这些功能一般可以在init函数中启用。

Butterfly主题需要修改\themes\butterfly\layout\includes\third-party\comments\waline.pug

打开这个文件，可以在里面找到以下字段

1
function initWaline () {
2
      const waline = Waline.init(Object.assign({
3
        el: '#waline-wrap',
4
        serverURL: '!{serverURL}',
5
        pageview: !{lazyload ? false : pageview},
6
        dark: 'html[data-theme="dark"]',
7
        path: window.location.pathname,
8
        comment: !{lazyload ? false : count},
9
      }, !{JSON.stringify(option)}))

之后根据waline官网的说明设置相关功能即可

例子：我想要启用文章反应功能并修改表情选项卡，则根据相关说明修改init函数：

1
function initWaline () {
2
      const waline = Waline.init(Object.assign({
3
        el: '#waline-wrap',
4
        serverURL: '!{serverURL}',
5
+       emoji: [
6
+         '//unpkg.com/@waline/emojis@1.1.0/weibo',
7
+         '//unpkg.com/@waline/emojis@1.1.0/bilibili',
8
+       ],
9
+       reaction: true,
10
        pageview: !{lazyload ? false : pageview},
11
        dark: 'html[data-theme="dark"]',
12
        path: window.location.pathname,
13
        comment: !{lazyload ? false : count},
14
      }, !{JSON.stringify(option)}))