使用Github和cloudflare无服务器部署hexo博客【保姆及教程】

Sion木子

已于 2024-07-15 16:33:34 修改

阅读量920

点赞数 8

分类专栏： Hexo Github 文章标签： github

于 2024-07-12 01:00:55 首次发布

本文链接：https://blog.csdn.net/weixin_38933709/article/details/140364990

版权

Github 同时被 2 个专栏收录

2 篇文章

订阅专栏

Hexo

1 篇文章

订阅专栏

前期准备

Hexo部分

1.安装 Hexo CLI

需要全局安装 Hexo CLI 工具

npm install -g hexo-cli

2.安装Hexo

# cd到需要hexo安装的盘符或文件夹，我这里安装到了D盘。
cd d:/
# 在盘下载hexo并创建blog文件夹，blog随意修改，在这里只是为了好记。
hexo init blog

3.安装主题

3.1 安装远程主题

创建.gitmodules文件，将以下代码复制到.gitmodules中并进行修改，远程主题是不可控的，无法进行详细修改，可使用Fork将主题仓库复制到你自己的Github中，这里的主题是在cloudflare中使用。

[submodule "themes/maupassant"]
    path = themes/maupassant
    url = https://github.com/tufu9441/maupassant-hexo.git

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

3.3安装npm依赖

某些主题依赖npm。

npm install

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: ''

启用主题，在_config.yml查找theme:将主题文件夹名称进行替换，其中maupassant为主题名称。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant

3.5编辑Hexo跟目录下的.gitignore文件

删除配置.gitignore文件文件中的public/下面是参考。

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
.deploy*/
_multiconfig.yml

4.创建文章

hexo new post "你的文章标题"

5.创建列表分类

# categories为分类名称
hexo new page categories

6.文章中增加分类和tag标签

title: 我的第一篇文章
date: 2024-07-12 10:00:00
# 分类栏目
categories:
  - 分类1
  - 分类2
# tags标签
tags:
  - 标签1
  - 标签2

7.生成和预览

安装修改完成后可现在本地启用预览

#清理缓存
hexo clean
#生成静态文件
hexo generate
#启动服务
hexo server

根据返回地址在浏览器即可。

# 调试地址
localhost:4000
# 停止调试服务
ctrl+c

Github部分

1.生成SSH密钥对

如果你还没有SSH密钥对，可以通过以下命令生成：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

复制生成的公钥内容：

cat ~/.ssh/id_rsa.pub

登录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"

如果Github中的邮箱添加了隐私设置需要提前取消，或者更改为为Github提供的隐私邮件地址，取消方法：进入 Settings -> Emails -> Keep my email addresses private，取消这里的勾选，如果未勾选保持默认即可。

3. 推送到 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

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

Cloudflare部分

1.在Cloudflare上部署hexo

登录到Cloudflare然后将语言切换到中文，接着导航到Workers和Pages，选择Pages连接到的GitHub仓库。以下是关键步骤：
项目名称：自定义这里随意些只要记住这是做什么的。
框架预设：无
构建命令：npm run build
输出目录：public
最后点击：开始部署
等待Cloudflare构建完成会随机分配一个Cloudflare提供的官方域名，后期可以绑定自己的域名，部署完成后打开Cloudflare自动分配的域名预览是否安装正确。
域名类似hexo-e0o.pages.dev