这篇记录一下这个博客从零搭起来的完整流程。

整体链路很简单：

本地写文章 -> GitHub 保存源码 -> Vercel 自动构建部署 -> Cloudflare 管理 DNS -> 阿里云购买域名

最终访问的域名是：

https://xuannn.top

一、准备环境

本地需要先装好几个基础工具：

  • Node.js：用来运行 Hexo 和安装依赖；
  • Git：用来管理博客源码；
  • 一个 GitHub 账号：用来保存代码；
  • 一个 Vercel 账号：用来部署静态站点；
  • 一个 Cloudflare 账号：用来接管 DNS；
  • 一个阿里云账号：用来购买域名。

确认 Node 和 Git 是否可用：

node -v
npm -v
git --version

如果这些命令都能正常输出版本号，就可以继续。

二、初始化 Hexo 博客

这个博客使用的是 Hexo。它适合做个人博客：本地写 Markdown，构建后生成静态 HTML，部署起来比较轻。

先安装 Hexo 命令行工具：

npm install -g hexo-cli

创建博客项目：

hexo init blog
cd blog
npm install

初始化后，目录大概是这样：

blog
├── _config.yml
├── package.json
├── scaffolds
├── source
│   └── _posts
└── themes

其中最常用的是：

  • _config.yml：站点配置；
  • source/_posts：文章目录；
  • themes：主题目录；
  • public：构建后生成的静态文件目录。

可以先启动本地预览：

hexo server

浏览器访问：

http://localhost:4000

看到页面能打开，就说明基础博客已经跑起来了。

三、配置站点信息

主要修改 _config.yml。

我这个站点里比较关键的配置是：

title: Hexo
author: Xn
language: zh-CN
timezone: 'Asia/Shanghai'
url: http://xuannn.top
permalink: :year/:month/:day/:title/
theme: kaze

几个配置的含义：

  • title：网站标题；
  • author：作者；
  • language：语言；
  • timezone：时区；
  • url：最终访问域名；
  • permalink：文章链接格式；
  • theme：使用的主题。

这个博客使用的是 kaze 主题，所以需要把主题文件放到：

themes/kaze

然后在 _config.yml 里指定：

theme: kaze

四、写第一篇文章

Hexo 的文章放在：

source/_posts

可以用命令创建：

hexo new "第一篇博客"

也可以直接在 source/_posts 下新建 Markdown 文件。

一篇文章的基本格式是：

---
title: 第一篇博客
date: 2026-07-07 10:00:00
tags:
- 日常
category: 随笔
---

这里是正文。

写完以后，本地构建检查：

npm run clean
npm run build

也可以本地启动预览：

npm run server

五、把博客源码推到 GitHub

先在 GitHub 上创建一个仓库，比如：

blog

然后在本地项目里初始化 Git：

git init
git add .
git commit -m "初始化博客"
git branch -M main
git remote add origin https://github.com/你的用户名/blog.git
git push -u origin main

后面每次写完文章，就是：

git add source/_posts
git commit -m "更新博客文章"
git push origin main

GitHub 只负责保存源码，真正部署交给 Vercel。

六、用 Vercel 部署博客

进入 Vercel 后，选择从 GitHub 导入项目。

基本流程是：

  1. 登录 Vercel；
  2. 点击 Add New Project；
  3. 选择 GitHub 里的 blog 仓库；
  4. Framework Preset 选择 Hexo，或者保持静态站点配置；
  5. Build Command 填：
npm run build
  1. Output Directory 填：
public
  1. 点击 Deploy。

Vercel 会做几件事：

  • 拉取 GitHub 代码；
  • 安装依赖；
  • 执行 npm run build；
  • 把 public 目录部署成静态网站。

部署成功后，Vercel 会给一个默认域名，例如：

xxx.vercel.app

这个时候博客已经能访问了，只是还不是自己的域名。

七、在阿里云购买域名

我的域名是在阿里云买的：

xuannn.top

购买步骤大概是：

  1. 打开阿里云域名控制台；
  2. 搜索想要的域名；
  3. 选择后缀，比如 .top、.com；
  4. 加入清单并付款；
  5. 完成实名信息。

买完域名后，域名默认通常会使用阿里云自己的 DNS 服务器。

