笨蛋ovo

笨蛋ovo

Rin Blog Simple Deployment Tutorial

image.png

Introduction#

  • What is Rin
    A blog based on the Cloudflare Pages + Workers + D1 + R2 stack
    In simple terms: a purely static front-end page, with the back-end providing APIs for the front-end to fetch articles and configuration information, all done on Cloudflare.

  • Why should you choose it
    No server or filing required, just a domain name pointing to Cloudflare, and completely free within a certain usage limit (sufficient for small personal blogs).

Who is it suitable for#

  • Those who do not want to set up a server or maintain a dynamic blog
  • Those pursuing lightweight solutions
  • Those who enjoy cloud-native technologies
  • Those who hope everything can be free

Who might it not be suitable for#

  • Those pursuing grand and comprehensive solutions
  • Those who want everything without effort
  • Those with many existing blog articles that need to be migrated
    Currently, Rin only supports bulk importing articles from Wordpress, and migrating data from other blogs may be cumbersome.

Note#

Currently, Rin is in its early stages, and both functionality and stability may be somewhat lacking, so please be mentally prepared before deployment.
If you encounter issues while using it, first check the Issues to see if someone has already reported it.

Cloudflare requires binding a payment method to enable R2 functionality; you can bind Paypal or a bank card to activate it (using a prepaid card is also possible, as it does not verify the card).

The version of Rin used in this article is the official version, while the version used on this site is a personal modified version. Since 99% of the code comes from ChatGPT and the implementation relies on the defense, I will not consider submitting my version to the official repository. If needed, you can deploy it yourself.
If you encounter issues with my modified version, please contact me first instead of the official repository to avoid confusion.

Preparation#

You need to prepare the following:

  • A GitHub account
  • A Cloudflare account, with your domain already resolved
  • Bring your brain, hands, and patience

Official Deployment#

First, open the Rin project address and click the Fork button.
image.png
Since Rin is a front-end and back-end separated project, we need to deploy the front-end and back-end separately.

Front-end#

Open the Cloudflare console, go to the sidebar Workers and Pages, and then click Create.
image.png
Switch to the Pages tab and click Connect to Git.
image.png
If you have not used Cloudflare Pages before, you will need to authorize it here.
After authorization, select the repository you forked, and then click Start Setup below.
image.png
On the settings page, fill in the following content:

Build command: bun b
Build output directory: client/dist

Leave other projects at their default values.
After filling in, click on Environment Variables (Advanced) and add the following variables (make sure there are no extra spaces):

NAME=Xeu # Nickname, displayed in the upper left corner
DESCRIPTION=Omnivore # Personal description, displayed below the nickname in the upper left corner
AVATAR=https://avatars.githubusercontent.com/u/36541432 # Avatar URL, displayed in the upper left corner
API_URL=https://rin.xeu.life # Server domain name, you can use the default value to see the effect, and modify it after deploying the server
PAGE_SIZE=5 # Default page size, recommended 5
SKIP_DEPENDENCY_INSTALL=true
UNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i

Do not modify the last two environment variables SKIP_DEPENDENCY_INSTALL and UNSTABLE_PRE_BUILD, just add them as they are.
image.png
Click Save and Deploy, wait for the build to deploy, and if all goes well, it should be completed in about 30 seconds.
image.png
Return to the Pages management page, go to Custom Domain, click Set Custom Domain, and bind your front-end domain.
image.png
Wait for the status to change to Active, and open the domain to see the front-end page.
image.png
Congratulations, you have completed half of the operation.
Actually, the real complexity lies in the back-end deployment.

Back-end#

Here, you do not need to create a new project in Cloudflare Workers; the back-end is deployed using GitHub Actions, so you just need to configure it on the GitHub side.

Configure Cloudflare R2 Bucket#

Create a Bucket#

