企业官网建设流程全解析

搭建个人博客

本地启动

安装Node.js、pnpm、Git、GitHub desktop

pnpm安装：npm install -g pnpm

Fork Firefly仓库：

打开GitHub desktop拉取代码

点击我自己的项目

用VScode打开项目

打开终端窗口

输入：pnpm install，安装依赖，出现Done即完成

输入：pnpm dev，启动项目

在浏览器输入网址：http://localhost:4321/，就可以看到博客界面了

修改页面和写博客可查看官方文档：https://docs-firefly.cuteleaf.cn/
官方文档写的很详细这里就不多赘述。

修改完毕后，将代码上传到GitHub

• 方法一：用 GitHubDesktop 上传代码
  

• 方法二：用 vscode 上传代码
  点击 Git 图标，并上传
  

如果没有该图标，点击查看下的源代码管理，启用Git

左键图标，点击保留源代码管理

部署博客

部署在Cloudflare Workers

点击右上角用户，选择语言为中文

点击计算下的Workers and Pages，点击创建应用程序

选择Connect Github

选择仓库，点击安装

点击项目，点击下一步

项目名称要与 wrangler.jsonc 的 name 一致

点击部署

部署完成后，点击域

复制URL网址即可访问（需VPN）

点击域名下的概览

点击添加域名

点击连接域名

输入域名后点击继续（域名需购买，看教程可点击目录）

选择免费计划

点击继续激活

点击确认

点击腾讯云的控制台–>域名注册–>我的域名：我的域名 - 域名注册 - 控制台

点击管理

在DNS解析点击修改DNS服务器

复制这两条配置

复制在腾讯云的修改DNS服务器

点击我已更新名称服务器

成功页面如下，可能要等几分钟才行

优选 IP：手动测速筛选国内三网（电信 / 联通 / 移动）低延迟、高速度、稳定连通的 CF 边缘节点 IP，域名 DNS 直接解析该 IP，强制走优质跨境节点，解决国内访问 CF 站点慢、打不开问题。

看Cloudflare 优选 IP+Workers 反代的解释，可点击目录：

优选域名

点击域名

点击DNS下的记录

点击添加记录

类型选择CNAME，名称随便填，目标：xxx.cf.090227.xyz，其中.cf.090227.xyz是固定的，而xxx可以随意填。注意代理状态要关闭

再添加一条记录：

名称填 blog.xxx(你的域名)

目标填上一条记录的名称

回到Workers and Pages，点击域

点击添加路由

blog.xxx/*，(xxx为你的域名)，点击添加路由

配置完毕后，输入：blog.xxx即可访问你的博客网站

Cloudflare 优选解析

我们先理解两个分层，一个是解析层，一个是规则层。

• 解析层

即DNS层，DNS会把你的域名指向优选IP、优选 CNAME 域名。前提是代理状态要关闭，不然无法自己指定快节点。

• 规则层

只有命中路由填写的域名，访问请求才会被转发给对应 Worker 执行

国内访问 CF 站点慢、打不开，优选 IP是手动测速筛选国内三网（电信 / 联通 / 移动）低延迟、高速度、稳定连通的 CF 中转站 IP，用优选IP可以加速你的网站。

购买域名

访问腾讯云购买域名

输入你的域名

点击购买

创建实名信息

通过实名审核后，即可点击购买

支付页面

购买成功页面

上传图片

配置Picgo的阿里云OSS

安装picgo：https://github.com/Molunerfinn/PicGo/releases

使用前要确保阿里云有余额，可以充了两块钱试试：https://billing-cost.console.aliyun.com/

打开OSS管理控制台：OSS管理控制台

点击Bucket列表，点击创建Bucket

填写名称与地域并完成创建

在权限控制的阻止公共访问下，关闭公共访问

读写权限改为公共读

打开picgo，点击图床设置下的阿里云OSS

图床配置名和设定Bucket就填你的Bucket名

存储区域填你选的地域，如深圳就是：oss-cn-shenzhen

点击头像下的访问控制

点击用户并创建用户

填写登录名称，点击确认 使用永久AccessKey访问

复制AccessKey ID和AccessKey Secret到picgo的阿里云设置里

点击登录名称

点击权限管理并新增授权

点击 AliyunOSSFullAccess 权限并确认

最后设置如下

点击上传图片，测试是否配置成功

点击你的Bucket，点击文件列表，查看是否有文件

打开typora，打开偏好设置

Typora 进入偏好设置 — 图像，选择插入图片时上传图片。上传服务选择 PicGo(app)，自定义命令填写 PicGo 所在路径。

例如我的路径是：D:\xiazairuanjian\PicGo\PicGo.exe

验证图片上传选项

显示验证成功

这样就可以把图片复制到编辑器中，也不会报错了。

可以愉快的写博客啦~