但我后面选择让 Cloudflare 管理 DNS，所以还需要把域名的 DNS 服务器改到 Cloudflare。

八、把域名交给 Cloudflare 管理 DNS

登录 Cloudflare，添加站点：

xuannn.top

Cloudflare 会扫描当前 DNS 记录，然后给出两个 Nameserver，例如形式类似：

xxx.ns.cloudflare.com
yyy.ns.cloudflare.com

这两个值每个人不一样，以 Cloudflare 页面显示为准。

然后回到阿里云域名控制台：

  1. 找到 xuannn.top；
  2. 进入域名管理；
  3. 找到 DNS 服务器设置；
  4. 选择修改 DNS；
  5. 把原来的阿里云 DNS 服务器换成 Cloudflare 给的两个 Nameserver；
  6. 保存。

这一步的意思是：

域名在阿里云购买，但 DNS 解析由 Cloudflare 管理。

修改 Nameserver 后不会立刻全球生效，通常需要等一段时间。快的时候几分钟，慢的时候可能几个小时。

九、在 Vercel 绑定自定义域名

回到 Vercel 项目设置，找到 Domains。

添加域名：

xuannn.top

也可以同时添加：

www.xuannn.top

Vercel 会提示需要配置 DNS 记录。

常见配置是：

类型：CNAME
名称：@
目标：cname.vercel-dns.com

以及：

类型：CNAME
名称：www
目标：cname.vercel-dns.com

在 Cloudflare 的 DNS 页面添加这些记录。

如果 Cloudflare 支持根域名 CNAME Flattening，那么 @ 可以直接 CNAME 到 cname.vercel-dns.com。这也是 Cloudflare 比较省心的地方。

刚开始配置时，我更建议先把 Cloudflare 的代理状态设成 DNS only，也就是灰色云朵。

原因是：

  • Vercel 需要验证域名；
  • 灰色云朵更直接；
  • 等验证通过、HTTPS 正常后，再决定是否开启 Cloudflare 代理。

如果开启 Cloudflare 代理，SSL/TLS 模式建议使用：

Full

不要用 Flexible，否则容易出现重定向循环或者 HTTPS 行为异常。

十、等待 HTTPS 生效

DNS 配好以后，Vercel 会自动签发 HTTPS 证书。

在 Vercel Domains 页面里看到域名状态正常后，就可以访问：

https://xuannn.top

如果访问失败，通常检查这几件事：

  • 阿里云里 Nameserver 是否已经换成 Cloudflare；
  • Cloudflare DNS 记录是否正确；
  • Vercel 里是否添加了相同域名；
  • Cloudflare 代理是否影响了 Vercel 验证；
  • 是否还处在 DNS 生效等待期。

可以用命令检查解析：

nslookup xuannn.top

也可以检查 www：

nslookup www.xuannn.top

十一、日常写作和发布流程

后面写文章就不需要重复搭建了。

日常流程是：

cd D:\Project\blog

新建或修改文章：

source/_posts

本地构建：

npm run clean
npm run build

提交并推送：

git status
git add source/_posts
git commit -m "更新博客文章"
git push origin main

推送到 GitHub 后，Vercel 会自动触发 Production 部署。

也就是说，发布链路变成：

写 Markdown -> git push -> Vercel 自动上线

十二、这个方案的好处

这套方案最舒服的地方是分工清楚。

阿里云只负责域名购买：

我拥有 xuannn.top 这个域名。

Cloudflare 负责 DNS：

子域名怎么指向、解析记录怎么管理，都在 Cloudflare 里做。

GitHub 负责代码：

博客源码和文章历史都有版本记录。

Vercel 负责部署：

每次 push 自动构建，自动上线，自动处理 HTTPS。

Hexo 负责生成静态页面：

我只需要写 Markdown，不需要维护后端服务。

对个人博客来说，这样已经够用了。

不用自己买服务器，不用手动配 Nginx，也不用每次写完文章再传文件。只要本地文章写好，推到 GitHub，剩下的交给 Vercel。

这也是我觉得个人博客值得搭的原因：它不是一个很复杂的系统，但它能把域名、DNS、部署、构建、写作这些东西串起来。搭完以后，再写文章时就会很轻。