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 holdout," I have to stick with the outdated version of Mix Space.
-
Why did I wait until now instead of switching to Shiro as soon as 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 would often crash 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 the "fresh" feel of Kami. 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 (逃). -
Why don't I maintain Kami myself?
If I had that ability, 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 into the main content.
Main Content#
As suggested by the Shiro developer (Innei), it is best to deploy Shiro on Vercel. Local deployment will have to rely on self-sufficiency, and 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 roughly document the process, as 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
In theory, 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.
Get NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY 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:[email protected]",
"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": "Ying Te Er",
"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 it in docker-compose.yml or Dockerfile.
Using 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.
Get NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY 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 proxies, refer to the Mix Space documentation: https://mx-space.js.org/docs/extra. Thank you for reading.
This article is synchronized and updated to xLog by Mix Space. The original link is https://blog.insnhgd.com/posts/build/4