一、方案简介
使用 Hexo + Cloudflare Pages 搭建个人博客，简单易上手，完全免费！
|| 特性 | 说明 ||
|—–|—–|—–|
|| 完全免费 | Cloudflare Pages无限流量+无限请求 |
|| 全球CDN | Cloudflare全球节点，访问速度快 |
|| HTTPS | 自动配置SSL证书 |
|| 静态部署 | 无服务器，秒级部署 |
|| 主题丰富 | 1000+ Hexo主题 |
二、环境准备
2.1 安装Node.js
1
2
3
4
5
6
7
8
9
10
|
node --version
npm --version
|
2.2 安装Hexo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
npm install -g hexo-cli
hexo --version
hexo init my-blog
cd my-blog
npm install
hexo server
|
三、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
|
title: 我的技术博客
subtitle: 用代码改变世界
description: 分享Python、数据分析、Web开发的干货教程
keywords: Python, 数据分析, 机器学习
author: 博主
language: zh-CN
timezone: Asia/Shanghai
url: https://yourname.pages.dev
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
new_post_name: :title.md
default_layout: post
titlecase: false
external_link:
enable: true
field: site
exclude: ''
default_category: uncategorized
category_map:
tag_map:
date_format: YYYY-MM-DD
time_format: HH:mm:ss
per_page: 10
pagination_dir: page
theme: butterfly
exclude_generator:
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
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 主题配置
各主题的详细步骤可见https://hexo.io/themes/
五、Cloudflare Pages部署
5.1 创建GitHub仓库
1
2
3
4
5
6
7
8
|
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
npm install hexo-generator-feed --save
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
|
wordcount:
enable: true
post_word: true
min2read: true
feed:
type: atom
path: atom.xml
limit: 20
hub:
content: true
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
prism_plugin:
mode: preprocess
theme: tomorrow-night
|
七、写文章
7.1 新建文章
7.2 文章模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ---
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）是一种自动化获取网页数据的程序...
|
八、常见问题
8.1 部署后页面空白
8.2 图片不显示
1
2
|
post_asset_folder: true
|
8.3 部署慢
1
2
|
npm install -g cnpm --registry=https://registry.npmmirror.com
|
十、总结
|| 阶段 | 操作 ||
|—–|—–|—–|
|| 本地写作 | hexo new "文章标题" ||
|| 本地预览 | hexo s ||
|| 生成静态 | hexo g ||
|| 一键部署 | hexo clean && hexo g -d ||
💡 提示：配合GitHub Actions实现自动部署，写完文章推送就自动发布！
如果你觉得有帮助，欢迎点赞+在看👍