本博文记录搭建类似本博客网站的方式，可以 0 经济成本完成

整体过程 借助 hexo 框架使用现有主题直接形成网站基本框架，然后部署到 GitHub Pages 和 Cloudflare Pages 上。

1.准备阶段

1.（必须）你需要注册一个 GitHub 账号（如果无法直接打开 github 试试 这个小玩意

2.（非必需）你可以注册一个Cloudflare Pages 它可以将博客的 CDN 加速

2.需要下载的软件

2.1 安装 Node

1.打开 Node 官网，下载并安装和自己系统相配的 Node 的安装程序，否则会出现安装问题。下载地址：https://nodejs.org/en

2.安装完成后，要检查看看是否安装成功。操作如下：在键盘按下 win + R 键，输入 CMD，然后回车，打开 CMD 窗口，执行下面的命令。

1

node -v

看到类似下面的版本信息，则说明安装成功。

2.2.安装 Git

1.打开 Git 官网，下载并安装和自己系统相配的 Git:https://git-scm.com/downloads

2.点击电脑 window 开始按钮，可以搜索到 Git CMD，Git Bash，Git GUI。（主要使用 Git Bash

2.3 下载并安装 vscode （这是一款轻量型的代码编辑器

3.配置 Git 密钥并连接至 Github

3.1 打开 Git Bash 如图

3.2 配置用户名和邮箱

用户名和邮箱可以自己随便取（不用真实也许
这里假设
用户名为：scandi
邮箱：3567140151@qq.com
在上面打开的 Git Bash 中 依次输入下面命令然后回车

1
2

git config --global user.name scandi
git config --global user.email [email protected]

然后通过下面命令检查是否配置成功。

1

git config -l

类似下图即配置成功

3.3 配置公钥连接 Github

3.3.1 执行以下命令生成 ssh 公钥，此公钥用于你的计算机连接 Github

1

ssh-keygen -t rsa -C "你的邮箱"

提示 【Enter file in which to save the key】 直接一路回车即可。

之后打开 C 盘下用户文件夹下的.ssh 的文件夹，会看到以下文件

用记事本打开上述图片中的公钥 【id_rsa.pub】，复制里面的内容，然后开始在 github 中配置 ssh 密钥。

3.3.2 将 SSH KEY 配置到 GitHub

进入 github，点击右上角头像 选择 【settings】，进入设置页后选择 【SSH and GPG keys】，名字随便起，公钥填到 【Key】 那一栏。如图

3.3.3 测试连接，输入以下命令

1

ssh -T [email protected]

第一次连接会提示【Are you sure you want to continue connecting (yes/no/[fingerprint])?】，输入 yes 即可
如图即连接成功

如果是在公司或学校网络，可能会存在防火墙或代理限制，阻止了 SSH 连接。连接没有现实如图信息，则查看下面这篇博文尝试解决！！！

解决博文

4.创建 GitHub.io 仓库

4.1 点击右上角的+按钮，选择 New repository，创建一个<用户名>.github.io 的仓库。

4.2 仓库名字的格式必须为：【<用户名>.github.io】 (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)（不要忘记加.github.io

4.3 可见性必须选择 【Public】 方便第一次部署检查问题，点击 Creat repository 进行创建即可

5.初始化 Hexo 博客

5.1 创建一个文件夹来保存博客源码（我这里选的路径为 D:/college），在文件夹内右键鼠标，选择 【Open Git Bash here】

5.2 在【Git BASH】输入如下命令安装 Hexo

1

npm install -g hexo-cli && hexo -v

5.3 安装完后输入【hexo -v】验证是否安装成功。

1

hexo -v

5.4 初始化 Hexo 项目安装相关依赖。

1
2
3

hexo init “自己取文件名”
cd “上面取的文件名”
npm i

5.5 初始化项目后，college 文件夹中 有如下结构：

5.6 输入 【hexo cl && hexo s】 启动项目

1

hexo cl && hexo s

出现如图

打开浏览器，输入地址：【http://localhost:4000/ 】 ，看到下面的效果，说明你的博客已经构建成功了。

6.将静态博客挂载到 GitHub Pages

6.1 安装 hexo-deployer-git

1

npm install hexo-deployer-git --save

6.2 修改 _config.yml 文件

在 college 目录下的_config.yml，就是整个 Hexo 框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

找到最后一行的配置如图

修改它像下面代码这样的格式

1
2
3
4

deploy:
  type: git
  repository:
  branch: main

