本网站建立依附于Github Pages，使用到的框架是Hexo（基于Node.js），使用的主题是Volantis，图床使用Github自行搭建。目前用到的外部支持有：Busuanzi、Giscus、Parallax等。
后置教程：
搭建参考教程链接：
主要步骤
一. 安装Git和Node.js
- Git官网：https://nodejs.org/en/download/
- 检查是否安装成功命令（cmd）：
git--version
- 检查是否安装成功命令（cmd）：
- Node.js官网：https://nodejs.org/en/download/
- 检查是否安装成功命令（cmd）：
node -v和npm -v
- 检查是否安装成功命令（cmd）：
二. 本地部署Hexo博客
1. 新建文件夹
- 空文件夹名：用户名.github.io（用户名为github用户名）
2. 安装Hexo
- 右键Git Bash Here，输入命令：
$ npm install hexo-cli -g - 检查是否安装成功命令：hexo -v
- 安装一键部署插件：
npm install hexo-deployer-git --save
3. hexo初始化并安装依赖
- hexo init
- npm install
- Hexo文件夹目录结构：
4. 生成页面并本地预览
- hexo g && hexo s
- 切换端口号预览：hexo server -p 5000
5. 修改_config中的主题为volantis
1 | theme: volantis |
6. 下载Volantis主题，编译查看效果
- 安装主题：
npm i hexo-theme-volantis - 安装 Hexo 搜索的依赖包：
npm i hexo-generator-search hexo-generator-json-content - 安装 Stylus 渲染器：
npm i hexo-renderer-stylus
7. 创建Volantis主题所需要的页面
参考链接：https://blog.csdn.net/qq_44161695/article/details/117648144
创建分类：hexo new page “categories”，并修改内容为：
1
2
3
4
5
6
7---
layout: category
index: true
title: 所有分类
sidebar: [blogger]
date: 2022-06-08 18:09:42
---创建标签：hexo new page “tags”，并修改内容为：
1
2
3
4
5
6
7---
layout: tag
index: true
title: 所有标签
sidebar: [blogger]
date: 2022-06-08 18:10:12
---创建关于我：hexo new page “about”，并修改内容为：
1
2
3
4
5
6
7
8
9---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
valine:
placeholder: 有什么想对我说的呢？
date: 2022-06-08 18:10:36
---创建友链：hexo new page “friends”
8. 主题样式配置
- 新建_config.volantis.yaml，参考Volantis官网源码修改_config.volantis.
- yaml文件：https://github.com/volantis-x/community/blob/main/_config.volantis.yml
9. 常用命令
1 | hexo new "name" # 新建文章 |
10. tips
- Hexo 设置显示文章摘要，首页不显示全文
Hexo 主页文章列表默认会显示文章全文，浏览时很不方便，可以在文章中插入<!--more-->进行分段。该代码前面的内容会作为摘要显示，而后面的内容会替换为 “Read More” 隐藏起来。 - 连接不上Github：
https://blog.csdn.net/sinat_32017511/article/details/115762643
可以尝试在.git/config中增加：
1
2[http]
sslVerify = false最终解决方案：重新Clone（orz
三. 部署到Github
- Github官网：https://github.com/
1. 创建仓库：仓库名：用户名.github.io
2. 本地配置git username和git useremail
1
2git config --global user.name "Name"
git config --global user.email "Email"3. SSH-key配置
- 参考链接：https://zhuanlan.zhihu.com/p/111614119
- 本地生成密钥：
1
ssh-keygen -t rsa -C "Email"
- 打开：C:/Users/用户名/.ssh/id_rsa.pub，并全选复制。
- 在Github-Settings新建SSH，并粘贴。
- 本地输入以下命令检查是否成功连接：
1
ssh -T git@github.com
4. 在_config.yaml中加入deploy配置
1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:panakot/panakot.github.io.git
branch: master5. 部署网页并查看效果
1
hexo d
四. 使用github建立图床
1. 新建Github仓库
2. 下载图片并上传到Github仓库
3. 通过链接访问图片
格式示例：https://fastly.jsdelivr.net/gh/YaelCassini/MyGraphBed/note/202206141355.jpg
- 其中，YaelCassini为github的username，MyGraphBed为我创建的仓库名称，而note/202206141355.jpg为仓库内图片的路径
五. 配置插件
1. 配置计数busuanzi
2. 配置插件giscus：
- 官网：https://giscus.app/zh-CN
- 参考资料：
六. 多设备管理源码
- 参考链接：
- Github新建仓库YealCassini_BlogCode(可以私有)，以使用git管理Hexo源码
- 将源码传到Github仓库，gitignore参考设置如下：
1
2
3
4
5
6
7.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/新设备：
- 安装Git和Node.js
- 生成SSH key并添加到github
- 命令行clone源码并安装需要的库：
- git clone
- npm install
- npm install hexo-deployer-git –save
