2024-11-21发表2024-11-21更新 liangjunlee

ithub和cloudflare无服务器部署hexo博客

使用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文件，大概格式如下：

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
————————————————