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.
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.
Switch to the Pages tab and click Connect to Git.
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.
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.
Click Save and Deploy, wait for the build to deploy, and if all goes well, it should be completed in about 30 seconds.
Return to the Pages management page, go to Custom Domain, click Set Custom Domain, and bind your front-end domain.
Wait for the status to change to Active, and open the domain to see the front-end page.
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.
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 (?
Bucket Configuration#
Enter the bucket, click settings, and copy the S3 API.
In the Public Access section below, bind a domain name.
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.
Select Create API Token.
Fill in a name arbitrarily, select Read and Write permissions, and then click Create API Token.
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.
Go to Cloudflare to Get Account ID and API Token#
Enter the Cloudflare console, go to any domain, and record the Account ID below.
Go to the upper right corner and click My Profile.
Go to the sidebar API Tokens, and click Create Token.
Click Edit Custom Token on the far right of the bottom and click Get Started.
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.
Click Create Token.
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.
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.
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.
Configure GitHub Actions#
Open your forked GitHub repository, go to Settings, Secrets and variables, Actions, Variables in order.
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:
Then go to Secrets.
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.
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.
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.
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:
Return to the front-end Pages settings you created earlier.
Change both APL_URL for production and preview to the back-end domain.
Go to the deployment page and click Retry Deployment.
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.
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