Preface#
Before we begin, let me talk about why I decided to abandon Kami and switch to Shiro. --> Skip the nonsense with one click
First of all, kami has not been maintained for a long time, and some updates from Mix Space have broken Kami's functionality. If I want to continue being a "kami die-hard fan," I must stick to using an outdated version of Mix Space.
-
Why did I wait until now to use Shiro instead of switching when Kami stopped being maintained?
One reason is that early versions of Shiro had a memory overflow bug (to be precise, it was in next.js), and local deployments often crashed due to memory exhaustion. I prefer to deploy my personal blog on my own server rather than on Vercel.
The second reason is that I prefer Kami's "fresh and clean" look. Although Shiro is also quite good and has made significant improvements in many areas compared to Kami, I still don't like some aspects of its design (running away). -
Why don't I maintain Kami myself?
If I had that capability, I would have developed my own frontend -_-Perhaps in a year, two years, or many years later, if I have enough capability, I might switch back to Kami or have developed my own blog frontend?
Having briefly discussed this, let's get to the main content.
Main Content#
As suggested by the Shiro developer (Innei), it is best to deploy Shiro on Vercel. If you choose local deployment, you'll have to rely on yourself. As of today (January 18, 2024), we cannot be sure that local deployment of Shiro won't encounter other issues.
Preparations#
Even though we are deploying locally, we still need to configure Clerk for login.
For Clerk configuration details, it's better to refer to the Shiro documentation: https://mx-space.js.org/themes/shiro#%E6%89%93%E5%BC%80-clerk-%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE
Below, we assume NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is pk_test_aaaaaaaaaaaaaaaaaxxxxxx.
Bare Metal Deployment#
Here, I will briefly record the process since I had already deployed Mix Space before, and ultimately I chose to deploy Shiro using Docker to prevent memory overflow from crippling the entire host.
My server environment: Arch Linux
Theoretically, servers with Linux kernel version >= 4.19 can deploy Mix Space and Shiro.
Required dependencies: Node.js, MongoDB, Redis, pnpm, pm2
Clone the Project#
git clone https://github.com/Innei/Shiro
Pull Dependencies and Compile#
Install dependencies
cd Shiro
pnpm install
Don't forget to configure ENV
Edit the .env file like this:
NEXT_PUBLIC_API_URL=http://127.0.0.1:2333/api/v2
NEXT_PUBLIC_GATEWAY_URL=http://127.0.0.1:2333/
NEXT_PUBLIC_API_URL=https://blog.insnhgd.com/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://blog.insnhgd.com
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aaaaaaaaaaaaaaaaaxxxxxx
## Clerk
CLERK_SECRET_KEY=sk_test_***************
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
OPENAI_API_KEY=
TMDB_API_KEY=
Replace NEXT_PUBLIC_API_URL, NEXT_PUBLIC_GATEWAY_URL, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, and CLERK_SECRET_KEY with your actual values.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY can be obtained from Clerk.
Building
pnpm build
Theme Configuration#
After completing the above steps, you also need to set the theme configuration in Mix Space.
In Mix Space, go to the "Configuration and Cloud Functions" page to add the configuration.
Name: shiro
Reference: theme
Data Type: JSON
Data (what I actually use):
{
"footer": {
"otherInfo": {
"date": "2023-{{now}}"
},
"linkSections": [
{
"name": "About",
"links": [
{
"name": "About this site",
"href": "/about-site"
},
{
"name": "About me",
"href": "/about-me"
},
{
"name": "About this project",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "More",
"links": [
{
"name": "Timeline",
"href": "/timeline"
},
{
"name": "Friend Links",
"href": "/friends"
}
]
},
{
"name": "Contact",
"links": [
{
"name": "Leave a message",
"href": "/message"
},
{
"name": "Email",
"href": "mailto:insnh-gd@qq.com",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/insnh-gd",
"external": true
}
]
}
]
},
"config": {
"site": {
"favicon": "https://pic.insnhgd.com/images/2023/06/28/favicon.svg"
},
"custom": {
"scripts": null,
"styles": null
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "Hi, I'm ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "Yingter",
"class": "font-medium mx-2 text-4xl"
},
{
"type": "h1",
"text": "👋。",
"class": "font-light text-4xl"
},
{
"type": "br"
},
{
"type": "h1",
"text": "A wild newbie operator",
"class": "font-light text-4xl"
},
{
"type": "code",
"text": "<Dev & Ops/>",
"class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
},
{
"type": "span",
"class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
}
]
},
"description": "A person learning web development"
},
"module": {
"bilibili": {
"liveId": 689348740
},
"activity": {
"enable": true,
"endpoint": "/fn/ps/update"
}
}
}
}
Start!#
Use the pm2 tool to run and manage the Shiro process
pm2 start
If all goes well, you should be able to see Shiro successfully at https:///2323.
Docker Deployment#
Docker deployment is more convenient, but you still need to build Shiro when constructing the image.
::: info
Here I use docker-compose to build the Docker image.
:::
Clone the Project#
git clone https://github.com/Innei/Shiro
Configure ENV#
Since this is a Docker deployment, you will naturally modify the docker-compose.yml or Dockerfile.
Taking docker-compose.yml as an example:
version: "3"
services:
shiro:
container_name: shiro
build:
context: .
args:
- BASE_URL=https://blog.insnhgd.com
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aaaaaaaaaaaaaaaaaxxxxxx
- CLERK_SECRET_KEY=sk_test_***************
restart: always
ports:
- 2323:2323
Replace BASE_URL, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, and CLERK_SECRET_KEY with your actual values.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY can be obtained from Clerk.
Build the Image#
docker-compose build
Start!#
After a successful build, a Docker container named "shiro" will be automatically created.
docker-compose up -d
If all goes well, you should be able to see Shiro successfully at https:///2323, and the "shiro" container will start automatically on boot (if you have enabled the Docker service).
That's all for now. For configurations related to frontend reverse proxy, refer to the Mix Space documentation: https://mx-space.js.org/docs/extra. Thank you for reading.
This article is synchronized and updated by Mix Space to xLog. The original link is https://blog.insnhgd.com/posts/build/4