从零搭建Hexo+Cloudflare Pages的个人博客

一、准备工作：安装基础环境

1. 安装Node.js 和 Git 及 VS Code 并且检查是否安装成功

因为Hexo基于Node.js，部署需要Git
Node.js: (https://nodejs.cn/en/download)
Git : (https://git-scm.com/install/windows)
其他工具：VS Code ：(https://code.visualstudio.com/) (后续配置使用方便)

检查:按键盘上的win+r后输入cmd，回车. 输入node -v 和 npm -v 和 git -v,如安装成功则会显示版本

2.安装Hexo

a.打开Hexo 文档: (https://hexo.io/zh-cn/docs/)
b.按照它的教程安装Hexo 注：如果输入 npm install -g hexo-cli 无反应后可以选择换源，并将npm改为cnpm

二、VS Code操作

1.新建一个文件夹用于保存网站代码并用 VS Code 打开,新建终端并选择Git Bash
2.初始化：终端中输入 hexo init heo 注:heo为新建的文件夹名字，可以改变
3.输入cd heo进入heo文件夹,输入cnpm install进行安装注：可输入hexo g,hexo s后复制 “http://localhost:4000/” 并用浏览器打开

三、搭建网站

1.在hexo中选择自己喜欢的主题,如butterfly
2.在终端中输入第一行代码: git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
3.下滑找到npm install hexo-renderer-pug hexo-renderer-stylus –save并把npm改为cnpm并输入
4.在themes目录中找到_config.yml并下滑找到theme,将landscape改为butterfly并保存
5.检查是否应用成功:终端输入hexo cl,hexo g, hexo s后复制”http://localhost:4000/“ 并用浏览器打开

四、网站完善及美化

1.打开butterfly作者的中文文档,复制_config.butterfly.yml，在根目录heo新建一个文件并粘贴进去
2.进入themes文件夹，找到_config.yml文件，复制里面的内容并粘贴到_config.butterfly.yml
3.在_config.butterfly.yml中找到index_jmg，复制一张自己喜欢图片的链接并粘贴在其后面，这样网站界面的背景就会变为所选的图片
4.修改title和author，这样网站标题就改变了

五、关联Github

1.登录GitHub，新建仓库
2.在_config.yml文件最后面输入仓库地址（repo：https://github.com/yyg121/blog）创建分支：(branch: main)
3.GitHub中新建一个token，复制密钥，粘贴到（repo：https://github.com/yyg121/blog 的github前并加上@）
4.终端输入hexo g,hexo d上传到GitHub上

六、部署到Cloudflare Pages上

1.进入Cloudflare Pages（https://www.cloudflare-cn.com/developer-platform/products/pages/）并注册登录
2.点击worker&pages,点击create application，点击下面的get started，点击Import an existing Git repository
3.随后在Build ouput directory里输入’/‘,然后点击Save and Deploy 就成功部署了，这时它会生成一个网站（https://blog-5jg.pages.dev/）

七、后续问题及完善

问题：在我新建的网站上点击follow me后会发现进入的GitHub不是自己的主页
解决方法：打开自己的GitHub仓库，找到文件：index.html,打开并找到https://github.com/xxxxxx ，修改为自己的仓库即 https://github.com/yyg121 这时刷新后再点击follow me就会跳转到自己主页