06-Hexo+Cloudflare-零成本搭建个人博客

一、方案简介

使用 Hexo + Cloudflare Pages 搭建个人博客，完全免费！

|| 特性 | 说明 ||
|—–|—–|—–|
|| 💰 完全免费 | Cloudflare Pages无限流量+无限请求 |
|| 🚀 全球CDN | Cloudflare全球节点，访问速度快 |
|| 🔒 HTTPS | 自动配置SSL证书 |
|| ⚡ 静态部署 | 无服务器，秒级部署 |
|| 🎨 主题丰富 | 1000+ Hexo主题 |

1.2 架构图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
┌─────────────────────────────────────────────────────────────┐
│                      整体架构                               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   本地开发               GitHub              Cloudflare    │
│   ┌─────────┐           ┌─────────┐         ┌─────────┐  │
│   │  Hexo   │ ──push──> │ GitHub  │ ──pull─> │ Pages   │  │
│   │  写作   │           │  仓库   │          │  托管   │  │
│   └─────────┘           └─────────┘          └─────────┘  │
│        │                    │                      │        │
│        │                    │                      │        │
│   markdown文件          source分支           访问域名      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

二、环境准备

2.1 安装Node.js

1
2
3
4
5
6
7
8
9
10
# 方法1：官网下载
# https://nodejs.org/

# 方法2：使用nvm（推荐）
# Windows: https://github.com/coreybutler/nvm-windows
# macOS/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 验证安装
node --version
npm --version

2.2 安装Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 全局安装Hexo
npm install -g hexo-cli

# 验证安装
hexo --version

# 创建博客目录
hexo init my-blog
cd my-blog

# 安装依赖
npm install

# 启动本地服务器
hexo server

# 访问 http://localhost:4000

三、Hexo基础配置

3.1 目录结构

1
2
3
4
5
6
7
my-blog/
├── _config.yml        # 站点配置文件
├── package.json       # 依赖配置
├── scaffolds/         # 模板目录
├── source/           # 源文件目录
│   └── _posts/       # 文章目录
└── themes/           # 主题目录

3.2 配置文件示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
# _config.yml
# Site
title: 我的技术博客
subtitle: 用代码改变世界
description: 分享Python、数据分析、Web开发的干货教程
keywords: Python, 数据分析, 机器学习
author: 博主
language: zh-CN
timezone: Asia/Shanghai

# URL
url: https://yourname.pages.dev
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md
default_layout: post
titlecase: false
external_link:
  enable: true
  field: site
  exclude: ''

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
per_page: 10
pagination_dir: page

# Extensions
theme: butterfly
exclude_generator:

# Deployment
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: main

3.3 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 新建文章
hexo new "我的第一篇文章"

# 新建草稿
hexo new draft "草稿文章"

# 发布草稿
hexo publish "草稿文章"

# 生成静态文件
hexo generate
# 或简写
hexo g

# 启动本地服务器
hexo server
# 或简写
hexo s

# 清除缓存
hexo clean

# 部署到GitHub
hexo deploy
# 或简写
hexo d

# 一键部署
hexo clean && hexo g -d

四、主题配置（以Butterfly为例）

4.1 安装主题

1
2
3
4
5
# 下载主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 安装依赖
npm install hexo-renderer-pug hexo-renderer-stylus --save

4.2 主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# _config.butterfly.yml

# 导航栏
navbar:
  menu:
    首页: /
    归档: /archives/
    分类: /categories/
    标签: /tags/
    关于: /about/

# Logo
blog_logo: /img/logo.svg

# 菜单
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-th
  链接: /link/ || fas fa-link

# 社交链接
social:
  GitHub: https://github.com/yourname || fab fa-github
  Gitee: https://gitee.com/yourname || fab fa-google
  Email: mailto:yourname@email.com || fas fa-envelope

# 文章配置
post:
  toc: true
  lazyload: true
  reward:
    enable: true
    text: 打赏
    QR_code:
      - /img/pay/alipay.png
      - /img/pay/wechat.png

# 页脚
footer:
  since: 2024
  icon:
    name: fa solid fa-heart
    animated: true
    color: "#ff0000"

