在Cloudflare Worker 上部署Hexo博客
本文最后更新于309 天前,其中的信息可能已经过时,如有错误请发送邮件到[email protected]

由于国内服务器配置域名需要备案,因此将部分域名托管在Cloudflare上,在加上Cloudflare提供了一个无服务器执行环境(Cloudflare Workers),允许我们创建新应用程序或扩充现有应用程序,而无需配置或维护基础架构,同时我们可以通过Wrangler(Cloudflare 开发者平台 CLI)将本地项目部署到Workers。

Wrangler
The Workers command-line interface, Wrangler, allows you to createtest, and deploy your Workers projects.
Use Wrangler
​​Bindings
Bindings allow your Workers to interact with resources on the Cloudflare developer platform, including R2KVDurable Objects, and D1.
Use Bindings
​​Playground
The Playground is a sandbox which gives you an instant way to preview and test a Worker directly in the browser against any site. No setup required.
Use the Playground

Cloudflare Workers · Cloudflare Workers docs

部署

环境搭建

在将本地项目部署到Cloudflare上及安装Wrangler时需要使用npm以及Node.js环境,在安装Hexo时还需Git环境。

npm 的发布是最新的稳定版本。安装 Node.js 时,会自动安装 npm。但是,npm 的发布频率比 Node.js 高,因此要安装最新的稳定版本的 npm,请在命令行上运行:latest

About npm CLI versions | npm Docs (npmjs.com)

因为Node.js软件包内含有npm,因此只需要下载最新(Wrangler requires a Node version of or later.16.17.0)的Node.js并安装,Node.js安装完成后,在命令终端窗口内执行下列命令来更新npm。

npm install npm@latest -g

安装Wrangler

Wrangler 是 Cloudflare 开发者平台命令行界面 (CLI),允许您管理 Worker 项目。将Wrangler 安装到您的每个本地项目中。这允许您和您的团队使用相同的 Wrangler 版本,控制每个项目的 Wrangler 版本,并在需要时回滚到早期版本的 Wrangler。

Wrangler (command line) · Cloudflare Workers docs

因此,建议在安装之前,先新建好专门用于Clouflare项目的文件夹,比如:在F盘新建CFWorekers,之后的命令行将在该目录下执行,方法:在CFWorkers目录中按住Shift+鼠标右键,选择“在终端中打开”,出现PS F:\CFWorkers>,之后用“$”替代“PS F:\CFWorkers>”。

同时,因为我们将Wrangler安装在本地项目(非全局安装)CFWorkers中,因此在命令前要加上npx才能正确运行Wrangler,例如:npx wrangler init --site hexo-blog

要在 Worker 项目CFWorkers中安装 Wrangler,请根据已有环境运行下列其中一个代码:

//npm环境
    npm install wrangler --save-dev
//yarn环境
    yarn add --dev wrangler

检查或更新Wrangler版本

//以下任意代码均可查看版本
npx wrangler --version
npx wrangler version
npx wrangler -v
//需要更新时,执行以下代码
npm install wrangler@latest

下载模板项目

运行下列命令,在CFWorkers中新建Workers的模板项目,命名为hexo-blog(“hexo-blog”可自拟)。

$ git clone --depth=1 --branch=wrangler2 https://github.com/cloudflare/worker-sites-template hexo-blog
$ cd hexo-blog
注:如果Git命令不能执行,请自行配置Git环境

hexo-blog文件夹内的目录结构

.
│  .gitignore
│  package-lock.json
│  package.json
│  wrangler.toml
│
├─public
│  │  404.html
│  │  favicon.ico
│  │  index.html
│  │
│  └─img
│          200-wrangler-ferris.gif
│          404-wrangler-ferris.gif
│
└─src
        index.js

下载安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

文档 | Hexo

所有必备的应用程序(npm、Node.js、Git)安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

安装 Hexo 完成后,执行下列命令,Hexo 将会在F:\CFWorkers\Hexo-local中新建所需要的文件。

$ npx hexo init F:\CFWorkers\Hexo-local
$ cd F:\CFWorkers\Hexo-local
PS F:\Wrangler\Hexo-local> npm install

配置及更新博客等步骤信息查看:配置 | Hexo

生成静态文件

使用Hexo生成静态文件,后续博客更新都需要执行此命令来生成静态文件,以便部署到Cloudflare中。

PS F:\Wrangler\Hexo-local>npx hexo generate

执行结束后,Hexo-local中会新增一个public文件夹,里面的是博客的静态文件,后续步骤需要用到。

获取Cloudflare API 密钥

登入 Cloudflare 帐号,并绑定你的域名。

使用 Wrangler 部署过程中需要使用,申请 API Token:边栏-Workers & Pages-Manage API tokens

在 API Token 申请界面选择“Edit Cloudflare Workers”模板,配置相应的权限后确定,得到Api-Tokens,保存备用(只出现一次,务必保存)。

配置Wrangler

使用文本编辑器打开wrangler.toml

name = "worker-sites-template"
main = "src/index.js"
compatibility_date = "2022-05-06"

site = { bucket = "./public" }

更加下方提示修改以上内容,保存。

name = "hexo-blog"    # 填写Workes名称,自拟。确定后不再变更
main = "src/index.js"
account_id = "84……8"    # 这里填写自己的Workers ID,在Workers面板中查找
workers_dev = true  # 使用custom_domain模式需要启用?false状态未测试。
routes = [
	{ pattern = "blog.example.net", custom_domain = true },
	{ pattern = "example.net", custom_domain = true }
]    # 将Worker项目绑定自定义域,前提:域名已托管在Cloudflare上。
compatibility_date = "2022-05-06"

site = { bucket = "../Hexo-local/public" }
     # 包含静态资源的目录,为相对于wrangler.toml文件的路径。

配置 Wrangler 全局密钥

$npx wrangler config
//根据提示,输入刚才保存的 Api-Tokens 运行验证即可完成全部配置。

部署到CF Workers

(在博客更新,且生成静态文件后)执行下列命令,将文件推送更新到Workers,结束。

 $npx wrangler deploy
如果以前没有使用过 Wrangler,它将尝试打开您的 Web 浏览器以使用您的 Cloudflare 帐户登录,并进行身份验证,之后您的项目将部署到 Cloudflare 全球网。

可能遇到的问题及解决方案

hexo git过程中报错

#在制定路径下输入
$cnpm install//忽略,不行再加上
$npx hexo s
#即可进行查看
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