hexo+cf+github免费搭建博客

下面提供一个非常详细的教程，介绍如何利用 Cloudflare、Hexo 与 GitHub Pages 从零开始搭建一个个人博客网站。整个流程包括本地环境安装、Hexo 项目的创建与配置、部署到 GitHub Pages 以及在 Cloudflare 上配置自定义域名和 HTTPS。下面逐步说明每一个步骤和所需的命令及注意事项。

一、搭建本地开发环境

1.1 安装 Node.js

Hexo 基于 Node.js，因此首先需要安装 Node.js。

  • 下载地址：访问 nodejs.org 并下载安装包。建议安装 LTS（长期支持）版本。
  • 安装步骤（以 Windows 为例）：
    1. 下载 Windows Installer（.msi）并运行。
    2. 按照安装向导的提示一路点击“下一步”，保持默认设置。
    3. 安装完成后，在命令行（CMD 或 PowerShell）输入：
      1
      2
      node -v
      npm -v
      确认显示版本号。

（参考 Hexo 教程中对 Node.js 的说明）

1.2 安装 Git

Git 用于版本控制和将博客部署到 GitHub Pages。

  • 下载地址：访问 git-scm.com 下载适合你操作系统的安装包。
  • 安装步骤（以 Windows 为例）：
    1. 下载 Git for Windows 安装包并运行安装向导。
    2. 默认配置通常已足够，新手可以一路点击“Next”完成安装。
    3. 安装完成后，在命令行中输入：
      1
      git --version
      确认 Git 已正确安装。

1.3 安装 Hexo CLI

Hexo CLI 是 Hexo 的命令行工具，用于初始化、生成和部署博客。
在命令行中执行：

1
npm install -g hexo-cli

等待安装完成后，输入：

1
hexo -v

确认显示 Hexo 的版本信息。

以上步骤确保你的本地开发环境已经就绪。

二、创建并配置 Hexo 项目

2.1 初始化 Hexo 博客项目

  1. 在本地选择一个目录（例如 D:\BlogProjects）打开命令行或 Git Bash，然后运行：

    1
    2
    3
    hexo init my-blog
    cd my-blog
    npm install

    这会自动下载 Hexo 所需的依赖包，建立一个基本的博客结构。

    生成的目录结构通常包括：

    • scaffolds/：新建文章模板；
    • source/：存放文章（一般在 source/_posts 下）；
    • themes/：主题目录（默认主题通常是 Landscape）；
    • _config.yml：全局配置文件。

参考知乎专栏“从零开始搭建个人博客（超详细）”对 Hexo 项目结构的说明()。

2.2 编写内容与预览

  • 修改配置：打开项目根目录下的 _config.yml，根据需求修改博客标题、作者、语言、URL 等信息。

  • 写文章：在 source/_posts/ 下创建 Markdown 格式的文章文件，例如 hello-world.md。

  • 本地预览：执行以下命令启动本地服务器：

    1
    hexo server

    默认会在 http://localhost:4000 打开预览页面。可在浏览器中查看效果。

  • 当文章和配置调整好后，生成静态文件：

    1
    hexo generate

三、将 Hexo 部署到 GitHub Pages

GitHub Pages 可以免费托管静态网站，非常适合 Hexo 博客。

3.1 在 GitHub 上创建仓库

  1. 登录 GitHub，点击右上角“New”创建一个新仓库。

    • 如果希望使用自定义域名并直接部署在根域名下，建议仓库名称命名为 username.github.io（其中 username 替换为你的 GitHub 用户名）；
    • 也可以创建其他仓库（如 blog），但后续需要在 Cloudflare 中配置 CNAME 指向该仓库的 GitHub Pages 地址。

  2. 不必初始化仓库（不需要 README 文件等），稍后由 Hexo 部署生成的文件填充仓库。

3.2 安装 Hexo 部署插件

在项目根目录下运行：

1
npm install hexo-deployer-git --save

这个插件将帮助 Hexo 将生成的静态文件推送到 GitHub 仓库。

3.3 配置部署信息

编辑 Hexo 根目录下的 _config.yml 文件，找到或添加 deploy 部分，配置如下（根据你的仓库情况调整）：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:YourUsername/YourRepoName.git
  branch: main

说明：

  • YourUsername 替换成你的 GitHub 用户名；
  • YourRepoName 替换成你创建的仓库名称（例如若仓库名称是 username.github.io，直接填入）；
  • 如果 GitHub 默认分支为 master，则将 branch 改为 master。

3.4 部署博客到 GitHub Pages

在命令行中执行：

1
hexo clean && hexo generate && hexo deploy
  • hexo clean 清除缓存；
  • hexo generate 生成静态文件；
  • hexo deploy 将生成的静态文件提交到 GitHub 仓库。