# 主题色
theme_color:
  enable: true
  primary: "#007bff"
  secondary: "#6c757d"

五、Cloudflare Pages部署

5.1 创建GitHub仓库

1
2
3
4
5
6
7
8
# 1. GitHub新建仓库：yourname.github.io
# 2. 本地初始化
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourname/yourname.github.io.git
git push -u origin main

5.2 连接Cloudflare Pages

1
2
3
4
5
6
7
8
9
步骤：
1. 登录 Cloudflare: https://www.cloudflare.com/
2. 进入 Pages → Create a project
3. Connect to Git → 选择你的GitHub仓库
4. 配置构建设置：
   - Framework preset: Hexo
   - Build command: npm run build
   - Build output directory: public
5. 点击 Deploy site

5.3 自定义域名（可选）

1
2
3
4
1. 进入 Pages → 你的项目 → Custom domains
2. Add custom domain
3. 输入你的域名
4. 按照提示配置DNS

六、常用插件

6.1 安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 文章字数统计
npm install hexo-wordcount --save

# RSS订阅
npm install hexo-generator-feed --save

# Sitemap
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

# 图片懒加载
npm install hexo-lazyload-image --save

# 代码高亮
npm install hexo-prism-plugin --save

# 文章加密
npm install hexo-blog-encrypt --save

6.2 插件配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# _config.yml

# 字数统计
wordcount:
  enable: true
  post_word: true
  min2read: true

# RSS
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content: true

# Sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

# 代码高亮
prism_plugin:
  mode: preprocess
  theme: tomorrow-night

七、写文章

7.1 新建文章

1
hexo new "Python爬虫入门"

7.2 文章模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
title: Python爬虫从入门到实战
date: 2024-01-15 12:00:00
updated: 2024-01-15 12:00:00
categories:
  - Python
tags:
  - 爬虫
  - Requests
  - BeautifulSoup
description: 网络爬虫是获取数据的重要手段...
cover: /img/covers/python-spider.jpg
---

## 一、什么是爬虫？

网络爬虫（Web Crawler）是一种自动化获取网页数据的程序...

<!-- more -->

## 二、准备工作

```bash
# 安装依赖
pip install requests beautifulsoup4

三、实战演练

3.1 发送请求

1
2
3
4
5
import requests

url = "https://example.com"
response = requests.get(url)
print(response.text)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

---

## 八、自动部署

### 8.1 GitHub Actions自动部署

```yaml
# .github/workflows/deploy.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install Hexo
        run: |
          npm install -g hexo-cli
          npm install

      - name: Build
        run: hexo clean && hexo g

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          projectName: your-project
          directory: public
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

8.2 配置密钥

1
2
3
4
5
1. Cloudflare → API Tokens → Create Custom Token
2. 权限选择：Pages:Edit
3. 保存生成的Token
4. GitHub仓库 → Settings → Secrets → Actions
5. 添加 CF_API_TOKEN 和 CF_ACCOUNT_ID

九、常见问题

9.1 部署后页面空白

1
2
# 解决：检查主题配置
hexo clean && hexo g

9.2 图片不显示

1
2
# _config.yml
post_asset_folder: true

9.3 部署慢

1
2
# 使用淘宝npm镜像
npm install -g cnpm --registry=https://registry.npmmirror.com

十、总结

|| 阶段 | 操作 ||
|—–|—–|—–|
|| 本地写作 | hexo new "文章标题" ||
|| 本地预览 | hexo s ||
|| 生成静态 | hexo g ||
|| 一键部署 | hexo clean && hexo g -d ||

💡 提示：配合GitHub Actions实现自动部署，写完文章推送就自动发布！

下篇预告: AI学习日记07-GitHub项目复现：从下载到运行

如果你觉得有帮助，欢迎点赞+在看👍

建站教程
#Hexo #Cloudflare #静态博客
06-Hexo+Cloudflare-零成本搭建个人博客
https://yourname.github.io/2026/02/03/06-Hexo+Cloudflare-零成本搭建个人博客/
作者
JA
发布于
2026年2月3日
许可协议