自制免费无服务器博客网站,白嫖可爱的秘诀和实战指南

访客 3C数码 3.9K+
白嫖建立了一个非常有趣的 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全球面包最新&amp。& 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登录。第一个登录的人将成为站点管理员。图片

标签: 令牌

抱歉,评论功能暂时关闭!