How did I built this blog

更新于 2023-03-21：目前该文已于 xlog 重新发布，如想看到之前的 hexo，请通过 hexo.180811.xyz 访问。

零：内容框架、托管服务等的选择及必要的准备

内容框架：选择 Hexo

配置较为简单

简洁而快速

是静态内容框架

社区活跃，插件、主题众多

托管服务：选择 Vercel

配置较为省心

CI/CD 方便

既往使用经验较多

可以从官网注册。

包管理器：选择 pnpm

节约磁盘空间

安装速度快

各系统间表现稳定

安装可以参考官方教程。

存储处；选择 GitHub

与 Vercel 深度结合

使用场景多样

全球最大

可以从官网注册。

一：使用 Vercel 模板快速创建 Hexo 网站

在 Vercel 创建新项目

前往 Vercel ，新增项目。

前往模板中心寻找模板

选择 Hexo

创建 Git 文件夹

完成

此时已经搭建完成一个基本的 Hexo 站点。

二：配置网站

本地安装依赖

之前本地已经安装了 pnpm，故直接运行

Copy
pnpm install

结果为

升级 Hexo 版本

观察发现 Hexo 有新稳定版本 6.1.0，故升级。

Copy
pnpm update ----latest

在本地运行 hexo 服务

此时发现有 warn，故修改 warn 处，顺便配置文件进行了 本地化 修改：

此时网页效果为：

选用 YUN 主题

此时感觉网页效果不佳，准备安装并使用 Hexo-Theme-Yun 主题。

Copy
pnpm install hexo-theme-yun@latest --save
hexo config theme yun

配置 YUN theme

在 YUN 主题的配置文件 _config.yun.yml 中做以下配置：

语言设置为中文

Copy
language: zh-CN

配置侧边栏社交图标

特别：关于 RSS

RSS 是本人的心头爱，肯定要进行配置。配置 RSS 不止需要在 _config.yun.yml 中进行配置，还需要安装 hexo-generator-feed，具体如下：

Copy
pnpm install hexo-generator-feed --save

再在_config.yml的末尾加入如下内容作为hexo-generator-feed的配置项：

Copy
feed:
enable: true
limit: 20
hub: https://pubsubhubbub.appspot.com/
content: true
order_by: -date
icon: images/avatar.jpg
autodiscovery: false
template:

再在 _config.yun.yml 中加入以下配置，完成侧边栏的设置。下面的是当时我实际配置文件。

Copy
# 配置侧边栏社交图标
social:
- name: RSS
link: /atom.xml
icon: icon-rss-line
color: orange
- name: GitHub
link: https://github.com/Ovler-Young
icon: icon-github-line
color: "#181717"
- name: E-Mail
link: mailto:ovlertheyoung@gmail.com
icon: icon-mail-line
color: "#8E71C1"
- name: 网易云音乐
link: https://music.163.com/#/user/home?id=310842841
icon: icon-netease-cloud-music-line
color: "#C10D0C"
- name: Telegram
link: https://t.me/Ovler
icon: icon-telegram-line
color: "#0088CC"
- name: Telegram Channel
link: https://t.me/shengxiaoguan
icon: icon-telegram-fill
color: "#0088CC"

配置标语动画

Copy
banner:
enable: true
title:
- Ovler
- 的
- hexo
border: true
cloud:
enable: true
color: "white"
go_down:
enable: true
icon: icon-arrow-down-s-line

配置替换鼠标光标

Copy
cursor:
enable: true

配置侧边栏头像

Copy
avatar:
enable: true
url: /images/avatar.jpg
rounded: true
opacity: 1
mickey_mouse: false
status:
enable: true
emoji: 😀
message: Hello world!

配置页脚

配置了年份和运行时间

Copy
footer:
since: 2022
live_time:
enable: true
prefix: 本博客已运行
suffix: (●'◡'●)
start_time: "2022-03-21T17:05:00"

使用 霞鹜文楷 字体

个人较为喜欢 霞鹜文楷 字体，参考教程后配置。

先安装lxgw-wenkai-webfont字体包：

Copy
pnpm install lxgw-wenkai-webfont --save

再在 _config.yun.yml 中加入以下配置，完成霞鹜文楷字体的设置。

Copy
font:
cdn:
enable: true
lib:
- https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@latest/style.css
serif:
family: "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif"
weight: 900
sans_serif:
family: "'LXGW WenKai', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif"
weight: 400
monospace:
family: "'Source Code Pro', 'Courier New', Courier, Consolas, Monaco, monospace"

配置友链

新建页面：

Copy
hexo new page links

根据文档对友链进行配置：

