白嫖建立了一个非常有趣的 blog 并且他能够实现一个无服务器的博客网站。这个博客可以访问者从任何设备上浏览,并可以支持多种语言和社交媒体帐户。白嫖利用SEO优化技巧,确保他的博客可以被更多的搜索引擎找到。他还提供了有效的社交媒体分享功能,使他的粉丝能够与更多的人互动。
没有服务器愿意建立自己的博客网站。你可以使用GitHub,concept然后通过管理软件部署管理,比如Gridea,Hexo,NotionNext,Publii等等。
今天我想分享一个可以直接部署在Cloudflare中的博客程序“Rin”。它不需要服务器,只是你需要一个域名来解析。据介绍,该程序基于Cloudflare页面+Workers+D1+R2 family bucket。
图片
特征
支持Github OAuth登录。默认情况下,第一个登录用户拥有管理权限,其他所有用户都是普通用户。
支持文章的写作和编辑
支持任意文章修改/编辑的本地实时保存,多篇文章互不干扰。
支持设置为只对自己可见,可以作为云同步的草稿箱,也可以记录私密性强的内容。
支持拖拽/粘贴将图片上传到支持S3协议的桶中并生成链接。
支持设置文章别名。
主页列表中没有列出支持文章。
支持添加好友,同时后端每20分钟定时检查更新好友的可访问状态。
支持回复评论文章/删除评论。
支持通过Webhook发送评论通知。
支持自动识别文章中的第一张图片,并在文章列表中显示为标题。
支持输入标签文本,如“# blog # deployment #Cloudflare”,并自动将其解析为标签。
准备工作/即将开始工作
GitHub账户
一个Cloudflare帐户,并且已经解析了自己的域名。
正式部署
首先,打开Rin项目地址,点击Fork按钮。
项目地址:
https://github.com/oxeu/rin
图片因为Rin是一个前后端分离的项目,所以我们需要分别部署前后端。
前端设置
打开Cloudflare控制台,转到侧栏中的Workers and Pages,然后单击Create。
控制台:
https://dash.cloudflare.com。
转到Pages选项卡并单击connect to Git。图片如果您以前没有使用过Cloudflare Pages,您将在此获得授权。授权后,选择您的Fork的存储库,然后单击下面的Start Settings。图片进入设置页面后,填写以下内容
Build命令:bun b Build输出目录:client/dist
未提及的项目保留默认值。
填写后点击环境变量(高级),添加以下变量(注意不要有多余的空框)。
NAME=Xeu #昵称,显示在左上角DESCRIPTION= omnivore #个人描述,显示在昵称下方左上角avatar = https://avatars.githubusercontent.com/u/36541432 #头像地址,API_URL=https://rin.xeu.life #服务器域名显示在左上角。可以先用默认值看看效果,部署服务器后再修改PAGE_SIZE=5 #的默认页面大小。建议5 skip _ dependency _ install = true unstable _ pre _ build = asdf安装包最新&& ampasdf全球面包最新&。& ampBun我
不修改环境变量SKIP_DEPENDENCY_INSTALL和UNSTABLE_PRE_BUILD的最后两行,按原样添加即可。
点击“保存”和“部署”图片,等待构建和部署。如果不出意外,30秒左右就能完成部署。图片返回Pages管理页面,转到自定义域,点击设置自定义域,绑定自己的前端域名。图片等待状态变为有效,打开域名就能看到首页。图片后端设置
在这里,你不需要去Cloudflare Workers建立一个新的项目。后端由GitHub Actions部署。你只需要在这里配置GitHub。
配置Cloudflare R2存储桶。
新存储桶
进入Cloudflare控制台,在侧边栏中转到R2,然后单击New Bucket。
控制台:
https://dash.cloudflare.com。
随意填写图片名称,然后点击创建桶,提供位置提示。你可以不选,选亚太可能会得到一些速度上的提升。图片桶配置
进入桶,点击设置,并复制S3 API。
图片绑定了下面公共访问中的一个域名。在图片下方,单击添加CORS策略。
注意:这一步可能没必要,但建议提前配置跨域,以免出现问题。
用您自己的前端域名替换下面的域名。
[{ " allowed origins ":[" https://blog . obdo . cc "]," allowed methods": ["get "," delete "," head "," post "," put"]," allowed headers ":[" content-type "]}
图像选择创建API令牌随便填写图片名称,管理员读写,然后点击创建API令牌。在图片下方记录访问密钥ID和机密访问密钥。获得令牌的人将获得帐户的控制权。请勿将令牌发送给他人或随意公开。图片转到Cloudflare获取帐户ID和API令牌。
进入Cloudflare控制台,随意输入一个域名,记录下面的账号ID。
控制台:
https://dash.cloudflare.com。
图片在右上角进入我的个人资料。图片在侧边栏输入API令牌,点击创建令牌。单击图片底部编辑自定义令牌右侧的开始使用。该图片为R2工人提供了编辑权限,以存储令牌的D1工人脚本。
TTL可以让空永久生效,也可以设置一个时间(令牌过期前需要重新生成)。
如下图所示,然后点击继续显示摘要。
单击图像以创建令牌。图片记录生成的令牌以备后用。
获得令牌的人将获得帐户的控制权。请勿将令牌发送给他人或随意公开。
图像访问GitHub OAuth
Rin的登录系统使用GitHub授权,所以你需要先申请一个GitHub OAuth App。
进入GitHub OAuth应用程序,点击新建OAuth应用程序。
OAuth:
https://github . com/settings/developer
根据以下参数填写
首页网址:填写上面的前置地址。
授权回调URL:填写https:// /user/github/callback
这里的后端地址就是你的Cloudflare工作人员需要绑定的域名。
单击图片的注册应用程序。
然后单击生成新的客户端密码,这可能需要两步验证。
记录生成的客户端ID和客户端密码。
图片配置GitHub操作
打开你Fork的GitHub仓库,依次去设置,秘密和变量,动作和变量。
点击图片中的以下值,依次点击新建库变量并添加。
FRONTEND_URL=前端地址,填写上面前端绑定的域名,比如https://blog . obdo . CCS 3 _ bucket = R2桶名,比如上面例子中rin-storages 3 _ region = autos 3 _ endpoint = R2的S3 API,去掉域名后面的路径。比如https://1234567890 abcdef 1234567890 ABCD . R2 . cloudflarestorage . com S3 _ access _ host = R2。比如上面例子中的https://rin-storage . obdo . cc
添加后应该是这样的。
这张照片然后去了秘密。点击图片中的以下值,依次点击新建存储库密码并添加。
密码生成器:
https://www.avast.com/random-password-generator.
cloud flare _ account _ ID = account idcloud flare _ API _ token =用户API令牌值RIN _ GITHUB _ CLIENT _ ID = GITHUB clientidrin _ GITHUB _ CLIENT _ secret =上面生成的。Github客户端SecretJWT_SECRET=加密密钥,可以使用密码生成器
随机生成一个S3 _访问_密钥_ID=桶API的访问密钥ID S3 _秘密_访问_密钥=桶API的秘密访问密钥。添加后应该是这样的
。
因为是机密,所以不会显示值。添加的时候一定要正确添加。
图片进入你叉仓的动作界面。
第一次输入时,页面上只会显示一个按钮。点击它打开动作功能。
进入部署菜单,然后单击运行工作流。
等待图片大约一分钟,等待绿色勾号表示部署完成。如果显示叉号,请检查环境变量的配置是否错误。图片对接前端和后端
首先提前恭喜自己,已经完成了前端和后端的部署,接下来就是对接前后端了。
转到Cloudflare控制台,并转到侧栏中的Workers和Pages。
如果在前面的部署中一切顺利,您应该在这里看到一个名为rin-server的工人。
转到rin-server的设置并转到触发器。
点击添加自定义域,绑定自己的后端域名。
点击添加路由,然后添加前端域名/sub/*前端域名/seo/*
如下图所示
图片回到之前创建的前端页面设置。
将生产和预览的APL_URL修改为后端域名。
画面进入部署页面,点击重试部署。等一两分钟部署完成,打开你的前端域名,点击右上角的GitHub登录。第一个登录的人将成为站点管理员。图片
标签: 令牌