deploy

本次实验使用 Hexo 框架 搭配 ShokaX 主题，通过 GitHub 进行版本管理，并使用 Vercel 托管构建，最后通过 Cloudflare 完成域名解析

# 一、 环境准备与本地部署

首先在本地环境中配置 Node.js 环境，使用 pnpm 作为包管理工具

# 1. 克隆项目与安装

执行以下命令拉取 ShokaX 主题的开箱即用版本并安装依赖：

git clone https://github.com/theme-shoka-x/shokax-can --depth=1
cd shokax-can
pnpm install
hexo s

# 2. 效果预览

拉取 GitHub 开源代码并运行 hexo s 后，在浏览器访问 http://localhost:4000。

---

# 二、 代码版本管理与推送

本地部署完成后，需要将项目代码推送到自己的 GitHub 仓库，以便 Vercel 进行持续集成。

# 1. 创建远程仓库

在 GitHub 上新建一个名为 my-blog（名称自定）的私有或公开仓库。

# 2. 推送到 GitHub

在本地项目根目录下执行：

# 初始化 git（如果克隆时已有 .git 文件夹可跳过此步，但建议重新初始化以解除原作者仓库关联）
rm -rf .git
git init

# 添加远程仓库地址
git remote add origin https://github.com/你的用户名/你的仓库名.git

# 提交并推送
git add .
git commit -m "Initial blog commit"
git branch -M main
git push -u origin main

---

# 三、 线上托管（Vercel）

接下来使用 Vercel 进行自动化构建部署。

1. 登录 Vercel 官网，点击 "Add New" -> "Project"。
2. 导入刚刚推送的 GitHub 仓库。
3. 项目配置：
   • Framework Preset: 选择 Other（或 Vercel 会自动识别为 Hexo）。
   • Build Command: hexo generate
   • Output Directory: public
   • Install Command: pnpm install
4. 点击 Deploy，等待几分钟后，Vercel 会生成一个以 .vercel.app 结尾的临时访问域名。

---

# 四、 域名解析与 CDN 优化

为了专业性和访问速度，我们在 Cloudflare 绑定自己的域名。

1. 在 Vercel 项目面板进入 Settings -> Domains。
2. 登录 Cloudflare 账户，选择 graywitch.xyz 域名。
3. 进入 DNS 设置，添加一条Vercel提示的 A 记录

---

# 五、 实验总结

部署完成后，等待 DNS 全球生效。

• 最终访问地址： 浏览器访问 https://graywitch.xyz 即可看到实时发布的博客。
• 工作流： 以后只需在本地执行 hexo n "文章名" 写完文章后，通过 git push 推送至 GitHub，Vercel 就会自动触发构建并更新网站，实现了零人工干预的自动化运维。