快速搭建个人博客：Hexo + GitHub Pages + Cloudflare Pages 完整指南

快速搭建个人博客：Hexo + GitHub Pages + Cloudflare Pages 完整指南

引言

个人博客不仅是展示自己技术能力的平台，还可以用于记录学习心得和分享内容。Hexo + GitHub Pages + Cloudflare Pages 的组合是一种简单、高效的静态博客搭建方式，适合新手快速上手。本文将逐步带您完成安装和配置。

第一步：安装开发环境

在正式开始之前，需要安装一些必要的软件，包括 Node.js、Git 和 Hexo。如果您从未接触过这些技术，请按照以下详细步骤来安装。

1.1 安装 Node.js

Node.js 是一个运行 JavaScript 代码的平台，Hexo 的很多操作依赖它。

  1. 打开 Node.js 官网。
  2. 点击“下载”按钮，选择适合自己电脑操作系统的版本。
  3. 下载完成后，双击安装文件，按照提示完成安装（默认选项即可）。
  4. 安装完成后，打开命令行工具：
    • Windows：按 Win + R 输入 cmd 并回车。
    • Mac：按 Command + Space 输入 Terminal 并回车。
  5. 输入以下命令，检查安装是否成功：
    1
    node -v
    正确输出版本号（例如 v16.13.0）表示 Node.js 安装成功。

1.2 安装 Git

Git 是一个版本控制工具，之后我们会用它把博客部署到 GitHub 上。

  1. 打开 Git 官网。
  2. 点击“Download”，选择适合自己操作系统的版本。
  3. 下载后双击安装文件，安装时可以保留默认设置（Windows 用户在安装时勾选“Use Git from the Windows Command Prompt”）。
  4. 安装完成后，打开命令行工具，输入以下命令检查安装是否成功：
    1
    git --version
    正确输出版本号（例如 git version 2.34.1）表示 Git 安装成功。

第二步：创建 GitHub 仓库

我们需要一个 GitHub 仓库来托管生成的博客内容。请确保您已注册并登录 GitHub。

  1. 打开 GitHub 网站，点击右上角的“+”号图标，选择“New repository”。
  2. Repository name 中输入 {username}.github.io，将 {username} 替换为您的 GitHub 用户名（比如 johndoe.github.io）。
  3. 选择“Public”（公开仓库），勾选 “Add a README file”。
  4. 点击“Create repository”完成创建。

第三步：安装并配置 Hexo

3.1 安装 Hexo

  1. 在命令行中，输入以下命令安装 Hexo：
    1
    npm install -g hexo-cli
    -g 选项表示全局安装，成功后可以在任何目录下使用 hexo 命令。

3.2 初始化 Hexo 项目

  1. 在您计算机上新建一个文件夹用于存放博客文件，您可以右键新建一个文件夹，命名为 my-blog。

  2. 打开命令行，将当前路径切换到该文件夹（使用 cd 命令）：

    1
    cd your_folder_path/my-blog

    将 your_folder_path 替换为您文件夹所在路径。

  3. 运行以下命令初始化 Hexo 项目：

    1
    2
    hexo init
    npm install

    完成后，该文件夹内会生成 Hexo 的配置文件和目录结构。

3.3 启动本地服务器查看博客效果

  1. 在命令行中运行以下命令，启动本地 Hexo 服务器：
    1
    hexo server
  2. 在浏览器中打开 http://localhost:4000 即可预览博客效果。

第四步：配置 GitHub Pages 部署

4.1 安装 GitHub 部署工具

  1. 在 my-blog 文件夹中，运行以下命令安装 Hexo 部署插件：
    1
    npm install hexo-deployer-git --save

4.2 配置 Hexo 部署设置

  1. 打开 my-blog 文件夹下的 _config.yml 文件。
  2. 找到 deploy 选项，按如下方式填写您的 GitHub 仓库信息：
    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/{username}/{username}.github.io.git
      branch: main
    将 {username} 替换为您的 GitHub 用户名。

4.3 部署到 GitHub Pages

  1. 每次修改内容后，您可以通过以下命令将博客部署到 GitHub Pages 上：

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

  2. 部署完成后，打开 https://{username}.github.io 查看博客上线效果。

第五步：接入 Cloudflare Pages 提升访问速度

5.1 注册 Cloudflare 并创建 Pages 项目

  1. 前往 Cloudflare 官网，注册并登录。
  2. 登录后，选择页面顶部的“Pages”选项并创建一个新项目。
  3. 点击“Connect to GitHub”，选择 {username}.github.io 仓库并关联。

5.2 设置构建和发布配置

  1. Framework Preset：选择 Hexo

  2. Build Command：填写 hexo generate

  3. Output Directory：填写 public

  4. 完成后，Cloudflare Pages 会自动构建并部署项目，为您生成一个新的博客访问链接，并为网站提供全球 CDN 加速。

第六步：优化与进阶配置

  • 添加自定义域名：如果您有自定义域名，可以在 Cloudflare 设置中添加，并在域名设置中指向 Cloudflare 提供的 CNAME 地址。
  • SEO 优化：在 _config.yml 文件中配置博客标题、描述和关键字，有助于搜索引擎更好地抓取您的内容。

结语

主题我推荐使用：安知鱼，安知鱼是一个简洁、美丽的静态 hexo 主题（本网站已应用安知鱼主题 体验感超棒！！！😄）

-项目地址：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
-官方文档：https://docs.anheyu.com/initall.html

以上是 Hexo + GitHub Pages + Cloudflare Pages 的详细搭建流程，即便是完全新手也能快速上手并完成个人博客的搭建。希望本教程对您有所帮助，祝您的博客越做越精彩！