说在前面

作为本网站的第一篇post，还是很有意义的。当然也是回顾一下我搭建个人博客的方法。

如果你只是想简单搭建个博客用来放文章，那么看完这篇教程就足矣创建一个还算美观且实用性不错的网站

如果你不仅仅满足于套用现成的主题，想深度定制自己的个人网站样式，那么可以把这系列的文章都看完(当然截止2026.8.8，这个系列还是只有这一篇文章

概览

大致讲解一下搭建网站的流程

个人博客搭建流程图
图1. 个人博客搭建流程图（简要提及所用技术和服务)

我们通过 Github Pages 来为网站提供托管，使用 Cloudflare 免费版来为网站提供 DNS 解析等服务，接着用 Hexo + Butterfly 来生成美观的博客页面。大致流程就是如此。下面来详细解说

流程

P1.域名购买

购买一个自己的域名很不错，除非你想每次看到一个丑陋的 github.io(

域名购买这方面可以去阿里云，腾讯云等等服务商购买。比如我们这里演示阿里云:

查询域名
图2. 在阿里云查询想要购买的域名。如图所示，价格还是很便宜的

当然，在国内服务商购买的域名得实名认证才能正式启用，认证时间大概是30min-1h左右。如果不想实名认证也可以去一些国外服务商处购买域名。

域名管理
图3. 实名认证完域名才能启用

选一个自己心仪的域名就可以开始下一步了！

P2 Hexo + Butterfly 简单搭建网页

这部分就是配置环境，网页样式 Butterfly 会给你配好

环境配置

首先，我们要安装好 npm，node.js，以及git

1
2
3
4
5
6
# Git
winget install --id Git.Git -e --source winget
# Node.js
winget install --id OpenJS.NodeJS -e --source winget
# npm 升级到最新版
npm install -g npm@latest
1
2
3
4
5
6
7
# Git
brew update
brew install git
# Node.js
brew install node
# npm 升级到最新版
npm install -g npm@latest

等下载结束后，运行如下代码检查是否安装成功

1
2
3
4
# 检查版本
git --version
node -v
npm -v

下载 Hexo 以及 Butterfly

找一个空文件夹，用来放你的博客项目

eg. D:/Blog/

然后在博客文件夹下运行

1
2
3
4
npm install -g hexo-cli

hexo init
npm install

下载 Hexo 并初始化

再运行

1
npm install hexo-theme-butterfly

下载 Butterfly 主题，下载之后输入ls并回车，应该会有如下结构

Blog文件夹
图4. 下载成功应该有图中这些文件

之后打开 _config.yml 文件， 搜索 landscape，找到 theme: landscape 把 ladnscape改为
butterfly

运行

1
hexo clean && hexo g && hexo s

如果看到了默认的butterfly主题网页，就说明成功了

Butterfly默认主页
图5. Butterfly主题主页的样式

P3 Github Pages 部署

当然，如果之前没有注册过github的读者先得去注册一个 github :>

创建名为 username.github.io 的仓库，并确认权限是 public。其中 username 替换成你的github用户名

方便起见，统一把仓库名字设置成这样

然后进入博客文件夹，运行

1
npm install hexo-deployer-git --save

打开 _config.yml 文件，修改 deploy 如下

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

其中 username 换成你的github用户名

当然，如果你不想用 SSH，也可以用 HTTPS：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

同时修改url ，修改为url: https://username.github.io

接下来配置 SSH key

首先运行

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

来让git绑定你的github账户

接着运行

1
ssh-keygen -t ed25519 -C "your_email@example.com" # 邮箱换成你注册github用的邮箱

然后一路回车 3 次（不设密码）, 然后运行

1
clip < ~/.ssh/id_ed25519.pub
1
pbcopy < ~/.ssh/id_ed25519.pub

复制公钥

然后在github里，点击头像 → Settings → SSH and GPG keys → New SSH key，把刚刚你复制来的填进去并保存

运行

1
ssh -T git@github.com

问指纹时输入 yes 并回车，如果出现 Hi <用户名>! You've successfully authenticated...就说明成功了

然后进入你的 username.github.io 仓库，在 Settings 里 找到 Pages 配置如下信息

Settings配置
图6. Settings 里 Pages 项的配置

运行

1
hexo clean && hexo g && hexo d

把生成的静态网页推送到仓库里，然后访问 username.github.io ，就能看到你的网页了

如果填入了自己的域名，就可以通过你购买的域名来进入了，比如 我的 bloomisle.cc
当然如果你愿意也可以采用 Github Actions 的方法来自动构建，这里就按下不表

P4 接入 Cloudflare

如果没有购买个人域名，可以直接跳过这个部分

首先是去 Cloudflare 上注册账号，进入 Workers&Pages，点击创建应用，然后选择github，接着选择我们刚刚创建的 username.github.io仓库，接下来一直确认就行。

部署完成之后，可看到 Cloudflare 给我们的域名 xx.pages.dev

然后在你本地的博客文件夹，进入source文件夹，新建文件 CNAME ，不要有后缀，里面放入你的域名。运行 hexo 三件套

然后去给你提供域名购买的服务商那里，把你的域名DNS解析改一下。以阿里云为例：

DNS解析
图7. DNS解析

删去原有的记录，然后确保你创建的记录是这样的。

进入刚刚部署完成的项目的 Custom domain，选择新建 Custom domain，然后填入你的域名

最后确保记录是这样

DNS记录
图8. DNS记录

然后等待，不多久就可以直接通过你的域名访问你的网站了

最后

就这样吧！结尾就不说什么了！