手把手教你搭建CF-Blog，基于Cloudflare Pages的免费高效静态博客架设教程

这份手把手教程专注于教你搭建CF-Blog——一款基于Cloudflare Pages的免费高效静态博客，它将从前期准备入手，逐步讲解模板选择、项目部署、基础配置等核心环节，充分发挥Cloudflare Pages免费托管、全球CDN加速、低延迟访问的优势，让你无需复杂服务器运维，就能快速搭建起稳定流畅的个人博客，内容通俗易懂，适配各类新手用户，助力你轻松拥有一个高性能的静态博客平台。

在个人博客搭建的赛道上,Cloudflare Pages（简称CF Pages）凭借免费全球CDN、自动HTTPS、零服务器成本等优势，成为越来越多开发者的首选，本文将带你从0到1搭建一款基于Cloudflare Pages的CF-Blog，用静态生成器+云端部署的组合，打造属于自己的高效个人博客。

准备工作：搭建前的必备条件

在动手搭建之前,你需要准备好以下工具和账号：

1. Cloudflare账号：前往Cloudflare官网注册，用于托管博客和配置域名解析；
2. 代码托管平台账号：GitHub/GitLab任选其一，用于存储博客源码并触发自动部署；
3. 本地开发环境：安装Node.js（推荐16.x及以上版本）和Git，用于本地生成静态博客内容。

步骤1：本地初始化静态博客项目

静态博客的核心是用Markdown写内容,通过静态生成器转换成HTML页面，这里以最流行的Hexo为例，带你快速初始化项目：

安装Hexo CLI

打开终端,执行以下命令全局安装Hexo命令行工具：

npm install -g hexo-cli

创建博客项目

在本地选择一个空文件夹,执行初始化命令：

hexo init cf-blog
cd cf-blog
npm install

本地预览效果

初始化完成后,启动本地服务器预览博客：

hexo server

打开浏览器访问http://localhost:4000，就能看到默认的Hexo博客页面了，此时你可以尝试修改source/_posts目录下的示例文章，感受Markdown转静态页面的实时效果。

自定义博客主题（可选）

默认主题比较简洁,你可以替换成更美观的主题，比如热门的Next主题：

git clone https://github.com/next-theme/hexo-theme-next.git themes/next

然后修改博客根目录下的_config.yml文件，将theme字段改为next，重启本地服务器即可看到主题变化。

步骤2：将博客源码托管到GitHub

为了让Cloudflare Pages能自动拉取代码并部署，我们需要将本地项目推送到GitHub仓库：

1. 在GitHub上创建一个新的公开仓库（命名可自定义，比如cf-blog）；
2. 回到本地终端,关联远程仓库并推送代码：

   git init
   git add .
   git commit -m "初始化CF-Blog项目"
   git remote add origin https://github.com/你的用户名/cf-blog.git
   git push -u origin main

步骤3：配置Cloudflare Pages自动部署

现在进入核心的云端部署环节,借助Cloudflare Pages实现一键部署：

1. 登录Cloudflare控制台,点击左侧菜单栏的「Pages」，然后点击「创建项目」；
2. 选择「连接到Git」，授权Cloudflare访问你的GitHub仓库，选择刚才创建的cf-blog仓库；
3. 配置构建参数：
   • 构建命令：hexo generate（Hexo生成静态页面的命令）；
   • 输出目录：public（Hexo生成的静态文件存放目录）；
   • 环境变量：可选择添加NODE_VERSION，设置为你本地使用的Node版本（比如18.0），避免构建版本不一致；
4. 点击「部署站点」，等待Cloudflare完成构建和部署，部署成功后，你会得到一个默认的*.pages.dev域名，访问该域名就能看到你的博客了！

步骤4：绑定自定义域名（可选）

如果不想使用默认的pages.dev域名，你可以绑定自己的域名：

1. 确保你的域名已经托管在Cloudflare（若未托管，可在Cloudflare添加域名并完成DNS解析迁移）；
2. 在Cloudflare Pages项目的「自定义域」页面，点击「添加自定义域」，输入你的域名（比如blog.yourdomain.com）；
3. Cloudflare会自动生成DNS解析记录,你只需在域名的DNS管理页面添加对应的CNAME记录，指向默认的*.pages.dev域名；
4. 等待解析生效后,Cloudflare会自动为你的域名配置HTTPS，访问自定义域名即可看到博客。

步骤5：优化CF-Blog的体验与功能

搭建完成后,你可以通过以下方式优化博客：

1. 开启Cloudflare缓存：在Cloudflare控制台的「缓存」设置中，开启页面规则，设置静态资源的缓存策略，提升访问速度；
2. 添加评论系统：集成Valine、Gitalk等评论插件，在Hexo主题配置文件中添加对应参数，实现读者互动；
3. SEO优化：修改_config.yml中的title、description、keywords字段，为每篇文章添加合适的标签，提升搜索引擎收录；
4. 自动化部署：后续只需在本地写好Markdown文章，执行hexo generate后推送到GitHub，Cloudflare Pages会自动触发重新部署，无需手动操作。

基于Cloudflare Pages搭建的CF-Blog，兼具免费、高效、稳定等优势，无需维护服务器，只需专注于内容创作，从本地初始化到云端部署，整个流程只需几步就能完成，即使是新手也能快速上手，现在就动手搭建你的CF-Blog，开启个人内容创作的新篇章吧！