进入 source/links/index.md，设置 links 字段。

url: 博客链接

avatar: 头像图片链接

name: 怎么称呼？

blog: 站点名称

desc: 一句话描述

color: 代表色，默认是灰色 gray

根据文档，我的友链配置为：

Copy
---
layout: links
title: Friends
date: 2019-06-21 13:06:06
keywords: 链接
description: 一个emm，咖啡馆？
comments: true
links:
- url: https://hexo.180811.xyz
avatar: https://hexo.180811.xyz/images/avatar.jpg
name: Ovler
blog: Ovler 的 Hexo
desc: Feeling tired.
color: "#a5f4e8" # 代表色
email: ovlertheyoung@gmail.com
- url: https://blog.180811.xyz
avatar: https://hexo.180811.xyz/images/avatar.jpg
name: Ovler
blog: Ovler 的 typecho
desc: 以前的博客站，似乎，好久没更新了
color: "#df5749" # 代表色
email: ovlertheyoung@gmail.com
placeholder: 还没想好说些什么 # 默认对友链的描述
tip: 友链加载中～如失败请刷新重试～
---

## 友链

一个emm，咖啡馆？

来坐坐吧！

目前还没啥来加的，大佬们可以通过侧边栏的各种联系方式联系到我来加友链，我会尽快回复的！

目前只有自娱自乐，也希望日后能加多一些。

配置背景

在 _config.yun.yml 中加入以下配置，完成背景的设置：

Copy
bg_image:
enable: true
url: https://cdn.jsdelivr.net/gh/Ovler-Young/blog/source/images/2830.png
dark: https://cdn.jsdelivr.net/gh/Ovler-Young/blog/source/images/2830.png
opacity: 0.8

注意：这里的图片链接最好是图床等加载较快的图片，太慢的话滑动会闪：（

配置页面

配置链接

参考 https://hexo.io/zh-cn/docs/permalinks 中配置修改

配置搜索

配置搜索需要安装 hexo-generator-search，具体如下：

Copy
pnpm install hexo-generator-search --save

再在主题文件_config.yun.yml的末尾加入如下内容作为hexo-generator-feed的配置项：

Copy
# 关闭默认的引擎搜索
engine_search:
enable: false
# 开启本地搜索
local_search:
enable: true

配置 tags

安装 hexo-generator-tag，具体如下 (截图时已安装)：

Copy
pnpm install hexo-generator-tag --save

参考主题的教程, 有

新建 tags 页面，在博客根目录下输入：

Copy
hexo new page tags

修改 source/tags/index.md 的 Front Matter

Copy
---
date: 2017-10-09 19:11:58
comments: false
type: tags
---

在 _config.yun.yml 中设置：

Copy
wordcloud:
enable: true

来使用彩色的词云替代原生的标签云。

配置分类

因为原有配置中已经包含了hexo-generator-tag依赖，配置分类不再需要安装新插件。

新建页面：

Copy
hexo new page categories

修改新生成文档的头部信息：

Copy
---
title: categories
date: 2022-03-31 02:27:20
comments: false
type: categories
---

处理 warngins

Hexo 运行总有好多 warning，让我很头疼。于是查阅资料，在这份资料中发现了解决办法。故，在package.json中加入以下内容：

Copy
"resolutions": {
"stylus": "^0.57.0"
}

将 nib 中的过时 package 强制解析为新版本。在运行 pnpm install , 更新包及依赖。

顺便，它也干掉了 pnpm install 时报的 4 个 deprecated warn.

(nib 咋 GitHub 更新 npm 不发包呢…)

剩下两个 pnpm install 的 deprecated warn 都是来自 CSS 这个两年没维护的老东西了… 暂时无法处理

旧文章导入

之前已有过一个博客，为 typecho 搭建，这次也一并迁移过来。

先在本地安装 hexo-migrator-rss 插件：

Copy
$ pnpm install hexo-migrator-rss --save
Packages: +56
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 529, reused 500, downloaded 27, added 56, done

dependencies:

再运行 hexo migrate rss 命令，我的情况是：

Copy
hexo migrate rss https://180811.xyz/index.php/feed/

成功导入四篇内容。

再对导入的文章做一遍校对，这里就不再赘述了。

另：还要干啥

补完站点介绍与个人页面

写写怎么搞个 HexoPlusPlus 来管理 Hexo

UPD： HexoPlusPlus， 它， achieved 了…… 等替代品 Wexagonal 变得可用中…

还有啊，别做鸽子了：（

不过感谢你们的催更，嘻嘻

绑定网址

为旧文章打 tag

调整配色和背景图片

主要参考资料