超可愛いフロントエンドとバックエンドが分離されたブログ Mix-space の構築

博文版は動画版の白話文の補足のみを対象としており、具体的にはドキュメントを参照してください！

mx の変化が大きすぎるので、皆さんは参考程度にしてください、あまりにも多くのことが変わりました。

https://github.com/mx-space/docs ドキュメントリポジトリからの抜粋、順序は若干異なりますが、私の動画方法が最適解です

ドキュメントのアドレス https://mx-space.js.org

動画使用:

BGM:

Summer Madness-Roa

moonlight-Roa

Lights-Sappheiros

Embrace-Sappheiros

イントロダクション#

個人スペースの新しい代替方法

これは、ある大物 innei が本科卒業設計として開発したオープンソースの Mix-Space ブログで、フロントエンドとバックエンドが分離された形式を採用しています。

Mix-Space はフロントエンドとバックエンドが分離されているため、フロントエンドとバックエンドをそれぞれ異なるサーバーに個別にデプロイすることができますが、もちろんすべてを 1 台のサーバーにデプロイすることも可能です。

Mix-Space の Core はバックエンドサービスのサポートを提供し、Kami は著者が最も頻繁に更新するフロントエンドで、Mx-Yun は云游君 Hexo-Yun の移植版です。もちろん、Kami は最も完全なサポートを提供し、Core のすべての機能を享受し、良好な動作効果とさまざまな可愛らしい小さなイースターエッグを持っています！

今回は、最も完成度の高い Kami フロントエンドをデプロイします。

準備#

Mix-space を実行するには、サーバーを準備する必要があります。

一つの応用力のある頭脳
Linux カーネルバージョン > 4.18（最新の Ubuntu を推奨）
実行メモリ > 1Gib
フロントエンドとバックエンドの SSL 証明書
フロントエンドとバックエンドのアドレスを正しく設定
宝塔パネル

オプション:

Docker イメージを持つ Ubuntu（または Tencent Cloud アプリケーションイメージ Docker）

宝塔パネルのソフトウェアストアの実行環境で PM2管理者 と Nginx をインストールし、最新の Node バージョンをインストールします。この章では v16.15.1 をインストールします。

少なくとも Node > 16.X が必要です。

Debian / Ubuntu の依存環境をインストール

sudo apt update && sudo apt install git curl vim wget git-lfs -y

依存環境のインストール#

sudo su
npm install -g pnpm pm2

# インストールが遅い場合は、以下のコマンドでミラーソースを切り替えることができます
npm config set registry http://mirrors.cloud.tencent.com/npm/

Docker のインストール#

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

# インストールが遅い場合は、以下のコマンドを使用することをお勧めします
sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

Docker-compose のインストール#

# docker-composeをダウンロード

wget https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

#(バックアップ) wget https://download.fastgit.org/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

# 新しいフォルダーを作成（必須ではありません）、必要に応じて

sudo mkdir -p /usr/local/lib/docker/cli-plugins/

# 指定された場所にコピー

sudo cp ./docker-compose-linux-x86_64  /usr/local/lib/docker/cli-plugins/docker-compose

# 実行権限を付与

sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

インストールが完了したかどうかを確認

docker compose version

正常にバージョン番号が出力されれば OK です。

Core のデプロイ#

cd

mkdir -p mx-space/server

cd mx-space/server

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/.env.example -O .env

宝塔または vim でこの.env ファイルを編集します。ファイルの例は以下の通りです。

# THIS ENV FILE EXAMPLE ONLY FOR DOCKER COMPOSE
# SEE https://docs.docker.com/compose/environment-variables/#the-env-file
JWT_SECRET=7294c34e0b28ad282333333          #ここに16文字以上32文字以下の文字列を記入してください。例：hashのmd5値
ALLOWED_ORIGINS=miaoer.xyz,www.miaoer.xyz,v6.www.miaoer.xyz  #ここに許可されたドメイン名を記入してください。通常はkamiのドメイン名です。複数のドメインを許可する場合は、カンマで区切ってください。

Vim 保存: Ecs で編集を終了し、Shift + :(コロン) で wq を入力
つまり :wq

イメージをプル#

# 最新のイメージをプル

sudo docker compose pull

# コンテナを起動

sudo docker compose up -d

リバースプロキシ#

宝塔パネルに入り — ウェブサイト、バックエンドウェブサイトのアドレスを設定します。ここでは api.miaoer.xyz を使用します。

好きなホスト名を入力し、解析を忘れずに。

