基于Cloudflare woker + CF R2 + Grok Xai的Web Archive

2025 年 3 月 9 日 星期日(已编辑)
17
摘要
Web Archive 是一个网页归档工具，包含浏览器插件、服务端和 web 客户端，通过 Cloudflare Worker 部署。功能包括归档、搜索、分享、文件夹分类、AI 生成 tag 分类以及阅读模式。部署步骤详述，包括使用 Cloudflare Workers、一键部署、设置管理员密码等。提供 Chrome 和 Firefox 浏览器插件的下载链接。支持本地开发部署，要求安装 Node.js 等工具，并配置反向代理。插件易于使用，支持自定义域名以提高适用性。

基于Cloudflare woker + CF R2 + Grok Xai的Web Archive

有时候一些很好的技术文章想要收集一下
偶然看见这个项目 我非常喜欢 于是写个教程(主要是记录一下，因为部署很简单)

Web Archive 是一个网页归档工具，包含以下几个部分：

  • 浏览器插件：将网页保存为网页快照，并上传到服务端。
  • 服务端： 接收浏览器插件上传的快照，并存储在数据库和存储桶中。
  • web 客户端： 查询快照并展示。

服务端基于 Cloudflare Worker 的全套服务，包含 D1 数据库、R2 存储桶。

功能

  • 网页归档，搜索，分享
  • 文件夹分类
  • 移动端适配
  • AI 生成 tag 分类
  • 阅读模式

插件下载：

部署

一键部署

  • 打开https://web-archive-docs.pages.dev/deploy.html
  • 点一下Deploy with Workers
  • 授权一下GitHub
  • 再去Cloudflare官网复制Wokers Account ID
  • 生成Api令牌，使用Cloudflare Workers模板
  • 手动添加一条D1的编辑权限
  • 有了Account ID和Api Token按要求填入
  • 然后下一步允许Workflows，这样它以后就会自动更新到新版本
  • 第一次应该会失败？重新Re-run all jobs后就部署成功了（也许要三次？）
  • 这里进去设置一下管理员密码就可以开始使用了（pages.dev被q了），所以最好在自定义域里自定义域名（？）

配置使用Xai

API URL ：

https://api.x.ai/v1/chat/completions

模型：

grok-2-latest

当然你想用OpenAI也是可以的 还有Cloudflare的AI也行

本地开发部署 参考：

https://web-archive-docs.pages.dev/contribute.html#%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA

安装nodejs npm git pm2 pnpm

apt install nodejs npm git
npm install -g pnpm@latest-10 pm2
git clone https://github.com/Ray-D-Song/web-archive.git
cd web-archive

初始化本地环境

pnpm install
pnpm init:local
输入y回车

pm2启动后端、前端并开机自动启动

pm2 start pnpm --name "web-archive-server" -- run dev:server  
pm2 start pnpm --name "web-archive-web" -- run dev:web
pm2 save
pm2 startup
pm2 logs

反向代理

看web-archive-web的端口 然后用caddy或nginx反代一下
我用的是caddy，端口我的是7749就如下

test.*****.de {
    reverse_proxy 127.0.0.1:7749
}

启动caddy

sudo systemctl reload caddy

D1和R2在/web-archive/packages/server/.wrangler/state/v3文件下面

插件使用

插件下载：

效果展示

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...