开始之前需要确保你有以下前提：

1、有一个github账号并可以正常使用。

2、有一个Cloudflare账号

3、能访问github，安装好git工具（git还要用于后期博客内容的更新，所以最好会使用简单的git命令，可查看我往期关于git教程的文章）

本来可以直接部署到github pages上的，但是由于github大部分时候访问有问题，所以使用Cloudflare Pages为首推选择，全球可访问，并且部署简单，部署到github pages的有时候国内正常网络访问可能不流畅。

这次使用到的模版的开源地址连接：https://github.com/CuteLeaf/Firefly

一、Cloudflare Pages部署

一、在本地创建一个文件夹用于存放拉取的代码并用于后期的博客内容更新

博客内容的更新依赖于本地仓库的修改提交。

在当前目录打开命令行窗口

拉取代码：

git clone https://github.com/Cuteleaf/Firefly.git

拉取不成功的直接去源地址下载解压出来也行

进入Firefly文件夹删除下面三个文件夹（如果有）

初始化git仓库

本地不需要安装依赖，因为Cloudflare Pages有相关的模版

二、创建github仓库

选择已存在的仓库进行提交

 

想要了解更多关于git的使用请查看我往期的文章：https://blog.csdn.net/weizhigongzi/article/details/151902977

将本地的文件全部缓存然后提交并查看状态（如图则正常）

git add .

git status

提交

git commit -m "初次提交，个人博客网站"

 关联远程仓库并创建主分支（创建仓库时选择已存在仓库的那里的命令）

推送到远程仓库（这里或者上面的关于git操作的步骤你们没有弄过的可能会出错，这里不方便复现，请查看我往期的git使用教程解决，可能涉及密钥等问题，推送慢就等着）

git push -u origin main

三、进入Cloudflare Pages导入授权仓库

然后保存并部署等待完成

完成后界面如下，点击继续处理项目：

四、部署成功和访问

我的地址，可以访问试试：https://changqin.dpdns.org/(这是我设置成自己的域名后的访问地址)

五、更新内容

这里说一下：这个访问地址你自己如果有域名的话可以换成你的域名，如下，后续操作就自己探索吧

相关的内容更新见拉取目录的README文档，更改对应的内容重新提交到远程仓库，然后再到Cloudflare Pages重新构建即可。

重新构建部署：

成功后会有记录

二、github pages部署

一、本地安装依赖并执行打包

去到刚才的路径命令行打开

安装pnpm工具并安装依赖

npm install -g pnpm

pnpm install

 本地访问，安装好依赖以后就可以在本地访问

启动开发服务器

pnpm dev

浏览器输入本地访问地址：

http://localhost:4321/

上面的本地使用的开发服务器方式访问可以用于博客更新的预览，满意在进行上传。

打包

pnpm build

二、单独再创建一个文件夹并将打包目录dist下的全部文件全部复制到新文件夹下（注意是dist下的文件），并打开cmd初始化git仓库（git init）

三、创建github个人项目仓库

注意这里创建的仓库名与前面的有点区别（一定要用户名+.github.io）

依旧使用已有仓库推送

将缓存提交

git commit -m "github pages静态博客网站初次提交"

关联刚才创建的远程仓库，创建主分支，推到远程仓库（同样的话，这里你们的可能会出错，请参考我往期关于git的文章，可能涉及密钥等问题，推送慢就等着）

推送成功后几十秒或几分钟后就可访问了，https://+你的仓库名，我的可以通过：https://changqin1024.github.io/访问，打不开就多刷新几次就能打开了

四、很大概率问题（初次可以说一定会）：

访问时页面杂乱布局散乱（无法请求js和css文件，打开浏览器检查，点到网络页面或控制台刷新网页，可以看到很多加载js和css文件的错）

处理 Jekyll 的兼容性问题
GitHub Pages 默认使用 Jekyll 静态网站生成器，它会忽略以下划线（_）开头的文件和文件夹。如果你的项目（例如使用 VuePress, Docsify 等工具生成）包含这类文件，就会导致资源无法加载。

• 解决方法：在你的 Git 仓库的根目录下，创建一个名为 .nojekyll 的空文件。这个文件会告诉 GitHub Pages 跳过 Jekyll 的处理流程。

创建一个.nojekyll文件

# 在项目根目录下打开命令行窗口执行

git add .nojekyll

git commit -m "Add .nojekyll to disable Jekyll processing"

git push

五、访问

六、更新

同样在拉取的文件夹下更新后，删除dist文件夹，重新执行pnpm build构建项目，然后重新提交到远程仓库，等待一段时间后访问就更新了。

除此之外github pages也是支持自定义域名的，自行探索了，这里就先不教学了，如果你动手能力强，那么github pages也是可以使用cdn加速的，这样就可以流畅访问了，感兴趣的自行探索。

三、写在最后

如果上面关联远程仓库的问题是密钥问题可以参考下面的解决方法：

1. 生成新SSH密钥：
   建议使用更安全的 ed25519 算法：

   ssh-keygen -t ed25519 -C "your_email@example.com"

   将 "your_email@example.com" 替换为你注册GitHub时使用的邮箱。接下来，程序会提示你选择密钥保存路径和设置密码，一路按回车使用默认值即可，最后会给你一个存储的路径，根据路径找到相应的位置， 应该会有id_rsa、id_ed25519 或类似名称的密钥对文件（通常是.pub后缀为公钥，另一个为私钥），这就是你生成一个新的密钥对。

2. 将公钥添加到GitHub：

   • 首先，记事本打开公钥（id_ed25519.pub）内容。全选复制：

   • 接着，登录GitHub，点击右上角头像，进入 Settings > SSH and GPG keys > New SSH key。

   • 在"Title"字段，为这个密钥起个易于识别的名字（例如"My Windows Laptop"）。将刚才复制的公钥内容粘贴到"Key"字段中，最后点击 Add SSH key。

 检查远程仓库地址

确保你的本地仓库关联的远程仓库地址是SSH格式。

1. 检查当前远程地址：

   git remote -v

2. 确保是SSH格式：
   正确的SSH地址格式应为：git@github.com:用户名/仓库名.git。
   如果显示的是HTTPS地址（以 https://github.com/ 开头），你需要将其修改为SSH地址：

   git remote set-url origin git@github.com:用户名/仓库名.git

验证连接并再次尝试

完成以上步骤后，重新测试与GitHub的SSH连接：

ssh -T git@github.com

如果看到类似 "Hi 用户名! You've successfully authenticated, but GitHub does not provide shell access." 的欢迎信息，说明配置成功。

现在，你可以重新尝试推送：

git push -u origin main

• 关于密钥算法：虽然目前普遍推荐 ed25519 算法，但极少数情况下，如果服务器支持存在限制，尝试使用RSA算法生成密钥或许能解决问题。你可以使用命令 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 来生成RSA密钥（我的git教程使用的就是RSA算法）。