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文件,大概格式如下:

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,取消这里的勾选,如果未勾选保持默认即可。

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

我有一头小毛驴

我有一只小毛驴,
我从来也不骑,
有一天我心血来潮骑着去赶集,
我手里拿着小皮鞭,
我心里正得意,
不知怎么哗啦啦啦啦我摔了一身泥。
合:
我有一只小毛驴,
我从来也不骑,
有一天我心血来潮骑着去赶集,
我手里拿着小皮鞭,
我心里正得意,
不知怎么哗啦啦啦啦我摔了一身泥。

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment