Build personal blog using hexo+github+cloudflare

Hexo + Github + Cloudflare 搭建个人博客

Hexo部署

1. 安装Node.js

Windows 安装Node.js

点击链接直接安装

打开之后直接无限点击下一步安装就好

安装之后，打开cmd –> 输入以下命令，得到如下截图，即安装成功。

node -v

Linux安装Node.js

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# source bashrc
source ~/.bashrc

# download and install Node.js (you may need to restart the terminal)
nvm install 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.15.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.7.0`

2. 使用npm安装hexo

npm install -g hexo-cli

3. 建立blogs文件夹

我建立了一个名为hexo blogs的文件夹

4. 初始化hexo

打开hexo blogs文件夹输入以下命令

hexo init

命令执行后，文件夹下将自动生成一些文件，如下图所示：

这里，执行命令与需要使用git， 以后都需要使用git。

点击安装(git for windows)[Git - Downloading Package (git-scm.com)]

linux 输入以下命令安装git.

sudo apt-get install git-core

5. 安装主题

以后补充

6. 生成可在浏览器浏览的的代码

hexo clean

hexo g //生成相关代码

hexo s //启动服务，可在本地浏览器浏览

点击地址即可访问, 界面如下图所示

上传至github仓库

先在只是能够在本地访问，我们希望我们的博客能够通过公网IP进行访问。接下来需要将代码放入github仓库，再使用Cloudflare pages展示界面。我们需要准备好一个域名，并将DNS服务器改为Cloudflare提供的DNS服务器。

可参考以下视频:无限空间的免费图床，感谢cloudflare_哔哩哔哩_bilibili

1. 在github创建一个私有仓库

2. 在建立的hexo_blogs文件夹中添加创建的仓库为远程仓库

git init
git add .
git commit -m "hexo init"
git branch -M main
git remote add origin https://github.com/GreenMountain-XY/Blogs.git
git push -u origin main

使用Cloudflare Page部署github仓库内容

1. 打开Cloudflarehttps://www.cloudflare.com/zh-cn/ 并登录

2. 选择Workers和Pages

3. 点击创建，选择Pages,连接到Git

4. 选择刚才创建好的仓库

5. 进行设置，输入构建命令和环境变量

​ 构建命令为

npx hexo generate

环境变量输入为node.js的版本和npm的版本号，可通过以下命令在自己电脑查看。

node -v //查看node.js的版本号

npm-v // 查看npm的版本号

6. 添加域名

部署成功后，点击设置自定义域。

输入之前注册好的域名，或则子域名，我这里输入的是子域名。 yovr.top是我注册的域名。

现在就可以通过blogs.yovr.top域名访问个人博客了。