Intro

为了不让博客荒废掉，总要先写点什么。

思来想去，这段时间在整的东西就只有这个博客了。

于是，这篇文章将分享如何搭建出一个这样的博客。

如果你对此感兴趣，或者想要搭出来一个与之相似的博客，那就看下去吧。

博客介绍

采用了Hexo作为框架，主要原因是可以生成静态文件方便在Cloudflare Pages等平台部署。

使用Butterfly作为博客的主题，原因是主题的自定义程度高，而且主题的配置文档很详细。

然后使用Github Actions和Cloudflare Pages来实现博客的自动部署。

准备工作

1、电脑一台

2、提前注册好Github和Cloudflare的账号

3、准备一个域名

环境配置

1.安装Node.js

访问Node.js官网下载安装包进行安装，官网地址为 https://nodejs.org/

这里就不给出具体的安装步骤了，主要是懒得一张张截图了，安装时如果遇到问题可以百度一下。

2.安装git

也是直接访问git的官网下载安装包安装就行，下载地址是 https://git-scm.com/downloads

具体的安装步骤就也不写了，需要配置很多参数，可以自行百度看一下安装教程。

3.将npm修改为国内源

1
npm config set registry=https://registry.npmmirror.com

4.修改git配置

之前已经配置过了可以跳过

设置用户名

1
git config --global user.name '用户名'

设置邮箱

1
git config --global user.email '邮箱' #此处推荐使用Github提供的noreply地址来防止邮箱泄露

给git配置http代理

如果访问不到github可以设置一下，代理地址需要换成自己的。

1
2
git config --global http.proxy 'http://127.0.0.1:10800'
git config --global https.proxy 'http://127.0.0.1:10800'

初始化博客

创建文件夹

创建一个用来存放博客项目的文件夹，并且打开CMD窗口进入到当前文件夹执行下面的操作。

hint：在资源管理器的地址栏中输入cmd可以直接在当前位置打开命令提示符窗口

安装Hexo

1
npm install -g hexo-cli

初始化博客

1
hexo init [博客名称]

安装依赖

1
2
cd [博客名称]
npm install

访问测试

1
hexo server

在浏览器访问http://localhost:4000/,出现下方图片的样子就证明前边的操作没有问题。

没问题之后就可以回到CMD窗口里按ctrl+c来结束运行，接着进行下边的操作。

配置主题

有两种方法下载主题

第一种是直接使用git命令克隆下来主题仓库

第二种是下载主题的压缩包解压后放到主题文件夹中

这里使用第二种方法来操作

下载主题

访问以下网址来到主题发行页面 https://github.com/jerryc127/hexo-theme-butterfly/releases

点击最新发行版中的Source code来下载

接下来的步骤是将压缩包中的文件夹解压到[博客名称]\themes目录中，就像这样：

之后将解压出来的文件夹重命名为butterfly，就像这样：

配置主题

安装插件

回到之前的CMD窗口当中，执行以下命令：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

启用主题

使用Visual Studio Code或者其他编辑器打开博客项目根目录中的_config.yml文件。

将_config.yml文件中的主题改为 butterfly。

保存文件。

测试主题

1
hexo server

然后访问http://localhost:4000/，没有问题的话会发现博客已经变了一个样子了。

这个时候只是启用了主题，但是主题还没有进行配置，我们先进行自动部署这方面的操作，最后再回过头来具体配置主题。

自动部署

创建仓库

访问Github主页，点击右上角＋号下的新建仓库。

在新建仓库页面输入仓库名称和描述，把仓库类型设置为私有，其他的设置默认就好，最后点击创建仓库完成创建。

初始化仓库

回到CMD窗口当中，输入以下命令：

1
2
3
4
5
6
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/[你的用户名]/[你的仓库名].git #直接去仓库页面复制链接
git push -u origin main

第一次提交可能会弹出认证窗口，跳转到浏览器认证就好。

提交成功的话，访问一下仓库页面应该已经有文件了，可以看一下。

创建Cloudflare Pages

在Cloudflare主页找到Workers 和 Pages点进去，点右上角的新建。

在新跳转的页面中选中Pages,然后点击下方的上传资产。

在新页面中填写项目名称,然后点击创建项目。

然后将他下方的演示文件下载下来先传上去，然后点击部署站点。

不出意外，你现在访问他给出来的地址，已经可以访问到演示页面了。