然后将 repository 修改为你自己的 github 项目地址即可，还有分支要改为 main 代表主分支（注意缩进）。
你自己的 github 项目地址在下面这里找

总体类似下面这样

6.3 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo 三连）。

（在 Git Bash 上用第一行那个命令，不要全部复制上去）

1
2
3
4
5
6
7

// Git BASH终端
hexo clean && hexo generate && hexo deploy

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

如果出现【Deploy done】，则说明部署成功了。

稍等两分钟，打开浏览器访问：https://college.github.io （注意！这里要用你的仓库名字替换），这时候我们就可以看到博客内容了。

7.将静态博客挂载到 Cloudflare Pages

7.1 打开 Cloudflare Pages，在 【Workers 和 Pages】 中选择 【Pages】 的 【连接到 Git】 如图

然后选择 连接 Github，登录账号，选择你要部署的仓库

点击保存并部署后等待部署完成即可。

提示【成功！您的项目已部署到以下区域：全球】后，浏览器访问：https://college-github-io.pages.dev ，这时候我们就可以看到博客内容了。

这时你也就可以将你的【<用户名>.github.io】的仓库设置为【Private】私库了（不改也行

8.至此 你已经拥有自己的博客网站，不过它还很丑陋，我们接下来可以下载主题来美化它

本博客网站采用的主题是【anzhiyu】
实际上 搜索【hexo 主题】，会有大量主题供你选择，挑一个喜欢的下载就行，每个主题都会提供下载命令，这里我以【next】主题为例（当然【anzhiyu】主题一样的流程，我同时举例

8.1 继续在刚才的 Git Bash 上运行下面命令 下载【next】主题

1
2
3
4
5
6

cd hexo
//下面这个是【next】
git clone https://github.com/theme-next/hexo-theme-next themes/next

//下面这个是【anzhiyu】
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

如下图，即为下载成功

8.1 打开 vscode， 在 vscode 中打开项目文件夹

8.2 新建终端，以后直接在 vscode 上运行命令

8.3 第一次使用需要安装 pug 以及 stylus 的渲染器

1

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

8.4 打开_config.yml 文件，修改主题为【next】或者【anzhiyu】

8.5 覆盖配置

手动将【/themes/next/_config.yml】或者【/themes/anzhiyu/_config.yml】复制到根目录下并重命名为【_config.next.yml】或者【_config.anzhiyu.yml】即可。
如图

9.平时编辑博客和博文的一些基本操作

9.1 每次在编译器上的修改，在网站上是不能同步的，你需要在每次修改后通过下面命令上传，才能反馈给网站产生变化

1
2
3
4
5

//本地预览
hexo cl; hexo s

//推送更新上线
hexo cl; hexo g; hexo d

每次修改后，可以先运行【hexo cl; hexo s】命令，就会生成临时页面效果链接，打开就可以看临时效果，这时候不会对公开网站产生修改变化。
等你觉得修改没问题，想要上线完成修改，再运行【hexo cl; hexo g; hexo d】命令，推送更新上线。

9.2 新建一篇博文

终端中输入下面命令

1

hexo new "博文名称"

回车确认后，在总文件夹中的 source 文件夹的 _posts 文件夹中出现一个新的博文文件（markdown 格式）这样就可以直接对博文进行编辑

9.3 【/scaffolds】 目录下有几个模板文件，其中【post.md】是新建博文模板

修改【post.md】模板 可以使得每次新建的博文文章，会有一段相同的初始化设置，免得每次都重复添加
post.md 模版，仅供参考（建议直接全部复制到 post.md 文件中

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

---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
toc: #【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number: #【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章作者链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---

9.4 当然，主题还有许多功能，可以自行查看主题官方网站（直接搜索就行

9.5 平时我个人更改博客的一些小技巧

首先打开网站，按键盘【f12】，点击如图红色框框的东西

然后再用鼠标对准网页中的元素，比如对准某张图片位置，既可以得到定义所选图片的代码，复制这些代码的部分关键词，然后再回到 vscode 的环境主题文件【_config.next.yml】或者【_config.anzhiyu.yml】中，按 ctrl+f，打开搜索功能，粘贴上刚才的代码关键词，就可以直接修改选中元素

至此！彻底结束喽，以上教程我自己实现的时候是零基础！并不需要任何高端的技能，一开始面对晦涩的名词多有不解，不过没事！我们目的本来就不是要学会它的原理，只是搭建一个较为自由的个人平台，方便自己记录些东西。刚开始可能会出现许多问题，遇到问题可以多问问 ai 详细描述你的困境，一般都能解决（我就是这样子。。。