Go to the Cloudflare console, go to the sidebar R2, and click Create Bucket.
image.png
Fill in a name arbitrarily, then click Create Bucket.
Provide location hint can be left unselected; choosing the Asia-Pacific region may provide some speed improvement (?
image.png

Bucket Configuration#

Enter the bucket, click settings, and copy the S3 API.
image.png
In the Public Access section below, bind a domain name.
image.png
In the CORS Policy section, click Add CORS Policy.
Note: This step may not be necessary, but to avoid issues, it is recommended to configure cross-origin in advance.
Replace https://blog.obdo.cc below with your own front-end domain.

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

Return to Overview, click Manage R2 API Tokens.
image.png
Select Create API Token.
image.png
Fill in a name arbitrarily, select Read and Write permissions, and then click Create API Token.
image.png
Record the Access Key ID and Secret Access Key below.
The person who obtains the token will gain control of the account, so do not send the token to others or make it public.
image.png

Go to Cloudflare to Get Account ID and API Token#

Enter the Cloudflare console, go to any domain, and record the Account ID below.
image.png

Go to the upper right corner and click My Profile.
image.png
Go to the sidebar API Tokens, and click Create Token.
image.png
Click Edit Custom Token on the far right of the bottom and click Get Started.
image.png
Grant the token Edit permissions for Workers R2 Storage, D1, and Workers Scripts.
TTL can be left blank for permanent validity or set for a specific time (the token needs to be regenerated before expiration).
As shown below, then click Continue to Show Summary.
image.png
Click Create Token.
image.png
Record the generated token for future use.
The person who obtains the token will gain control of the account, so do not send the token to others or make it public.
image.png

Integrate GitHub OAuth#

Rin's login system uses GitHub authorization, so you need to apply for a GitHub OAuth App first.

Go to GitHub OAuth Apps, click New OAuth App.
Fill in the following parameters:
Homepage URL fill in the front-end address above.
Authorization callback URL fill in https://<your backend address>/user/github/callback.
The backend address is the domain you will bind to your Cloudflare Workers later; I will use https://rin.obdo.cc/user/github/callback as an example.
image.png
Click Register application.
Then click Generate a new client secret; you may need to perform two-step verification here.
Record the generated Client ID and Client secret.
image.png

Configure GitHub Actions#

Open your forked GitHub repository, go to Settings, Secrets and variables, Actions, Variables in order.
image.png
Add the following values by clicking New repository variables one by one:

FRONTEND_URL=Front-end address, fill in the domain bound to the front end above, such as https://blog.obdo.cc
S3_BUCKET=R2 bucket name, such as rin-storage in the above example
S3_REGION=auto
S3_ENDPOINT=S3 API of R2, remove the path after the domain, such as https://1234567890abcdef1234567890abcd.r2.cloudflarestorage.com
S3_ACCESS_HOST=Public access domain of R2, such as https://rin-storage.obdo.cc in the above example

After adding, it should look like this:
image.png
Then go to Secrets.
image.png
Add the following values by clicking New repository secret one by one.
Password Generator

CLOUDFLARE_ACCOUNT_ID=Cloudflare Account ID
CLOUDFLARE_API_TOKEN=Cloudflare User API Token value
RIN_GITHUB_CLIENT_ID=GitHub Client ID generated above
RIN_GITHUB_CLIENT_SECRET=GitHub Client Secret generated above
JWT_SECRET=Encryption key, you can randomly generate one using a password generator
S3_ACCESS_KEY_ID=Access Key ID for the bucket API
S3_SECRET_ACCESS_KEY=Secret Access Key for the bucket API

After adding, it should look like this.
Since these are Secrets, the values will not be displayed, so make sure to confirm that they are added correctly.
image.png
Go to the Actions interface of your forked repository.
The first time you enter, there will only be one button on the page; click it to enable Actions functionality.
Go to the Deploy menu and click Run workflow.
image.png
Wait for about a minute for the green check mark to appear, indicating that the deployment is complete.
If a cross appears, please check if there is an error in the configuration of the environment variables.
image.png

Connect Front-end and Back-end#

First, congratulations to yourself; you have completed the deployment of both the front-end and back-end. The only thing left is to connect the front-end and back-end.
Go to the Cloudflare console, go to the sidebar Workers and Pages.
If everything went smoothly in the previous deployments, you should see a Worker named rin-server here.
Enter the settings of rin-server, go to Triggers.
Click Add Custom Domain to bind your back-end domain.
Click Add Route, and add front-end domain/sub/* and front-end domain/seo/* in order.
As shown in the picture below:
image.png
Return to the front-end Pages settings you created earlier.
Change both APL_URL for production and preview to the back-end domain.
image.png
Go to the deployment page and click Retry Deployment.
image.png
Wait for one to two minutes for the deployment to complete.
Open your front-end domain and click GitHub Login in the upper right corner.
The first person to log in will become the administrator of the site.
image.png
Congratulations, you have successfully created a Rin blog 🎉

This article is synchronized and updated to xLog by Mix Space.
The original link is https://blog.baka.plus/posts/tech/rin-blog-deployment-tutorial


Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.