Hexo搭建个人博客

零成本搭建个人博客：Hexo + GitHub/Cloudflare 部署指南

本文详细介绍了如何利用免费服务（Hexo、GitHub和Cloudflare）快速构建一个高效、简洁且零成本的个人博客网站。

一、 核心内容概览

本教程涵盖以下主要步骤：

  1. 环境准备： 安装Node.js和Git。
  2. 配置Git和GitHub： 设置SSH密钥，创建GitHub仓库。
  3. 初始化Hexo项目： 安装Hexo，创建新博客结构。
  4. 部署到GitHub Pages： 配置部署设置，推送静态文件。
  5. 部署到Cloudflare Pages： 连接GitHub仓库，实现自动部署和加速。
  6. 基本使用方法： 创建、预览和发布新文章。

二、 事前准备与软件支持

搭建博客需要准备相应的账号和软件支持。

1. 账号准备 (Prerequisites)

准备项 必要性 作用/说明
GitHub 必须 注册GitHub账号，用于存放博客源码和部署Pages服务。
Node 必须 Hexo运行所需的环境。
Git 必须 用于版本控制、连接GitHub和执行部署操作。
域名 非必须 可使用GitHub.io或Pages.dev分配的免费域名。
Cloudflare 非必须 用于将博客部署在CF的CDN里进行加速，也可直接使用GitHub.io域名。
VSCode 非必须 推荐使用，其插件系统能提升编程体验。

2. 软件安装与配置

2.1. 安装 Node.js

Node.js 是运行 Hexo 的必要环境。

  1. 下载： 访问Node官网 https://nodejs.org/en，下载匹配自己系统的安装程序。

  2. 安装： 推荐使用默认安装目录（如 C:/Program Files/nodejs/）。

  3. 检查： 打开CMD窗口（按下 Win + R 输入 CMD），执行 node -v 命令，若显示版本信息即安装成功。

  4. 修改npm源 ：

    默认的 npm 下载速度较慢，建议配置为

华为云镜像源

。

  • 在CMD窗口中运行命令：npm config set registry https://mirrors.huaweicloud.com/repository/npm/。
2.2. 安装 Git

Git 用于管理和部署代码。

  1. 下载： 访问官网 https://git-scm.com/downloads 下载适合当前系统的安装包。

  2. 安装： 傻瓜式安装，最好使用默认安装目录（如 C:/Program Files/Git）。

  3. Linux 系统安装： 可直接输入命令 sudo apt install git-all。

  4. 使用工具：

    安装后可以在电脑开始菜单找到 Git CMD、Git Bash 和 Git GUI。

    • 推荐使用： Git Bash，它采用 Linux 系统的指令风格。
    • Git GUI 是图形化界面，作者个人认为不好用。

三、 配置 Git 密钥并连接至 GitHub

这部分是确保本地计算机能够安全、高效地与 GitHub 仓库进行通信的关键。

1. 配置用户名和邮箱

  • 常用Git命令
1
2
3
git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

启动Git

在 Git BASH 中执行以下命令，配置全局用户名和邮箱：

  • git config --global user.name "你的用户名"
  • git config --global user.email "你的邮箱"

检查配置： 使用 git config -l 命令查看所有配置是否成功。

3.1. 配置用户名和邮箱

2. 配置公钥连接 Github

生成 SSH 公钥是为了让你的计算机能够连接到 Github。

  1. 生成公钥： 执行命令 ssh-keygen -t rsa -C "你的邮箱"。

  2. 提示处理： 出现 Enter file in which to save the key 等提示时，直接一路回车即可。

    3.2.1.1

  3. 查找公钥：

    • 在 Windows 中，公钥文件 id_rsa.pub 和私钥文件 id_rsa 位于 C 盘下用户文件夹的 .ssh 文件夹中。 3.2.1.2

    • 在 Linux 中，使用 cd ~/.ssh/ 命令跳转，再用 ls 即可看到密钥文件。

      image-20250919185823930

  4. 复制公钥： 用记事本打开 id_rsa.pub 文件，复制里面的全部内容。如果是 Linux 系统，可以直接使用 cat 命令查看内容。

    image-20250919190440014

    • linux

    image-20250919190821332

  5. 配置到 GitHub：

    • 进入 GitHub，点击右上角头像，选择 Settings。

    • 选择 SSH and GPG keys。

    • 名字可以随便起，将复制的公钥内容粘贴到 Key 那一栏。

      3.2.2.1

      image-20250919190131822

      image-20250919190255548

      image-20250919190355659

3. 测试连接

输入 ssh -T [email protected] 命令测试连接。

  • 第一次连接时会提示 Are you sure you want to continue connecting (yes/no/[fingerprint])?。

  • 输入 yes。

  • 如果屏幕出现连接到账户的信息，则说明环境准备工作已经大功告成。

    image-20250919190915836

4. 创建 GitHub.io 仓库

这个仓库将用于存放 Hexo 生成的静态博客文件。

  1. 点击 GitHub 右上角的 + 按钮，选择 New repository。

  2. 仓库命名格式： 仓库名字必须严格遵守 <用户名>.github.io 的格式（注意：前缀必须是你的用户名，这是首次预览博客所必需的）。

  3. 可见性： 必须选择 Public，方便第一次部署时检查问题。

  4. 点击 Creat repository 完成创建。

    3.3. 创建GitHub.io仓库