接下来为站点绑定自己的域名，点击下方的添加自定义域，跳转到新的页面。

点击设置自定义域，跳转到下一个页面。

在域中填写自己需要绑定的域名，然后点击继续。

新页面中点击开始CNAME设置

在新页面中获取需要添加的记录内容。然后自行在域名服务商当中的解析页面添加就好。

添加完成后，等待一阵DNS解析刷新，显示如下则表示自定义域已经配置成功：

配置Actions文件

创建流程文件

在.github文件夹下边创建一个新文件夹，名为workflows，并在workflows文件夹中创建deploy.yml文件。

使用Visual Studio Code或者其他编辑器打开workflows目录中的deploy.yml文件，然后复制以下内容到文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
name: Deploy Hexo to Cloudflare Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          submodules: recursive 

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20.16.0'

      - name: Install Dependencies
        run: |
          npm install
          npm install hexo-renderer-pug hexo-renderer-stylus --save
          npm install -g hexo-cli 

      - name: Clean and Generate Static Files
        run: |
          hexo clean
          hexo generate

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: [这里填你在创建Cloudflare Pages项目时所起的项目名称]
          directory: ./
          # Optional: Enable this if you want to have GitHub Deployments triggered
          gitHubToken: ${{ secrets.GH_TOKEN }}
          # Optional: Switch what branch you are publishing to.
          # By default this will be the branch which triggered this workflow
          branch: main
          # Optional: Change the working directory
          # All my website content is in the site folder
          workingDirectory: ./public
          # Optional: Change the Wrangler version, allows you to point to a specific version or a tag such as `beta`
          wranglerVersion: '3'

需要修改的地方只要一处，就是将projectName的内容修改为创建Cloudflare Pages项目时所起的项目名称，不需要加 [ ]，然后保存此文件。

添加secrets

上面所创建的流程文件中，使用到了三个secrets字段，我们需要在仓库中提前添加。

我们先来获取三个secrets字段

1.获取CLOUDFLARE_ACCOUNT_ID，即Cloudflare的账户ID

我们重新回到Cloudflare的页面，复制右边的账户ID，可以先在记事本里临时存一下。

2.获取CLOUDFLARE_API_TOKEN，即Cloudflare的API Token

我们直接点击Cloudflare主页上方的转到，然后搜索API，在出现的结果中点击API令牌跳转到新页面。

在新页面中点击创建令牌。

在新页面中滑动到下方点击自定义令牌里的开始使用。

在跳转到的创建自定义令牌页面中，填写自定义的令牌名称，将权限设置为账户→Cloudflare Pages→编辑，其他的默认即可，点击下方的继续以显示摘要。

然后点击创建令牌来获取令牌，并将API令牌先复制到记事本当中暂时保存。

3.获取GH_TOKEN，即Github的用户Token。

访问以下地址来到Github个人访问令牌页面，https://github.com/settings/tokens

点击生成新令牌、生成新令牌(经典)

在跳转到的新建个人访问令牌（经典）界面，修改以下内容：

备注、有效期、选择作用域，具体看图，

设置完成后点击最下方的生成令牌，跳转到显示令牌的页面。

将获取到的Github个人访问令牌暂时存放在记事本当中。

4.添加secrets

来到存放博客项目的Github仓库当中，点击设置、机密和变量、操作、新建仓库机密

在新页面中依次添加三个secrets到仓库中。

添加完成后如下所示：

提交流程文件至Github仓库

回到CMD窗口，输入以下命令来提交deploy.yml文件。

1
2
3
git add .github/workflows/deploy.yml
git commit -m "提交deploy.yml文件"
git push

提交完成后，Github会自动运行Actions来执行流程文件，我们回到仓库页面，点击操作，看到工作流程显示完成，表示博客文件已经自动构建并且发布到了Cloudflare Pages当中。

访问博客

我们访问博客地址，发现页面已经改变。

至此，博客的自动部署已经成功。

之后在对博客进行修改或者发布文章后，执行以下命令，即可实现自动部署。

1
2
3
git add .
git commit -m "修改博客"
git push

End

本来想着一篇文章就可以把创建博客到配置主题全部写完的

没想到只是写完创建博客已经用了很大的篇幅

关于Butterfly主题配置和博客美化以及评论系统的相关配置就在下一篇文章介绍吧

第一次写文章可能有很多不足，如果发现了问题欢迎在评论中提出来