本博客是如何搭建的

前言

这个博客使用了Hexo 博客框架+Fluid主题+Markdown文档编写，托管在Github Pages服务上（后来迁到Cloudflare Pages）

参考链接：搭建个人博客 — Hexo+Markdown+Github Pages - 知乎 (zhihu.com)

网站搭建

1. 环境准备和框架安装

安装Node.js：访问Node.js官网下载安装，建议nodejs版本18以上。
安装Git：从Git官网获取安装包
安装Hexo：通过npm安装Hexo框架
1
npm install -g hexo-cli

Hexo 是一款快速简洁高效的博客框架，可支持本地、远端服务器运行以及使用Github Page功能进行托管，是用于捣鼓自己的笔记和写文章发布的利器。Hexo是基于Node.js的服务，因此首先需要下载Node.js, 以及Git（用于后续拉取文件）。之后的过程，可完全根据Hexo官方建站文档一步步完成。

2. 建立博客项目

项目初始化

安装完毕hexo，此时可以选择一个空文件夹建立博客站点框架，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

生成的项目目录结构：

.
├── _config.yml    # 站点配置文件
├── package.json
├── scaffolds      # 模板文件夹
├── source         # 资源文件夹
│   ├── _drafts
│   └── _posts
└── themes         # 主题文件夹

其中，有几个文件极为重要：

_config.yml 该文件为网站配置信息，包括网站标题、作者、时间、语言、主题等重要配置和功能。
source/_posts/*.md
source 文件夹为博文的资源文件夹，其中的_posts文件夹储存了markdown文件为网站博文。
themes 文件夹储存了第三方主题。

建立第一个博文

1	`$ hexo new "welcome"`

此时 /source/_posts 文件夹中建立了 welcome.md 文件。

本地运行与测试

接着运行命令

1	`$ hexo server`

可以访问 http://localhost:4000 查看效果。

GitHub Pages部署

1. 建立代码仓库

首先在github账号下建立名为~~<github 用户名>.github.io~~（如果需要使用github提供的域名）的仓库（这将是之后的访问网址），可以使用readme.md进行初始化。

如果使用自定义域名，可以使用其他仓库名

找到 hexo 博客根目录下的 source 文件夹新建一个名为 CNAME的文件，内容为你的域名

2. 配置SSH密钥

之后设置ssh登录。在cmd命令行中输入：

1	`$ ssh-keygen -t rsa -C "GitHub注册邮箱"`

直接三个回车，不需要密码。这时在 C:/Users/<用户名>/.ssh 文件夹下会建立公钥 id_rsa.pub 文件，将id_rsa.pub 文件中内容全部复制。打开Github Settings keys 页面，新建new SSH key，填写任意title（hexo blog）和刚才复制的公钥信息，并Add SSH key。

此时打开Git Bash，输入：

1	`$ ssh git@github.com`

验证ssh是否设置成功。

3. 修改博客部署配置

这时回到博客文件夹，在 _config.yml 文件中修改deploy块的信息：

deploy:
  type: git
  repo: git@github.com:{github用户名}/{仓库名}.git
  branch: main

4. 安装部署插件并发布

在博客文件夹下打开命令行，安装Git部署插件：

1	`$ npm install hexo-deployer-git --save`

最后部署整个博客：

1
2
3

$ hexo clean
$ hexo generate
$ hexo deploy

此时主目录下出现

1	`.deploy_git`

文件夹，该文件夹与github仓库中的文件一致，是生成的静态网页文件。此时访问 {Github用户名}.github.io 即可打开博客网页。

主题配置与个性化

1. 安装Fluid主题

官方教程: :ocean: 一款 Material Design 风格的 Hexo 主题

本博客使用第三方Fluid主题，简洁美观。使用第三方主题的基本方法是先下载对应主题（可在Hexo主题网站上找到），将其放入themes 文件夹，之后在_config.yml 文件中的 theme 块更改名字为对应主题。

或者使用npm安装

1	`npm install --save hexo-theme-fluid`

2. 主题配置要点

修改_config.yml中的theme值为fluid
主题配置文件位于config.fluid.yml
可配置项包括（具体可以参考配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)）：
- 网站logo
- 导航菜单
- 社交链接
- 代码高亮样式
- 文章打赏功能

“站点配置“ 指的 Hexo 博客目录下的 _config.yml

“主题配置“ 指的是 _config.fluid.yml（高优先级）或者theme/fluid/_config.yml

source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录