笨蛋ovo

笨蛋ovo

首頁封存

Rin 博客簡易部署教程

266
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
Rin是基于Cloudflare Pages + Workers + D1 + R2的博客，适合不想架设服务器、追求轻量化、喜欢云原生、希望免费使用的人。需准备GitHub和Cloudflare账号，配置前端和后端即可部署。前端部署在Cloudflare Pages，后端采用GitHub Actions，需要配置Cloudflare R2存储桶。详细步骤见原文。

image.png

寫在前面#

  • Rin 是什麼
    一款基於 Cloudflare Pages + Workers + D1 + R2 全家桶的博客
    說人話：前端純靜態頁面，後端提供 API 給前端拉取文章和配置信息，一切都在 Cloudflare 上完成

  • 為什麼應該選擇它
    無需伺服器無需備案，只需要一個解析到 Cloudflare 的域名，且在一定的用量內完全免費（對於小型個人博客綽綽有餘）

它適合哪些人#

  • 不想架設伺服器、維護動態博客的人
  • 追求輕量化的人
  • 喜歡雲原生的人
  • 希望一切皆可白嫖的人

它可能不適合的人#

  • 追求高大全的人
  • 既要又要事多的人
  • 已有較多博客文章需要遷移的人
    目前 Rin 僅支持從 Wordpress 批量導入文章，其他博客的數據遷移可能會較為繁瑣

注意#

目前 Rin 屬於剛起步階段，功能還是穩定性上都稍不盡人意，請在部署前做好心理準備
如果在使用中遇到問題，先去 Issues 看看有沒有人已經提出過

Cloudflare 需要綁定支付方式才可啟用 R2 功能，你可以綁定 Paypal 或銀行卡來激活 （料卡也不是不行，它不驗卡的）

本文所使用的 Rin 為 官方版本，而本站所使用的為 個人修改版，由於 99% 的代碼都來自 ChatGPT 而且實現方式都是依托答辯， 不會考慮將自己的版本提交官方。如果有需要可以自行部署
如果使用我的修改版遇到了問題，請先行聯繫我而不是官方倉庫以免造成困擾

準備工作#

你需要先準備以下內容

  • 一個 GitHub 帳號
  • 一個 Cloudflare 帳號，同時已經解析自己的域名
  • 帶上腦子和手還有耐心

正式部署#

首先打開 Rin 項目地址，點擊 Fork 按鈕
image.png
由於 Rin 是一個前後端分離的項目，我們需要分別部署前端和後端

前端#

打開 Cloudflare 控制台，進入側邊欄的 Workers 和 Pages，然後點擊 創建
image.png
轉到 Pages 選項卡，點擊 連接到 Git
image.png
如果你之前沒有使用過 Cloudflare Pages，那麼這裡會讓你進行授權
授權之後，選擇你所 Fork 的存儲庫，然後點擊 下方的 開始設置
image.png
進入設置頁後，填寫以下內容

構建命令：bun b
構建輸出目錄：client/dist

沒有提到的項目保持默認值
填寫之後點開環境變量（高級），添加以下變量（注意不要有多餘的空格）

NAME=Xeu # 昵称，显示在左上角
DESCRIPTION=雜食動物 # 個人描述，顯示在左上角暱稱下方
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 install bun latest && asdf global bun latest && bun i

最後兩行環境變量 SKIP_DEPENDENCY_INSTALL 和 UNSTABLE_PRE_BUILD 不要修改，按原樣添加即可
image.png
點擊 保存並部署，等待構建部署，不出意外的話約 30s 後即可部署完成
image.png
回到 Pages 管理頁，轉到 自定義域，點擊 設置自定義域，綁定自己的前端域名
image.png
等待狀態變為 有效，打開域名即可看見前端頁面
image.png
至此，恭喜你，已經完成了一半的操作
其實真正複雜的是後端的部署

後端#

這裡並不需要自行去 Cloudflare Workers 新建項目，後端採用 GitHub Actions 部署，你只需要配置好 GitHub 這邊就行

配置 Cloudflare R2 存儲桶#

新建存儲桶#

進入 Cloudflare 控制台，轉到側邊欄的 R2，點擊 新建存儲桶
image.png
隨意填入名稱，然後點擊 創建存儲桶
提供位置提示 可不選，選擇亞太地區也許能獲得一部分速度提升（？
image.png

存儲桶配置#

進入存儲桶，點擊設置，複製 S3 API
image.png
在下方 公開訪問 中綁定一個域名
image.png
下方 CORS 策略，點擊 添加 CORS 策略
注：這一步可能並不需要，但為了避免問題還是建議提前配置跨域
將下方的 https://blog.obdo.cc 自行替換為自己的前端域名

[
  {
    "AllowedOrigins": [
      "https://blog.obdo.cc"
    ],
    "AllowedMethods": [
      "GET",
      "DELETE",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "Content-Type"
    ]
  }
]