新しいサイトを作成し、設定 - リバースプロキシ - リバースプロキシを追加します。

プロキシ名は管理しやすくするために バックエンド と設定します。

ターゲット URL: http://127.0.0.1:2333 送信ドメイン: $host

保存後、設定ファイルをクリックし、下の設定ファイルのテキストをコピーして、以前の設定を全て削除して貼り付けます。

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


location /
{
    proxy_pass http://127.0.0.1:2333/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileJsNv8TWb 1;
    	expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

SSL 証明書の設定#

ここでは Tencent Cloud が無料で提供するものを使用します。ダウンロード時に Nginx を選択し、SSL 証明書をダウンロードします。圧縮ファイルを開き、.key と .pem の拇印と証明書ファイルのテキストを

サイト設定 - SSL - その他の証明書にコピーします。動画はプライバシーの問題でモザイク処理されています。

.pemファイルの最後の行は空行なので削除してください。

保存すると、強制 HTTPS を有効にすることを選択できます。推奨します。

初期化#

バックエンドアドレス https://server.test.cn/proxy/qaqdmin にアクセスして初期化を行います。

動画ではデモされていませんが、新しい mx の更新後には API アドレスと Gateway アドレスを入力する必要があります。

デモのためにここでは入力します；

API アドレス: https://api.miaoer.xyz/api/v2

Gateway アドレス: https://api.miaoer.xyz

永続化を有効にします。

サイト設定 でサイトのタイトルとサイトの説明を設定します。

キーワードはお好みで。

フロントエンドアドレスは手動で変更する必要があります。ここでは https://www.miaoer.xyz に設定します。

API アドレスはデフォルトで正しいです。例: https://api.miaoer.xyz/api/v2

バックエンドアドレスも正しいです。ここでは変更を推奨しません。

ゲートウェイもデフォルトで正しいです。

オーナー情報 では、すべてを記入することをお勧めします。

メールアドレスは友リンクとコメント通知を受け取るためのアドレスを指します。後でバックエンドパネルでメール通知を設定します。

パスワードはバックエンドパネルのパスワードで、確認してください。

個人ホームページには自分のフロントエンドアドレスを設定します。ここでは https://www.miaoer.xyz に設定します。

アバターには自分のアバターアドレスを設定します。後でバックエンドからアバターをアップロードできます。CDN の画像ホスティングを自分で構築することをお勧めします。あるいは、既存のものを使用することもできます。ここでは自分で構築したものを選びました。

自己紹介はお好みで記入してください。

フロントエンドのデプロイ#

cd
cd mx-space

git clone https://github.com/mx-space/kami.git --depth=1

# ネットワークが悪い場合は、以下のコマンドを使用してください。

git clone https://hub.fastgit.xyz/mx-space/kami.git --depth=1

安定版にブランチを切り替えます。

cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

env を修正します。

宝塔または vim でこの.env ファイルを編集します。ファイルの例は以下の通りです。

# APIアドレス
NEXT_PUBLIC_API_URL=https://api.miaoer.xyz/api/v2
# GATEWAYアドレス
NEXT_PUBLIC_GATEWAY_URL=https://api.miaoer.xyz
# フロントエンドで使用する設定項目名
NEXT_PUBLIC_SNIPPET_NAME=kami
# CDNを使用する場合、生成物のプレフィックスを変更
ASSETPREFIX=

Vim 保存: Ecs で編集を終了し、Shift + :(コロン) で wq を入力
つまり :wq

依存関係をインストールします。

pnpm i

ビルドします。

pnpm build

フロントエンドを起動します。

pm2 start

サイトを追加します。

宝塔パネルに入り — ウェブサイト、フロントエンドウェブサイトのアドレスを設定します。ここでは www.miaoer.xyz を使用します。

好きなホスト名を入力し、解析を忘れずに。

新しいサイトを作成し、設定 - リバースプロキシ - リバースプロキシを追加します。

プロキシ名は管理しやすくするために フロントエンド と設定します。

ターゲット URL: http://127.0.0.1:2323 送信ドメイン: $host

保存後、設定ファイルをクリックし、下の設定ファイルのテキストをコピーして、以前の設定を全て削除して貼り付けます。

Kami v3.15.1 バージョン以降は、以前の動画の設定とは異なるため、以下のリバースプロキシ設定を使用してください。

#PROXY-START/

location ~* \/(feed|sitemap|atom.xml)
{
    proxy_pass http://127.0.0.1:2333/$1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
     
    add_header Cache-Control max-age=60;
} 

location /
{
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache


    set $static_fileSw1Jy3nG 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileSw1Jy3nG 1;
    	expires 12h;
    }
    if ( $static_fileSw1Jy3nG = 0 )
    {
    add_header Cache-Control no-cache;
    }
}
#PROXY-END/

