前期准备
安装hexo
1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server准备图床
注册一个可用的图床，我用的是https://img.tg/ 可免费上传单张5MB以内的图片。
注册Github账号
登入 https://github.com 注册账号，创建私有或公开仓库。
注册vercel账号
登入 https://vercel.com 注册账号，推荐使用 github 账号注册。
网站部署
更换主题
进入 https://hexo.io/themes/ 选择自己喜欢的主题，将主题仓库克隆下载至hexo项目根目录的themes文件夹下，下载完注意删掉 主题仓库中的 .git 与 .github 目录，根据自己的喜好设置主题
设置好后需要修改根目录_config.yml 中的theme字段，并拷贝主题目录下的_config.yml 至根目录_config.{theme_name}.yml
上传github
将hexo项目 上传至 github 仓库中
部署项目
- 在 vercel 创建应用，选择 对应的 github 仓库。
- 修改vercel项目设置 general，InstallCommand 为
npm install hexo-renderer-pug hexo-renderer-stylus hexo-generator-feed hexo-pagecounter，否则某些插件的却是会导致功能缺失。
网站域名配置
- 国内可在 阿里云 或 腾讯云 购买域名，方便备案
- 在 vercel 应用中选择 Add Domain，添加购买的域名，vercel 会提示在 域名云解析商出需要添加的解析记录
- 在阿里云 或 腾讯云 中添加域名解析规则，选择解析路线为默认路线。
- 等待 vercel 域名验证成功，证书添加成功，即可通过域名访问网站。
新增rss订阅
- 在项目根目录下安装插件 npm install hexo-generator-feed
- 修改项目根目录_config.yml
1
2
3
4
5
6
7
8
plugins:
- hexo-generator-feed
feed:
type: atom
path: /atom.xml
limit: 10
encoding: utf-8- 在主题目录下_config.yaml 设置rss 配置
1
2
3
#rss 路径配置
rss: /atom.xml同样修改完主题目录下的_config.yml文件记得要拷贝至根目录下_config.{theme_name}.yml
站点/atom.xml路径为rss订阅地址
新增网页浏览量
使用 hexo-pagecounter 插件，并修改主题中的 layout/_partial/footer.ejs 内容，新增 👀 <b>访问量: </b><span class="s3_pv"></span>
配置
我用的 flexblock 主题，配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# Header
menu:
首页: /
订阅: /atom.xml
# 主页banner图
banner: https://qiniu.sukoshi.xyz/src/images/68686407_p0.jpg
# 站点通知信息
notice: 因为你们的支持让我意识到写文章的价值
# 作者信息
author:
name: OnlyPiglet
avatar: https://ooo.0x0.ooo/2024/06/20/OPb4Zs.jpg
description: 大音希声,大象无形
toc:
max_depth: 3 # 生成 TOC 的最大深度
min_depth: 2 # 生成 TOC 的最小深度
comments:
enable: false
use: 'valine' # valine || disqus
# valine 评论
# docs: https://valine.js.org
# You can get your appid and appkey from https://leancloud.cn
# 这里appId和appKey一定一定要改成自己的，没有的话去 https://leancloud.cn 这个网站注册创建一个
valine:
appId:
appKey:
placeholder: 随便说点什么叭～ # 评论框占位提示符
avatar: mp # Gravatar 头像展示方式
pageSize: 10 # 评论列表分页，每页条数
lang: zh-cn # 多语言支持
visitor: true # 文章访问量统计
recordIP: true # 是否记录评论者IP
enableQQ: false # 是否启用昵称框自动获取QQ昵称和QQ头像，开启后是在昵称框输入QQ号码进行获取
meta: "['nick', 'mail', 'link']" # 评论者相关属性，可选值：['nick']，['nick','mail']，['nick', 'mail', 'link']
requiredFields: "['nick']" # 设置必填项，默认匿名
bilibiliEmoji: true # 是否启用Bilibili表情
# disqus 评论
# docs: https://disqus.com/
disqus:
website:
error: 如果你看不到评论，那么就真的看不到评论 w(゜Д゜)w
# dplayer 视频播放
# docs: http://dplayer.js.org/#/zh-Hans/
dplayer:
enable: true
theme: "#b7daff"
autoplay: false
loop: false
mutex: true
# aplayer 音频播放
# docs: https://aplayer.js.org/#/zh-Hans/
aplayer:
enable: true
theme: "#b7daff"
autoplay: false
loop: false
mutex: true
lrcType: 3
# mathjax LaTeX公式支持
# docs: http://docs.mathjax.org/en/latest/
mathjax:
enable: true
# polyfill 提供老版浏览器对新语法的支持
# website: https://polyfill.io/v3/
polyfill:
enable: false
# jsdelivr镜像域名
# e.g. cdn.example.com
jsdelivr_mirror:
# 国内备案信息
beian:
# 谷歌分析
google_analytics:
# gauges分析
gauges_analytics:
# 百度分析
baidu_analytics:
# 腾讯分析
tencent_analytics:
# 站点ico
favicon: /favicon.ico
#rss 路径配置
rss: /atom.xml
# Social Icon
social_icon:
enable: true
icons:
ins :
zhihu :
weibo :
github : https://github.com/OnlyPiglet
twitter : https://x.com/wswch19941012
OnlyPiglet
热爱生活，保持好奇心
8
1
12
如果你看不到评论，那么就真的看不到评论w(゜Д゜)w