回到 概述，點擊 管理 R2 API 令牌
image.png
選擇 創建 API 令牌
image.png
名稱隨便填，權限選擇 管理員讀和寫，然後點擊 創建 API 令牌
image.png
記錄下下方的 訪問密鑰 ID 和 機密訪問密鑰
獲得令牌的人會獲得帳戶的控制權，請不要將令牌隨意發送給他人或公開
image.png

前往 Cloudflare 獲取 账户 ID 和 API 令牌#

進入 Cloudflare 控制台，隨意進入一個域名，記錄下方的 帳戶 ID
image.png

進入右上角的 我的個人資料
image.png
進入側邊欄的 API 令牌，點擊 創建令牌
image.png
點擊最下方 編輯自定義令牌 右側的 開始使用
image.png
為令牌授予 Workers R2 存儲 D1 Workers 腳本 的 編輯 權限
TTL 可以留空以永久生效，也可以設置一個時間（過期前需要重新生成令牌）
如下圖所示，然後點擊 繼續以顯示摘要
image.png
點擊 創建令牌
image.png
記錄下生成的令牌以便後續使用
獲得令牌的人會獲得帳戶的控制權，請不要將令牌隨意發送給他人或公開
image.png

接入 GitHub OAuth#

Rin 的登錄系統採用的是 GitHub 授權，因此你需要先去申請一個 GitHub OAuth App

進入 GitHub OAuth Apps，點擊 New OAuth App
按照以下參數進行填寫
Homepage URL 填寫上面的前端地址
Authorization callback URL 填寫 https://<你的後端地址>/user/github/callback
這裡的後端地址即後面你的 Cloudflare Workers 需要綁定的域名，我這裡以 https://rin.obdo.cc/user/github/callback 為例
image.png
點擊 Register application
然後點擊 Generate a new client secret，這裡可能會需要進行二步驗證
記錄下生成的 Client ID 和 Client secret
image.png

配置 GitHub Actions#

打開自己 Fork 的 GitHub 倉庫，依次轉到 Settings、Secrets and variables、Actions、Variables
image.png
將以下的值，依次點擊 New repository variables 並添加

FRONTEND_URL=前端地址，填寫上文前端所綁定的域名，如 https://blog.obdo.cc
S3_BUCKET=R2 存儲桶名稱，如上文示例中的 rin-storage
S3_REGION=auto
S3_ENDPOINT=R2 的 S3 API，去掉域名後面的路徑，如 https://1234567890abcdef1234567890abcd.r2.cloudflarestorage.com
S3_ACCESS_HOST=R2 公開訪問域名，如上文示例中的 https://rin-storage.obdo.cc

添加好之後應該是這樣的
image.png
然後轉到 Secrets
image.png
將以下的值，依次點擊 New repository secret 並添加
密碼生成器

CLOUDFLARE_ACCOUNT_ID=Cloudflare 的 帳戶ID
CLOUDFLARE_API_TOKEN=Cloudflare 的 用戶API令牌 值
RIN_GITHUB_CLIENT_ID=上文生成的 Github Client ID
RIN_GITHUB_CLIENT_SECRET=上文生成的 Github Client Secret
JWT_SECRET=加密用的密鑰，你可以使用密碼生成器隨機生成一個
S3_ACCESS_KEY_ID=存儲桶API的 訪問密鑰ID
S3_SECRET_ACCESS_KEY=存儲桶API的 機密訪問密鑰

添加好之後應該是這樣的
由於是 Secrets 所以不會顯示值，添加時務必確認添加正確
image.png
進入你 Fork 倉庫的 Actions 界面
第一次進入時頁面上只會顯示一個按鈕，點擊之後開啟 Actions 功能
進入 Deploy 菜單，點擊 Run workflow
image.png
静待約一分鐘左右，等待出現綠勾代表部署完成
如果顯示的是叉請檢查環境變量的配置是否有誤
image.png

對接前後端#

首先，提前祝賀下自己，你已經完成了前端與後端的部署，接下來只差最後一步，就是對接前後端了
進入 Cloudflare 控制台，轉到側邊欄的 Workers 和 Pages
如果前面部署的一切順利，這裡你應該會看到一個名為 rin-server 的 Worker
進入 rin-server 的設置，轉到 觸發器
點擊 添加自定義域，綁定自己的後端域名
點擊 添加路由，依次加入 前端域名/sub/* 前端域名/seo/*
如下圖所示
image.png
回到前面創建的前端 Pages 設置
將 製作 與 預覽 的 APL_URL 均修改為後端域名
image.png
進入部署頁，點擊 重試部署
image.png
等待一到兩分鐘部署完成
打開你的前端域名，點擊右上角的 GitHub 登錄
第一個登錄的人會成為站點的管理員
image.png
至此，大功告成，恭喜你擁有了一個 Rin 博客 🎉

此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://blog.baka.plus/posts/tech/rin-blog-deployment-tutorial

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。