SSL 証明書の設定

前のバックエンドと非常に似ていますので、応用できることを願っています。

クラウド関数とテスト#

この動画の意味は、ここまでデプロイすることです。その他はドキュメントに従って Mix-space を完成させてください！

したがって、ここでは一部の参考デモのみを行い、具体的には初めての使用説明 | Mix Space を参照してください。

バックエンドに入り、その他・設定とクラウド関数に移動します。

新しい項目を作成します:

名前：kami
引用：theme
データタイプ：YAML / JSON
公開：はい

以下の内容を参照し、右側のボックスにコピーして、自分の状況に応じて修正します。以下は YAML 形式の例で、例に基づいて修正できます。

ここには大量の jsd リンクがありますので、自分で処理してください。

設定例#

name: kami

site:
  favicon: https://fastly.jsdelivr.net/gh/mx-space/kami@master/public/favicon.svg
  # 開屏図とlogo svgタグ、注意XSS
  logo_svg: <svg height="200px" viewbox="0 0 200 200" version="1.1" shape-rendering="geometricPrecision"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd"><g id="forest" fill="currentColor" fillrule="nonzero"><path d="M116.799219,176.953125 C112.484375,176.953125 108.986719,180.450781 108.986719,184.765625 L108.986719,192.1875 C108.986719,196.502344 112.484375,200 116.799219,200 C121.114062,200 124.611719,196.502344 124.611719,192.1875 L124.611719,184.765625 C124.611719,180.450781 121.114063,176.953125 116.799219,176.953125 Z" id="Path"></path><path d="M121.456641,150.248047 C121.298828,150.158203 108.089453,142.472656 101.778125,128.767188 C106.058594,127.733594 109.462109,126.055078 112.442578,124.584766 C115.008203,123.319531 116.671094,120.749609 116.787109,117.891406 C116.903125,115.033203 115.441797,112.336328 112.986719,110.867578 C108.091406,107.937891 96.6117187,99.3179688 91.234375,88.9808594 C94.3324219,88.1222656 97.3414062,86.940625 100.255469,85.734375 C102.819922,84.6730469 104.628906,82.3304688 105.007422,79.5808594 C105.385938,76.83125 104.276953,74.0875 102.094531,72.3722656 C82.3632812,56.8691406 70.0417969,20.1820313 69.9210937,19.8171875 C68.8640625,16.6136719 65.8710938,14.4558594 62.5019531,14.4558594 C62.4839844,14.4558594 62.465625,14.4558594 62.4472656,14.4558594 C59.05625,14.4792969 56.0664063,16.690625 55.0484375,19.925 C54.934375,20.2878906 43.3839844,56.3890625 22.3355469,71.8246094 C20.075,73.4824219 18.8757813,76.2242188 19.1933594,79.0097656 C19.5109375,81.7949219 21.2964844,84.196875 23.8722656,85.303125 C26.1265625,86.2714844 29.5851563,87.7554688 34.3464844,89.0640625 C29.0214844,98.8472656 17.2527344,107.819922 12.2683594,110.952734 C9.7640625,112.517969 8.35625,115.360938 8.63007813,118.301563 C8.90390625,121.242188 10.8117188,123.776953 13.5617188,124.852734 C13.9058594,124.9875 14.2785156,125.1375 14.6828125,125.3 C16.8089844,126.154297 19.7445313,127.332031 23.6902344,128.501953 C17.2066406,141.350391 3.68632813,150.395703 3.53671875,150.494141 C1.09140625,152.094922 -0.25625,154.926563 0.044140625,157.833594 C0.34453125,160.740625 2.2421875,163.237109 4.96328125,164.303906 C5.76640625,164.61875 23.6132813,171.474609 55.471875,172.521875 L55.471875,192.1875 C55.471875,196.502344 58.9695313,200 63.284375,200 C67.5992187,200 71.096875,196.502344 71.096875,192.1875 L71.096875,172.544531 C103.353125,171.572656 119.956641,164.517578 120.696484,164.196094 C123.407422,163.016797 125.221094,160.408984 125.382422,157.457031 C125.542578,154.504688 124.023438,151.714844 121.456641,150.248047 Z M63.6742188,157.03125 C46.6414063,157.03125 33.3425781,155.194922 24.325,153.367578 C29.7734375,147.926953 35.75625,140.533203 39.3648438,131.730859 C44.5152344,132.389453 50.4929688,132.8125 57.4242188,132.8125 C61.7390625,132.8125 65.2367188,129.314844 65.2367188,125 C65.2367188,120.685156 61.7390625,117.1875 57.4242188,117.1875 C46.7472656,117.1875 38.8265625,116.116406 32.8878906,114.769531 C33.4640625,114.256641 34.0460937,113.726953 34.63125,113.180859 C42.2988281,106.020703 47.5574219,98.8085938 50.3394531,91.6605469 C51.3,91.7195313 52.2839844,91.7652344 53.2945313,91.7941406 C57.6179688,91.9210938 61.2035156,88.5207031 61.3269531,84.2082031 C61.45,79.8949219 58.0535156,76.2988281 53.740625,76.1757813 C49.2144531,76.0464844 45.3546875,75.5386719 42.0863281,74.8628906 C51.1160156,64.9648438 57.9273437,52.8929688 62.5585937,43.0527344 C67.1378906,52.8117188 73.746875,64.7949219 82.1886719,74.6710938 C81.9644531,74.6675781 81.74375,74.6566406 81.5277344,74.6382813 C79.1414062,74.4355469 76.7910156,75.3363281 75.1546875,77.0871094 C73.5183594,78.8375 72.7753906,81.2421875 73.1398437,83.6105469 C75.0921875,96.3007813 83.7679687,106.876563 91.5785156,114.065234 C89.2605469,114.0125 87.06875,114.98125 85.5433594,116.714844 C83.9519531,118.523438 83.2839844,120.964844 83.7328125,123.33125 C86.2589844,136.650391 93.8433594,146.823047 100.754297,153.641797 C92.2726562,155.367188 79.8890625,157.03125 63.6742188,157.03125 Z" id="Shape"></path><path d="M199.920703,162.187891 C199.623438,160.078516 198.473047,158.178125 196.74375,156.933203 C196.677734,156.885547 190.046094,152.078516 183.367188,144.459375 C178.680469,139.112891 175.16875,133.808203 172.869141,128.615234 C177.176953,127.299219 180.334766,125.896484 182.855078,124.776563 C183.779688,124.365625 184.578125,124.011328 185.239063,123.752344 C187.985938,122.677344 189.889453,120.144141 190.166016,117.207422 C190.442578,114.270703 189.037891,111.426172 186.539844,109.857031 C180.508203,106.06875 165.928516,94.9003906 160.170313,82.8882813 C165.975,81.6109375 170.135938,80.0996094 173.450781,78.6757813 C176.026953,77.5691406 177.8125,75.1675781 178.130078,72.3824219 C178.447656,69.596875 177.248438,66.8550781 174.987891,65.1972656 C150.69375,47.3816406 137.426172,5.89023438 137.296484,5.47773438 C136.282422,2.23945312 133.294141,0.02578125 129.900781,0 C129.880469,0 129.860938,0 129.840625,0 C126.471875,0 123.479297,2.1609375 122.422266,5.36484375 C122.345703,5.59726563 114.594141,28.8386719 101.137891,48.2902344 C98.6832031,51.8386719 99.5699219,56.7050781 103.118359,59.1597656 C106.666016,61.6144531 111.532813,60.7277344 113.987891,57.1796875 C120.606641,47.6113281 125.908984,37.3730469 129.771094,28.9074219 C135.158203,40.7210938 143.499219,55.9507812 154.835547,68.0292969 C148.182031,69.3046875 138.466406,70.365625 124.221094,70.365625 C119.90625,70.365625 116.408594,73.8632812 116.408594,78.178125 C116.408594,82.4929687 119.90625,85.990625 124.221094,85.990625 C131.989844,85.990625 138.586719,85.7003906 144.237891,85.2101562 C147.194141,93.6328125 153.265625,102.16875 162.363672,110.664453 C163.722266,111.933203 165.067578,113.123437 166.365234,114.225781 C160.423047,115.830469 152.078516,117.127344 139.455469,117.127344 C135.140625,117.127344 131.642969,120.625 131.642969,124.939844 C131.642969,129.254687 135.140625,132.752344 139.455469,132.752344 C146.397656,132.752344 152.275391,132.379297 157.298828,131.778516 C160.196094,139.490625 164.986719,147.194531 171.617578,154.758984 C173.749219,157.191406 175.869141,159.373437 177.836328,161.269531 C171.480469,162.880469 160.966797,164.453125 144.142969,164.453125 C139.828125,164.453125 136.330469,167.950781 136.330469,172.265625 L136.330469,192.1875 C136.330469,196.502344 139.828125,200 144.142969,200 C148.457813,200 151.955469,196.502344 151.955469,192.1875 L151.955469,179.966016 C166.112109,179.546484 177.524219,177.948828 185.952344,175.201562 C193.906641,172.608203 197.119922,169.648438 198.327734,168.114453 C199.645703,166.441016 200.217969,164.297266 199.920703,162.187891 Z" id="Path"></path></g></g></svg>
  # ランダム画像
  figure:
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/qsNmnC2zHB5FW41.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/GwJzq4SYtClRcZh.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/6nOYcygRGXvpsFd.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/Qr2ykmsEFpJn4BC.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KiOuTlCzge7JHh3.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/sM2XCJTW8BdUe5i.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/18KQYP9fNGbrzJu.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/rdjZo6Sg2JReyiA.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/X2MVRDe1tyJil3O.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/EDoKvz5p7BXZ46U.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/EGk4qUvcXDygV2z.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/5QdwFC82gT3XPSZ.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KPyTCARHBzpxJ46.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/7TOEIPwGrZB1qFb.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/Ihj5QAZgVMqr9fJ.jpg
    - https://fastly.jsdelivr.net/gh/Innei/fancy@master/2021/KZ6jv8C92Vpwcih.jpg
  # 背景画像
  background:
    src:
      # 明るい背景
      light: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/background.png
      # 暗い背景
      dark: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/background-night.png
    position: top center fixed
  # サイトのトップバーを定義
  header:
    menu:
      - title: ソース
        path: /
        type: Home
        icon: faDotCircle
        subMenu: []
      - title: 文
        path: /posts
        type: Post
        subMenu: []
        icon: faGlasses
      - title: 記
        type: Note
        path: /notes
        icon: faFeatherAlt
      - title: 言
        path: /says
        icon: faComments
      - title: 覧
        icon: faHistory
        path: /timeline
        subMenu:
          - title: 生活
            icon: faFeatherAlt
            path: /timeline?type=note
          - title: 博文
            icon: faBookOpen
            path: /timeline?type=post
          - title: 回想
            icon: faCircle
            path: /timeline?memory=1
      - title: 友
        icon: faUserFriends
        path: /friends
      - title: 訴
        icon: faComment
        path: /recently
      - title: 余
        icon: faCircleNotch
        path: /favorite/music
        subMenu:
          - title: 音楽を聴く
            icon: faMusic
            type: Music
            path: /favorite/music
      - title: ""
        icon: faSubway
        path: "https://travellings.link"
  # アバターの下のソーシャルIDを定義
  social:
    - url: "https://github.com/Innei"
      title: GitHub
      icon: faGithub
      color: var(--black)
    - url: "https://jq.qq.com/?_wv=1027&k=5t9N0mw"
      title: QQ
      icon: faQq
      color: "#12b7f5"
    - url: "https://twitter.com/__oQuery"
      title: twitter
      icon: faTwitter
      color: "#02A4ED"
  # サイトのフッターを定義
  footer:
    background:
      src:
        dark: |-
        light: https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/assets/footer.png
      position: top/cover
    # デフォルトの戻り先
    home_page: https://innei.ren
    # フッターの座右の銘
    motto:
      content: Stay hungry. Stay foolish.
      author: Steve Jobs
    # ICP登録
    icp:
      enable: false
      label: "浙ICP备 20028356 号"
      link: http://beian.miit.gov.cn/
    # カスタムフッターのテキストとリンク
    navigation:
      - name: About
        path: "/about"
      - name: 留言
        path: "/message"
      - name: 友链
        path: "/friends"
      - name: RSS購読
        path: "/feed"
        newtab: true
      - name: サイトマップ
        path: "/sitemap"
        newtab: true
      - name: 開く
        path: https://travellings.link/
        newtab: true
  # カスタムスクリプト、スタイル、JS（外部リンクのインポートをサポートし、scriptタグは不要）
  custom:
    # カスタムスクリプト
    script: |-
      console.log('Hello')
    # カスタムスタイル
    style: |-
      .foo {
        color: red
      }
    # 外部JSをインポート、scriptタグは不要
    js:
      - https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js
    # 外部CSSをインポート
    css:
      - https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css
