部署hexo博客，并托管到cloudflare,实现自动上传博客

一、准备工作

在开始之前，确保你的本地环境满足以下要求：

• Node.js：Hexo 是一个基于 Node.js 的静态博客框架，建议安装 LTS 版本（可以通过 node -v 检查是否安装）。
• Git：用于版本控制和将博客推送到 GitHub（可以通过 git –version 检查）。
• GitHub 账户：用于托管博客的源代码。
• Cloudflare 账户：用于托管静态博客并绑定域名。
• 已有域名：确保你已经在域名提供商（如 Namecheap、GoDaddy 或 Cloudflare）处购买了域名，并可以通过 Cloudflare 管理。

二、创建 Hexo 博客

1. 安装 Hexo CLI
   打开终端（Windows 用 CMD 或 PowerShell，Mac/Linux 用 Terminal），运行以下命令全局安装 Hexo：

npm install -g hexo-cli

2. 初始化 Hexo 项目
   选择一个目录（例如 ~/my-blog），初始化一个新的 Hexo 博客：

hexo init my-blog
cd my-blog
npm install

这会生成一个 Hexo 项目目录，包含博客的基本文件结构。
3. 启动本地服务器测试
运行以下命令启动本地服务器，预览博客：

hexo server

打开浏览器，访问 http://localhost:4000，你应该能看到一个默认的 Hexo 博客页面。
4. 生成静态文件
Hexo 会将 Markdown 文件生成静态 HTML 文件，运行以下命令：

hexo generate

生成的静态文件会保存在 public/ 目录下，这是稍后需要部署的内容。
5. （可选）自定义博客修改主题：

• Hexo 支持多种主题，可以在 Hexo 主题网站 挑选一个，下载后解压到 themes/ 目录，然后修改 _config.yml 中的 theme 字段。
• 编写文章：在 source/_posts/ 目录下创建 Markdown 文件，撰写博客内容。
• 配置站点：在 _config.yml 中设置博客标题、作者、语言等信息。

三、将博客源码托管到 GitHub##

Hexo 的源文件需要托管到 GitHub，Cloudflare Pages 会从这里拉取代码并构建。

1. 创建 GitHub 仓库

• 登录 GitHub，点击右上角的 “+” 号，选择 “New repository”。
• 仓库名称随意（如 my-blog），可以选择公开或私有。
• 创建后，复制仓库的 HTTPS 或 SSH 地址（例如 https://github.com/your-username/my-blog.git）。

2. 将本地项目推送到 GitHub

• 在 Hexo 项目目录（my-blog）中，初始化 Git 并推送代码：

git init
git add .
git commit -m "Initial commit"
git remote add origin <你的仓库地址>
git branch -M main
git push -u origin main

完成后，你的 Hexo 源代码应该已经上传到 GitHub。

四、部署到 Cloudflare Pages

Cloudflare Pages 是一个静态网站托管平台，适合部署 Hexo 生成的静态文件。

1. 登录 Cloudflare 并创建项目

• 访问 Cloudflare 仪表盘，登录你的账户。
• 在左侧菜单中选择 Pages > Create a project > Connect to Git.
• 授权 Cloudflare 访问你的 GitHub 账户，选择你刚创建的仓库（例如 my-blog）。

2. 配置构建设置

在创建项目的配置页面，填写以下信息：

• Project name：随意命名（如 my-blog）。
• Production branch：默认是 main（或你的主分支名称）。
• Build settings：
  • Framework preset：选择 “Hexo” 或 “None”（如果没有 Hexo 选项）。
  • Build command：输入 npm install && hexo generate。
  • Build output directory：输入 public（Hexo 的静态文件输出目录）。
• Environment variables（可选）：如果需要指定 Node.js 版本，点击 “Advanced” 添加：
  • Key: NODE_VERSION
  • Value: 18（或当前 LTS 版本号）。
  • 点击 Save and Deploy。

3. 等待部署完成

Cloudflare 会自动拉取你的 GitHub 仓库代码，运行构建命令，生成静态文件并部署。首次部署可能需要几分钟。完成后，你会看到一个默认的 URL，例如 https://my-blog.pages.dev。

五、绑定自定义域名

既然你已经有域名，接下来将博客绑定到你的指定域名（如 blog.example.com 或 example.com）。

1. 将域名添加到 Cloudflare

• 在 Cloudflare 仪表盘中，点击 Add a Site（或选择现有站点）。
• 输入你的域名（例如 example.com），按照提示将域名提供商的 Nameservers 更换为 Cloudflare 提供的 Nameservers（在域名提供商的 DNS 设置中修改）。
• 等待 DNS 生效（通常几小时，最多 24 小时）。

2. 配置 DNS 记录

• 在 Cloudflare 的域名管理页面，选择你的域名，进入 DNS 选项卡。
• 添加一条 CNAME 记录：
  • Type：CNAME
  • Name：你想用的子域名（例如 blog 表示 blog.example.com，如果是根域名则用 @）。
  • Target：你的 Cloudflare Pages URL（例如 my-blog.pages.dev）。
  • Proxy status：开启代理（橙色云图标），以启用 Cloudflare 的 CDN 和安全功能。
• 保存后，等待 DNS 记录生效。

3. 在 Cloudflare Pages 中绑定域名

• 返回到 Cloudflare Pages 的项目页面（my-blog）。
• 点击 Custom domains > Set up a domain。
• 输入你的域名（例如 blog.example.com 或 example.com）。
• Cloudflare 会自动验证 DNS 设置并启用 HTTPS（可能需要几分钟）。
• 如果需要根域名（如 example.com），确保 DNS 中的 CNAME 记录正确指向 Pages URL。

4. （可选）在 Hexo 中设置 CNAME 文件

为确保博客在自定义域名下正常工作，在 Hexo 的 source/ 目录下创建一个 CNAME 文件（无后缀名），内容为你的域名：

blog.example.com

然后重新生成并推送：

hexo generate
git add .
git commit -m "Add CNAME"
git push

这会触发 Cloudflare Pages 重新部署。

六、验证和优化访问你的博客

1. 打开浏览器，输入你的域名（例如 blog.example.com），确认博客可以正常访问，且地址栏显示 HTTPS（小绿锁）。
2. 自动部署
   每次你更新博客（例如新增文章或修改配置），运行以下命令：

hexo generate
git add .
git commit -m "Update blog"
git push

Cloudflare Pages 会检测到 GitHub 仓库的变更，自动构建并部署。
3. 优化建议

• 启用 Cloudflare 加速：在 Cloudflare 的 Speed 选项卡中启用缓存和优化（如 Minify HTML/CSS/JS）。
• SEO 设置：在 Hexo 的 _config.yml 中配置 url 和 permalink，确保链接与你的自定义域名一致。
• 备份：定期备份你的 GitHub 仓库，以防止数据丢失。