使用Github和Cloudflare部署Hexo博客
前期准备
Hexo部分
1.安装 Hexo CLI
2.安装Hexo
3.安装主题
3.1 安装远程主题
3.2本地安装主题
3.3安装npm依赖
3.4修改 _config.yml
3.5编辑Hexo跟目录下的.gitignore文件
4.创建文章
5.创建列表分类
6.文章中增加分类和tag标签
7.生成和预览
Github部分
1.生成SSH密钥对
2.配置Git用户名和邮箱
3. 推送到 GitHub
4.自动处理行尾符
Cloudflare部分
1.在Cloudflare上部署hexo
前期准备
注册Github:https://www.github.com
注册Github:https://www.cloudflare.com
Git下载:https://git-scm.com/download
NodeJs下载:https://nodejs.org/zh-cn
Hexo部分
1.安装 Hexo CLI
需要全局安装 Hexo CLI 工具
npm install -g hexo-cli
1
2.安装Hexo
cd到需要hexo安装的盘符或文件夹,我这里安装到了D盘。
cd d:/
在盘下载hexo并创建blog文件夹,blog随意修改,在这里只是为了好记。
hexo init blog
1
2
3
4
3.安装主题
3.1 安装远程主题
创建.gitmodules文件,将以下代码复制到.gitmodules中并进行修改,远程主题是不可控的,无法进行详细修改,可使用Fork将主题仓库复制到你自己的Github中,这里的主题是在cloudflare中使用。
[submodule “themes/maupassant”]
path = themes/maupassant
url = https://github.com/tufu9441/maupassant-hexo.git
1
2
3
3.2本地安装主题
本地调试使用
次cd到blog文件夹中。
cd blog
注意结尾的themes/maupassant,意思是会默认将主题安装到hexo的themes目录下。
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
安装hexo-renderer-pug插件
npm install hexo-renderer-pug –save
安装hexo-renderer-sass插件
npm install hexo-renderer-sass –save
开启RSS
npm install hexo-generator-feed –save
1
2
3
4
5
6
7
8
9
10
3.3安装npm依赖
某些主题依赖npm。
npm install
1
3.4修改 _config.yml
使用任意编辑器修改hexo根目录下的_config.yml文件,大概格式如下:
Site
title: My Blog #标题
subtitle: ‘My Subtitle’ #名称
description: ‘My Blog Description’ #描述
keywords: #关键词
author: John Doe #作者
language: zh-CN #语言,这里默认的是en,也就是英文,如果主题支持支持中文,这里修改为zh-CN
timezone: ‘’
1
2
3
4
5
6
7
8
启用主题,在_config.yml查找theme:将主题文件夹名称进行替换,其中maupassant为主题名称。
Extensions
Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: maupassant
1
2
3
4
3.5编辑Hexo跟目录下的.gitignore文件
删除配置.gitignore文件文件中的public/下面是参考。
.DS_Store
Thumbs.db
db.json
.log
node_modules/
.deploy/
_multiconfig.yml
1
2
3
4
5
6
7
4.创建文章
hexo new post “你的文章标题”
1
5.创建列表分类
categories为分类名称
hexo new page categories
1
2
6.文章中增加分类和tag标签
title: 我的第一篇文章
date: 2024-07-12 10:00:00
分类栏目
categories:
- 分类1
- 分类2
tags标签
tags:
- 标签1
- 标签2
1
2
3
4
5
6
7
8
9
10
7.生成和预览
安装修改完成后可现在本地启用预览
#清理缓存
hexo clean
#生成静态文件
hexo generate
#启动服务
hexo server
1
2
3
4
5
6
根据返回地址在浏览器即可。
调试地址
localhost:4000
停止调试服务
ctrl+c
1
2
3
4
Github部分
1.生成SSH密钥对
如果你还没有SSH密钥对,可以通过以下命令生成:
ssh-keygen -t rsa -b 4096 -C “your_email@example.com“
1
复制生成的公钥内容:
cat ~/.ssh/id_rsa.pub
1
登录GitHub,进入 Settings -> SSH and GPG keys -> New SSH key,将公钥粘贴进去并保存。
2.配置Git用户名和邮箱
在你的本地仓库目录下,配置Git用户名和邮箱:
git config –global user.name “Your Name”
git config –global user.email “your_email@example.com“
1
2
如果Github中的邮箱添加了隐私设置需要提前取消,或者更改为为Github提供的隐私邮件地址,取消方法:进入 Settings -> Emails -> Keep my email addresses private,取消这里的勾选,如果未勾选保持默认即可。
- 推送到 GitHub
将Hexo项目推送到GitHub仓库
git status
git init
git add README.md
git add .
git commit -m “Initial commit”
git branch -M main
git remote add origin git@github.com:/yourusername/your-repo.git
git push -u origin main
1
2
3
4
5
6
7
8
4.自动处理行尾符
如果提示warning: in the working copy of ‘package.json’, LF will be replaced by CRLF the next time Git touches it执行下面的命令即可,这个问题基本上是在执行git add .后提示,没有就跳过。
git config –global core.autocrlf true
1
Cloudflare部分
1.在Cloudflare上部署hexo
登录到Cloudflare然后将语言切换到中文,接着导航到Workers和Pages,选择Pages连接到的GitHub仓库。以下是关键步骤:
项目名称:自定义这里随意些只要记住这是做什么的。
框架预设:无
构建命令:npm run build
输出目录:public
最后点击:开始部署
等待Cloudflare构建完成会随机分配一个Cloudflare提供的官方域名,后期可以绑定自己的域名,部署完成后打开Cloudflare自动分配的域名预览是否安装正确。
域名类似hexo-e0o.pages.dev
————————————————