# 機能を定義、例えばプレイリスト、追番
function:
  player:
    # デフォルトのプレイリスト
    # 网易云のみサポート
    id:
      - 563534789
      - 1447327083
      - 1450252250
  # 分析、Google OR Baidu OR umami
  analyze:
    enable: false
    ga: ""
    baidu: ""
    umami: ""
  # 寄付
  donate:
    enable: false
    link: https://afdian.net/@Innei
  # デバッグツールを無効にするか（訪問者）
  ban_devtool:
    enable: false

フロントエンドのテスト#

フロントエンドのクラウド関数設定が完了したので、今すぐアクセスできます。入力 https://www.miaoer.xyz

私は正常なバックエンドにロールバックしたので、ここには記事があります。デフォルトでは何も記事はありません。問題がなければ、バックエンドで記事を書いて公開してテストしてみてください。

設定#

バックエンドパネルの設定 - システムには

サイト設定
SEO 最適化
バックエンド追加設定
テキスト設定
メール通知設定
コメント設定
Bark 通知設定
友リンク設定
バックアップ
百度プッシュ設定
Algolia Search
ターミナル設定

ここでは一つ一つ説明しません。

初めての使用説明 | Mix Space のドキュメントを参照してください。

また、設定とクラウド関数については、ここでは説明しません。具体的にはドキュメントのクラウド関数の内容を確認してください。

