在折腾了许多方案后,我最后还是选择了hexo这个纯静态博客框架,主要因为比起自己找个稳定的服务器,github+cloudflare在我看来要更加靠谱。

还有1%的理由是相较于需要维持数据库php运行的博客框架,这种纯静态博客可能对环境的影响更小吧,毕竟目前是个只有我自己关注的博客,时刻占用着一丢丢服务器的运行能力属实浪费

相关软件与账号

部署Hexo首先需要准备在电脑上安装好以下软件以及注册以下账号

1.git

2.node.js

3.Github

4.Cloudflare

5.自己的域名

部署hexo

windows

选择一个文件夹,打开终端,输入以下指令

1.安装hexo

1
npm install -g hexo-cli

2.初始化hexo项目

1
hexo init

这样hexo所需的文件就都会下载到这个文件夹里

3.安装stellar主题

我个人比较喜欢这类没多少花里胡哨功能的主题,安装方式也很简单,在博客文件夹里输入以下指令

1
npm i hexo-theme-stellar

blog/_config.yml 文件中找到并修改:

1
theme:stellar

具体的主题功能与美化过程会另外写一篇文章详细记述。

3.创建新文章

1
hexo new <title>

输入想要的标题,这样在./source/_post中就会生成markdown文件

上传到Github

创建github仓库

创建一个私有仓库来存放博客文件,获取git连接

image-20241201162431750

在博客文件夹中右键打开git bash,输入(git链接替换为自己的)

1
git clone https://github.com/KaBu-Chino/blog.git

将之前生成的hexo文件都复制到该文件夹中,以后的任何修改都可以通过git上传到自己的github仓库中

上传命令

1.首次上传

1
2
3
4
git init
git add .
git commit -m "Initial commit"
git push -u origin main

2.后续更新

1
2
3
git add .
git commit -m "xxxxx"
git push -u origin main

Cloudflare Pages部署

1.找到Cloudflare官网中的Workers和Pages,并通过连接git,让cloudflare连接到自己的博客仓库,创建一个新的pages页面

image-20241201163149182

image-20241201163215431

构建命令填写npm install;npm run build

构建输出填写public

配置环境变量 NODE_VERSION 和 NPM_VERSION ,选择你电脑里的版本号

image-20241201163444875

image-20241201163455800

等待一分钟不到的时间就可以完成博客的部署,在自定义域中可以将博客域名换成自己的

image-20241201163616789

之后github仓库中的文件发生任意改动,Cloudflare Pages都会自动根据最新的内容自动更新博客网页