banner
libxcnya.so

libxcnya.so

Nothing...
telegram
twitter
github
email
HomeArchives

Mix-Space Setup from Beginner to Expert

#MX-Space#搭建451
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
"Mix-Space" is a new open-source blog project developed by Innei. It takes place in a fantasy world called "Github" where chosen individuals are granted the power of "Node.JS" to code freely. Players take on the role of a mysterious character named "Developer" and must team up with unique coders to defeat enemies and uncover the truth of Mix-Space. The necessary materials include a server, domain name, Docker, Node.JS, Redis, Git, Git LFS, and MongoDB. Players can set up the backend using Docker or manually, and the frontend using Kami or Shiro themes. Additionally, local setup instructions are provided for those who want to host the project on their own server.

Preface#

You are right, but "Mix-Space" is a brand new open-source blog project independently developed by Innei. The project takes place in a fantasy world called "Github," where the chosen ones will be granted "Node.JS," guiding the power of the keyboard. You will play a mysterious role named "Developer," encountering coders with unique personalities and abilities in free coding, defeating strong enemies together, and retrieving the lost open-source agreements—while gradually uncovering the truth of "Mix-Space."

Preparation Materials#

The demo server for this article is provided by Rainyun

  • One VPS/server (This article uses Rainyun's 8c16g server in Los Angeles, USA, with Ubuntu 20.04 and the Baota panel pre-installed)
  • One domain name
  • A wise brain
  • Agile hands

Installation Environment#

Docker#

curl -fsSL https://get.docker.com | bash

Node.JS#

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Redis#

apt install redis

Git#

apt install git

Git LFS#

[!NOTE]

You can skip this if you are not using the Kami theme

curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs

MongoDB#

Please refer to the MongoDB official website
After installation, you need to start it manually

systemctl enable mongod
systemctl start mongod

Backend Setup#

Please first resolve your domain name to your server (this article uses mxapi.xcnya.cn as an example for Backend API)

4

Docker (Recommended)#

Get docker-compose.yml from the repository

mkdir /opt/mx-space
mkdir /opt/mx-space/core
cd /opt/mx-space/core
wget https://raw.githubusercontent.com/mx-space/core/master/docker-compose.yml

Then create a .env file in the same directory
Write the following content

# Write freely, requires 16≥ characters ≥32
JWT_SECRET=
# Allowed domain names, referring to your frontend domain name, separated by ","
ALLOWED_ORIGINS=

1

My configuration is as shown, save and exit, then use the following command to start the container

docker compose up -d

2

Wait for completion

3

Once started as shown, use your preferred method to reverse proxy 127.0.0.1:2333 and configure the SSL certificate to bind to your domain as Backend API
I used the Baota panel, configured as shown (SSL certificate pre-configured)

5

After completion, visit your backend API domain for testing; if it appears as shown, it is normal

6

Manual Setup#

Pull core from the repository

mkdir /opt/mx-space
cd /opt/mx-space
git clone https://github.com/mx-space/core.git
cd core

Install

npm install -g pnpm pm2
pnpm i

7

Be patient, good things are coming soon

8

Then enter the following command to build

pnpm build
pnpm bundle

9

Then create an ecosystem.config.js in apps/core/ (delete it if it exists)
Paste the following content into it, and pay attention to configure the environment variables in env{}

const { cpus } = require('os')
const { execSync } = require('child_process')
const nodePath = execSync(`npm root --quiet -g`, { encoding: 'utf-8' }).split(
  '\n',
)[0]
const cpuLen = cpus().length
module.exports = {
  apps: [
    {
      name: 'mx-server',
      script: 'out/index.js',
      autorestart: true,
      exec_mode: 'cluster',
      watch: false,
      instances: cpuLen,
      max_memory_restart: '520M',
      args: '',
      env: {
        MX_ENCRYPT_KEY: 'mx-space',
        PORT: '2333',  // Startup port
        ALLOWED_ORIGINS: 'mx.xcnya.cn,mxspace.xcnya.cn',  // Allowed domain names, referring to your frontend domain name, separated by ","
        JWT_SECRET: 'hPf6Rb8KfE6jOgY3cDuM6H6t'  // Write freely, requires 16 ≥ characters ≥ 32
      },
    },
  ],
}

Then use pm2 start ecosystem.config.js to start the backend

10

Once started as shown, use your preferred method to reverse proxy 127.0.0.1:2333 and configure the SSL certificate to bind to your domain as Backend API
I used the Baota panel, configured as shown (SSL certificate pre-configured)

5

After completion, visit your backend API domain for testing; if it appears as shown, it is normal

6

Configure Backend#

After the backend setup is complete, you need to perform initial configuration

[!IMPORTANT]

Since core version 5.0, the original /qaqdmin has been changed to /proxy/qaqdmin

Visit https://your-backend-domain/proxy/qaqdmin
Then it will appear as shown

17

[!NOTE]

If the initialization interface does not appear, please try visiting https://your-backend-domain/proxy/qaqdmin#init

Just follow the steps to configure

18

19

20

Frontend Setup#

Kami#

[!IMPORTANT]

Kami has stopped maintenance. For a better user experience, please skip this section and use the Shiro theme in the next section as a replacement

Vercel#

Click Deploy to Vercel
After clicking, first follow the prompts to fork the repository to your personal account

11

12

Then configure as shown

13

Be patient

14

Then you are done

15

At this point, the domain assigned to you by Vercel is not usable, so you need to bind your own domain

16

Then visit the frontend domain, and you are all set!

21

Local Setup#

Please first resolve your domain name to your server (this article uses mx.xcnya.cn as an example for Frontend Domain)

Clone the repository

cd /opt/mx-space
git clone https://github.com/mx-space/kami.git
cd kami

Install

npm install -g pnpm pm2
git lfs fetch --all
git lfs pull
pnpm i

Then create a .env file in the same directory, writing the following content

# API Address
NEXT_PUBLIC_API_URL=https://your-backend-domain/api/v2
# GATEWAY Address
NEXT_PUBLIC_GATEWAY_URL=https://your-backend-domain
# Configuration item name used by the frontend
NEXT_PUBLIC_SNIPPET_NAME=kami
# If using CDN, modify the product prefix; generally leave it empty
ASSETPREFIX=

Then enter pnpm build to start building

22

Be patient

23

After completion, use pnpm prod:pm2 to start

24

Once started as shown, use your preferred method to reverse proxy 127.0.0.1:2323 and configure the SSL certificate to bind to your domain as Frontend API
I used the Baota panel, configured as shown (SSL certificate pre-configured)

25

Then visit the frontend domain, and you are all set!

21

Shiro#

About CLERK#

The Shiro theme requires Clerk, so you need to register an account at Clerk Official Website
After registering, click Add application in the console

26

Name it freely, then create

27

After completion, scroll down to find these two items, save them carefully, and do not disclose them

28

Configure Backend#

Before building the Shiro frontend, some settings need to be made in the backend
Visit your backend, find Additional Features → Configure Cloud Functions, and click the "+" sign above

30

Then fill in the name shiro, reference theme, data type select JSON
Modify the content according to the following and overwrite it in the right box

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "Moe ICP No. 20236136",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "About",
        "links": [
          {
            "name": "About this site",
            "href": "/about-site"
          },
          {
            "name": "About me",
            "href": "/about"
          },
          {
            "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": "Monitoring",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "Contact",
        "links": [
          {
            "name": "Leave a message",
            "href": "/message"
          },
          {
            "name": "Send an email",
            "href": "mailto:[email protected]",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
   
    "bg": [
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": [
         
      ]
    },
    "site": {
      "favicon": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "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": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
          "https://cdn.innei.ren/bed/2023/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

31

Then click save in the upper right corner

Docker (?)#

The Shiro documentation does not mention Docker usage, but there is indeed a docker-compose.yml file in the repository, mainly because I spent half an hour and really couldn't figure it out, so I'll leave a pit here and hope to fill it next year

Vercel#

Click Deploy to Vercel

[!IMPORTANT]

It is not recommended to directly click the button above to deploy, as you will not be able to update later. Please manually fork the Innei/Shiro repository to your own GitHub account and then in Vercel New Project

34

Fork the repository as before

35

Fill in the environment variable information and then click deploy, and wait a moment

36

Bind your own domain as before, and you are all set!

33

Manual Setup#

Clone the repository

cd /opt/mx-space
git clone https://github.com/Innei/Shiro.git
cd Shiro

Then create a .env file in the same directory, filling in the following content

# Your API address
NEXT_PUBLIC_API_URL=
# Your API domain
NEXT_PUBLIC_GATEWAY_URL=
# CLERK public key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
# CLERK secret key
CLERK_SECRET_KEY=
# OpenAI Key (no need to elaborate, just handle it yourself)
OPENAI_API_KEY=

Enter the following command to build

npm install -g pnpm pm2
pnpm i
pnpm build

32

Once completed, we can enter pm2 start ecosystem.config.js to start Shiro

Or install it as a system service to start

Enter vim /etc/systemd/system/mx-shiro.service
Then enter the following content

[Unit]
Description=MX-Space Shiro Theme Daemon
After=network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=simple
WorkingDirectory=/opt/mx-space/Shiro
ExecStart=npx next start -p 2323
Restart=always

Then use the following command to start

systemctl enable mx-shiro
systemctl start mx-shiro

Once started, use your preferred method to reverse proxy 127.0.0.1:2323 and configure the SSL certificate to bind to your domain as Frontend Domain (i.e., blog domain)
I used the Baota panel, configured as shown (SSL certificate pre-configured)

25

Then visit the frontend domain, and you are all set!

33

Postscript#

If you encounter similar issues as I did

44

Please refer to this article

This article is synchronized by Mix Space to xLog
The original link is https://blog.nekorua.com/posts/build/68.html

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