アップグレードとバックアップ#

1. 魔改アップグレード - フロントエンド#

mx-space/kami フォルダーの名前を任意の名前に変更します。ここでは kami.d に変更します。

その後、kami フロントエンドリポジトリをプルし、安定版に更新します。

cd
cd mx-space

git clone https://github.com/mx-space/kami.git --depth=1

cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1)

その後、更新前に変更したファイル（例えば、mx-space/kami.d の .env と public フォルダー）を mx-space/kami にコピーします。

もし友リンクのページファイルを変更した場合も、すべて置き換えます。

友リンクページのソースコードが更新された場合、更新前のファイルを置き換えると構築エラーが発生する可能性があります。

置き換えが完了したら、依存関係をインストールし、ビルドし、フロントエンドを起動します。

pnpm i

pnpm build

pm2 start

# 万全を期すために: pnpm i && pnpm build && pm2 start

2. 強制同期 - フロントエンド#

直接 mx-space/kami フォルダー内で git pull origin master を実行します。

依存関係をインストールし、ビルドし、フロントエンドを起動します。

pnpm i

pnpm build

pm2 start

# ベテランの選択肢: pnpm i && pnpm build && pm2 start

この方法は、Kami のソースコードに変更を加えていない怠け者のユーザーに適しています。

バックエンドのアップグレード#