部署成功后，可在 GitHub 仓库对应分支中看到所有博客文件。GitHub Pages 会自动根据这些文件发布网站。
访问 https://YourUsername.github.io 检查网站是否正常显示。

更多 Hexo 部署细节可参见 CSDN 与知乎上的教程(, )。

四、使用 Cloudflare 管理 DNS 与 HTTPS 加速

利用 Cloudflare 管理自定义域名可以享受免费 SSL、全球 CDN 加速和防火墙保护。

4.1 注册 Cloudflare 并添加域名

  1. 访问 Cloudflare 官网 并注册一个免费账号。
  2. 登录后点击“添加站点（Add a Site）”，输入你的域名（例如：yourdomain.com）。
  3. Cloudflare 会扫描当前域名的 DNS 记录，点击“继续”，并选择适合的免费套餐（Free Plan）。

4.2 更新域名的 Nameservers

  • Cloudflare 会提供两个 nameservers，例如： 
    1
    2
    nina.ns.cloudflare.com
    tom.ns.cloudflare.com
  • 登录你的域名注册商后台，将域名的 nameservers 修改为 Cloudflare 提供的这两个。
  • 修改后等待 DNS 生效，通常需要几分钟到数小时。

4.3 配置 DNS 记录

  • 在 Cloudflare 的 DNS 面板中，为你的域名添加或修改记录：
    • 如果你希望使用根域名访问，设置 A 记录指向 GitHub Pages IP（GitHub Pages 推荐使用 CNAME Flattening 方法）：
      • 添加 CNAME 记录：
        • 名称：@ 或留空（代表根域名）
        • 目标：YourUsername.github.io
        • 状态：确保图标为橙色（表示通过 Cloudflare 代理）。
    • 如果使用 www 前缀，则添加 CNAME 记录：
      • 名称：www
      • 目标：YourUsername.github.io

注意：GitHub Pages 对自定义域名的设置有详细说明，Cloudflare 支持 CNAME flattening 以确保根域名解析正常。

4.4 配置 SSL/TLS

  1. 进入 Cloudflare 后台的“SSL/TLS”选项卡。
  2. 选择 SSL 模式：
    • 如果 GitHub Pages 默认只支持 HTTP，建议选择 “Flexible” 模式。
    • 如果你已经在 GitHub Pages 上启用了 HTTPS（GitHub Pages 现已支持自动 HTTPS），可以选择 “Full” 模式。
  3. 确保“Always Use HTTPS”选项开启，这样访问自动跳转到 HTTPS。

4.5 性能与安全设置

  • 缓存：默认开启缓存，加速网站加载。
  • 防火墙：可以设置基本的防火墙规则，保护网站免受恶意攻击。
  • 自动优化：在“Speed”选项卡中启用自动图片优化、JavaScript/CSS 压缩等功能。

完成以上设置后，你的自定义域名将通过 Cloudflare 指向 GitHub Pages 上的博客，并享受 HTTPS 与全球 CDN 加速。

五、测试与调试

5.1 检查 DNS 解析

  • 使用工具（如 whatsmydns.net）查询你的域名，确认 DNS 记录已经正确解析到 YourUsername.github.io。

5.2 访问博客

  • 打开浏览器，输入自定义域名（例如 https://yourdomain.com 或 https://www.yourdomain.com），检查页面是否加载正常。
  • 检查 HTTPS 是否正常工作（浏览器地址栏是否显示锁标志）。

5.3 调整问题

  • 若出现页面显示错误，请检查：
    • Hexo 生成的文件是否正确上传至 GitHub Pages；
    • GitHub Pages 设置是否正常（仓库分支和 Pages 设置）；
    • Cloudflare 的 DNS 设置和 SSL 模式配置是否正确。

总结

完整流程如下：

  1. 本地环境安装：安装 Node.js、Git 和 Hexo CLI，并初始化 Hexo 项目，撰写并预览博客文章。
  2. 部署到 GitHub Pages：在 GitHub 上创建仓库，安装 hexo-deployer-git 插件，配置 _config.yml 部署部分，执行 hexo clean && hexo generate && hexo deploy 将静态文件上传。
  3. 使用 Cloudflare 管理自定义域名：注册 Cloudflare、添加域名、更换 nameservers、配置 DNS（使用 CNAME 指向 GitHub Pages）、设置 SSL/TLS 和其他优化选项。
  4. 测试与调试：确认 DNS 生效、HTTPS 正常，最终通过自定义域名访问你的博客。

这种方法利用了 Hexo 的静态生成、GitHub Pages 的免费托管和 Cloudflare 的全局加速，成本低且维护简单，非常适合个人博客或小型网站。

希望这份详细教程能帮你一步步完成搭建，如有疑问，可参考知乎、CSDN 等平台上更多的实战案例(, )。