About
The stock frontend and backend already include a cloud function mechanism that gives backend configuration more flexibility. However, the original frontend still has some limitations. If you want more custom content, you have to do some secondary development on the frontend.
When you set up your blog previously, you should have already forked Shiro into your own repository, so base this development on your own fork.
It's actually quite simple, but starting from zero, it took me a full two days to get the environment properly set up.
Setting Up the Environment
The following basic software environment is required:
- fnm
- Node.js
- pnpm
Installing fnm
Open a terminal in administrator mode and run the following command:
choco install fnm
Then run the following command to test:
fnm -h
At this point, this should be enough in theory, but you can also configure environment variables.
Create a profile.ps1 file in the following directory:
%USERPROFILE%\Documents\WindowsPowerShell\profile.ps1
%USERPROFILE%: indicates the user directory. Type %USERPROFILE% directly in the address bar of File Explorer and press Enter.
WindowsPowerShell is a newly created directory. If the command is still not recognized after installing node, change the folder name to PowerShell.
Write the following code into the configuration file above:
fnm env --use-on-cd | Out-String | Invoke-Expression
Installing Node.js
Install Node.js according to the instructions on the following page:
Pick whichever matches your environment. For example, I installed it with the following commands. That said, since I had already installed Node.js before, I didn't need to configure the PATH separately.
winget install Schniz.fnm
fnm env --use-on-cd | Out-String | Invoke-Expression
fnm use --install-if-missing 22
node -v # should print `v22.10.0`
npm -v # should print `10.9.0`
Installing pnpm
Open a terminal in administrator mode and run the following command to install:
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression
Opening the Project
Since the original project already contains a .vscode folder, we can just open the project folder with VS Code.
Type the following command in the VS Code terminal. --frozen-lockfile is the key; I was stuck here for a very long time. With this parameter, dependencies will be installed according to the versions originally specified in the project.
pnpm install --frozen-lockfile
Next, write the .env file in the project directory, just as you would when deploying.
Either of the following two methods can start the server for preview.
Starting the Development Server
Enter the following command in the VS Code terminal:
pnpm run dev
Click a link such as http://localhost:3000 in the terminal output to open the preview in your browser.
Building and Starting the Production Environment
Enter the following command in the VS Code terminal:
pnpm run build
After the build is complete, enter the following command:
pnpm run start
Click a link such as http://localhost:3000 in the terminal output to open the preview in your browser.
Switching the Docker Compose Source to Your Own Project
This is a tutorial from a group member: Building a Docker Image for Your Modified Shiro - Mikuの次行星
Simply delete the .github folder from the repository root.
Create a new yml file in the .github/workflows directory of the repository with any name you like. The code is as follows:
name: Docker Build
on:
push:
branches:
- 'main'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Login to Registry
uses: docker/login-action@v3
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v4
with:
context: .
file: ./Dockerfile
platforms: linux/amd64
push: true
tags: ghcr.io/innei/shiro:latest
You only need to change the tag in the Build and push step at the bottom, from ghcr.io/innei/shiro:latest to a name you think is suitable. Note that it must not contain any uppercase letters. To make it easy to remember, prefer using your personal GitHub username in lowercase to replace innei as the image namespace.
Then modify the docker-compose.yml file on your server that originally pulled the Docker image, and replace the image entry with your own. For example, I configured this entry as:
image: ghcr.io/stbanana/shiro:latest
Because stbanana is my GitHub username.