Mix-space のバックエンドは Docker-compose を使用しているため、アップグレードが非常に便利です。

cd
cd mx-space/server

サーバーフォルダーに入り、次のコマンドを実行します。

docker compose pull && docker compose up -d

バックアップとロールバック#

バックアップ#

バックエンドのその他 - バックアップで「今すぐバックアップ」をクリックすると、絶対パスにバックアップされます:

/root/mx-space/server/data/mx-space/backup/20xx-xx-xx_xx:xx:xx/backup-20xx-xx-xx_xx:xx:xx.zip

変更していない場合は、バックエンドパネルの設定 - システム - バックアップを参照してください。

ロールバック#

バックエンドのその他 - バックアップで「今すぐバックアップ」をクリックし、以前のコンピュータにある backup.zip を生成されたバックアップディレクトリにアップロードして名前を変更します。

tip
例：生成されたバックアップが backup-2022-09-01_23:33:33.zip の場合、ロールバックしたいバックアップパッケージ backup-2022-01-14_05:14:19.zip を生成されたバックアップと同じ名前に変更します。
mv /root/mx-space/server/data/mx-space/backup/2022-01-14_05:14:19/backup-2022-01-14_05:14:19.zip backup-2022-09-01_23:33:33.zip

⚠️ この操作はデータベースの変更を伴いますので、数日分のバックアップを多く取っておいてください。データは貴重ですので、慎重に操作してください！

一般的に、ロールバックは分析データページの IP & PV データが失われるだけです。

置き換えが完了すると、データベースに変更があることが通知され、x 秒後にページが再読み込みされます。

再読み込みする前に、記事やコメントが失われていないか確認してください。

ここで動画版と同期させるため、ブログはここまでの更新となります。他の詳細は Docs を参照してください。

コメントや寄付をお待ちしております。必ずコメントといいねをお願いします。このブログは引き続き更新されます！

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://www.miaoer.net/posts/blog/mx-install