四、 初始化 Hexo 博客项目

Hexo 是一个快速、简洁且高效的博客框架。

  1. 创建源码文件夹： 创建一个文件夹来保存博客源码（例如 D:/Hexo-Blog）。

    4.1

  2. 打开 Git Bash： 在该文件夹内右键鼠标，选择 Open Git Bash here。

    image-20250919191358238

  3. 安装 Hexo CLI： 在 Git BASH 中输入命令安装 Hexo 命令行工具：npm install -g hexo-cli && hexo -v。

  4. 初始化项目：

    使用以下命令初始化 Hexo 项目并安装相关依赖。

    • hexo init blog-demo (创建一个名为 blog-demo 的新博客文件夹)

    • cd blog-demo (进入项目目录)

    • npm i (安装依赖)

      image-20250919191618181

项目结构概述

初始化后，blog-demo 文件夹下包含以下核心结构和文件：

  • node_modules：依赖包。

  • scaffolds：生成文章的一些模板。

  • source：用来存放你的文章（主要用于写作）。

  • themes：存放主题文件。

  • _config.yml：整个博客的配置文件。

  • _config.landscape.yml：主题的配置文件。

  • package.json：项目名称、描述、版本等信息。

    image-20250919191656521

本地预览

执行 hexo cl && hexo s 命令启动项目。

image-20250919191756890

  • 按住 Ctrl 键并点击命令行中显示的网址，或直接在浏览器中输入地址：http://localhost:4000/。

    4.7

  • 如果看到博客效果，说明博客构建成功。

五、 将静态博客部署到 GitHub Pages

这是将本地生成的静态文件推送到 GitHub 仓库并使其在线可见的关键步骤。

1. 安装 Git 部署器

首先需要安装 Hexo 的 Git 部署插件：

  • npm install hexo-deployer-git --save

2. 修改主配置文件 (_config.yml)

在 blog-demo 目录下的 _config.yml 文件中，可以修改 Hexo 框架的大部分配置。

  • 修改部署配置：

    滚动到文件末尾，修改 

    1
    deploy

    部分的配置（

    注意缩进

    ）。

    • type 必须设置为 git。

    • repository

      1
      2
      3

      需修改为你自己的 GitHub 项目地址： 

      
deploy:
  type: git
  repository: [email protected]:cmliussss2024/cmliussss2024.github.io.git # 替换为你自己的地址
  branch: main # 分支应改为 main 代表主分支

  • 详细配置可参考 Hexo 官方文档。

3. 执行部署 (Hexo 三连)

修改配置后，运行如下命令将代码部署到 GitHub：

命令 缩写 作用
hexo clean hexo cl 删除之前生成的文件。
hexo generate hexo g 生成静态文章。
hexo deploy hexo d 部署文章。

  • Git BASH 终端命令： hexo clean && hexo generate && hexo deploy

  • VSCODE 终端命令（或分步执行）： hexo cl; hexo g; hexo d

    5.3.1

注意： 部署 (deploy) 时可能会要求输入 GitHub 的用户名和密码。

如果出现Deploy done，则说明部署成功了。

5.3.2

4. 验证部署

如果出现 Deploy done 的提示，则说明部署成功。

  • 等待大约两分钟。

  • 打开浏览器访问：https://cmliussss2024.github.io（替换为你的用户名），即可看到博客内容。

    5.3.3

六、 将静态博客部署到 Cloudflare Pages

Cloudflare Pages 提供 CDN 加速服务，可以进一步优化博客的访问速度。

  1. 连接到 Git： 登录 Cloudflare 账号，在 Workers 和 Pages 中选择 Pages，然后选择 连接到 Git。

    6.1.1

    6.1.2

    ​

  2. 登录 GitHub： 登录与你的博客仓库对应的 GitHub 账号。

    6.2.1

    6.2.2

  3. 部署： 点击 保存并部署，然后等待部署完成。

    6.3

  4. 验证： 成功部署后会提示 “成功！您的项目已部署到以下区域：全球”。

    6.4

  5. 访问： 浏览器访问 Pages 分配的域名，例如 https://cmliussss2024-github-io.pages.dev。

    6.5

  6. 私库设置和自定义域名：

    • 部署成功后，你可以将你的 <用户名>.github.io 仓库设置为 Private 私库。
    • 如果你拥有自己的域名，可以在 Cloudflare 这里绑定自定义域。

七、 Hexo 基本使用方法

1. 新建一篇博文

使用 Hexo 命令在 source/_posts 文件夹下生成一个新的 Markdown 文件：

  • hexo new 这是一篇新的博文

2. 编辑文章

  • 使用文本编辑器编辑 _posts/这是一篇新的博文.md 里的内容。
  • 文章内容必须使用 Markdown 格式书写。
  • 详细的 Markdown 或 Hexo 写作方法可以查阅 https://hexo.io/zh-cn/docs/writing 或在网上搜索相关教程。

3. 预览

编辑并保存文章后，可以使用以下命令在本地生成页面并预览：

  • hexo cl && hexo s
  • 访问地址：http://localhost:4000/

4. 推送（发布更新）

确认本地预览无误后，使用 Hexo 三连命令将本地文章推送（部署）至 GitHub 仓库：

  • hexo cl && hexo g && hexo d****