# 部署 (/docs/themes/shiro/deploy)

<Callout type="info">
  Shiro 的下一代演进版本 **[余白 / Yohaku](/docs/themes/yohaku)** 已经发布。Yohaku 基于 Shiro 深度重构，提供更精致的视觉设计与更多功能。如果你正在寻找最新的体验，请前往 [Yohaku 文档](/docs/themes/yohaku) 了解更多。
</Callout>

## 前提要求

- 你已安装 Mix Space 后端并且已启动
- （选择 Vercel 部署）已注册 [Vercel](https://vercel.com/) 和 [GitHub](https://github.com/) 账号

<Callout type="warn">
  自 Core v7 起，已抛弃 Clerk，取而代之的是 GitHub 和 Google 的 OAuth 2.0，
  配置步骤请参考 [OAuth 2.0](/docs/configure/oauth)
</Callout>

## 准备步骤

<Steps>

<Step>
### 设置主题配置

进入 Mix Space 后台，进入「集成 - 代码片段」页面（原 配置与云函数），点击右上角的新增按钮，在编辑页面中，填入以下设置：

- 名称：`shiro`
- 引用：`theme`
- 数据类型：`JSON`
- 数据：（点击下方的按钮复制）

<Callout type="info">
  请注意，这份配置你需要自行修改成符合你的需求的配置。直接使用下面的配置可能会导致你的博客无法按照你的预期运行。

  下面的配置可能不全，更多配置项的信息请移步 [配置项](/docs/themes/shiro/config) 了解。

  此外，配置也可写成 yaml 格式，此时数据类型应选择 `YAML`。
</Callout>

```json showLineNumbers
{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:i@innei.ren",
            "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": [
      "/static/images/F0q8mwwaIAEtird.jpeg",
      "/static/images/IMG_2111.jpeg.webp.jpg"
    ],
    "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": [
          "/static/images/20191211132347.png",
          "/static/images/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      },
      "rss": {
        "noRSS": true
      }
    }
  }
}
```

点击按钮保存配置，随后继续进行下面的步骤。
</Step>

<Step>
### 配置环境变量


在下方的配置表格中，填入你的环境变量，然后点击复制按钮，将环境变量复制到剪贴板中。

<EnvVariableConfig
  client:load
  variableNames={[
    {
      key: 'NEXT_PUBLIC_API_URL',
      name: '后端 API 地址',
    },
    {
      key: 'NEXT_PUBLIC_GATEWAY_URL',
      name: '后端网关地址',
    },
    {
      key: 'ENABLE_EXPERIMENTAL_COREPACK',
      name: 'vercel 部署时启用 corepack（取默认值即可）',
      defaultVal: '1',
    },
  ]}
/>
</Step>
</Steps>

## 通过 Vercel 部署

<Steps>

<Step>
### 克隆仓库

登陆 GitHub 账号，打开 [Innei/Shiro](https://github.com/Innei/Shiro)，点击右上角的 Fork 按钮，将仓库克隆到你的账号下。

</Step>

<Step>
### 自定义 Favicon

修改你 Fork 的 Shiro 仓库中的 public 文件夹内容以使用你自己的 Favicon 。

</Step>

<Step>
### 打开 Vercel 创建项目

登陆 Vercel 账号，点击右上角的 New Project 按钮，选择 Import Git Repository，选择你刚刚 Fork 的仓库，点击 Import 按钮，即可进入到项目配置页面。

</Step>

<Step>
### 键入环境变量 & 开始部署

在刚刚进入的 Vercel 项目配置页面中，点击 Environment Variables，然后键盘上的 Ctrl + V 将环境变量粘贴到输入框中，然后点击 Deploy 按钮，等待部署完成。

有关配置自定义域名的教程，请参考 [Vercel 文档](https://vercel.com/docs/custom-domains)。

</Step>

</Steps>

## 通过预构建运行 & Docker Compose

参见 [README 相关部分](https://github.com/Innei/Shiro/blob/main/README.md#whale-运行) 完成对应操作，随后配置[反向代理](/docs/deploy/reverse-proxy)。

## 完成！

至此，你已完成了 Shiro 主题的部署，你可以访问你的博客了。

## 更新主题

<Accordions client:load>
<Accordion title="Vercel 托管">
 
使用 Vercel 托管的话，只需要在自己 Fork 的项目上 Sync Fork 即可（如图）。如果自己有魔改某些内容的话不要点击 Discard Changes，会把自己的魔改搞没了。

<Image 
  src="https://pan.vinua.cn/f/GRefM/0.png" 
  alt="GitPull" 
  width={800} 
  height={600} 
/>
 
</Accordion>

<Accordion title="Docker Compose 预构建">

```bash
docker compose pull && docker compose up -d
```
</Accordion>
</Accordions>