懒猫微服 x MixSpace x Vercel：轻松打造属于你的现代化个人空间

![image.png](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514234630.png)


嘿，朋友们！在这个信息爆炸的时代，拥有一个属于自己的独立思考和发声的小天地，是不是一件很酷的事情？传统的博客搭建方式可能略显繁琐，但今天，我要给大家分享一个超级现代且便捷的方案：使用**懒猫微服**快速部署 **MixSpace** 后端，再配合 **Vercel** 托管前端，轻松打造一个颜值与实力并存的现代化个人空间！

我一直很喜欢 [Mix Space ↗](https://www.google.com/url?sa=E&q=https%3A%2F%2Fmx-space.js.org%2F) 这个项目，它自称“现代化的个人空间解决方案”，确实名副其实。它的模块化设计、丰富的插件以及活跃的社区都让我心动不已。这次，借助懒猫微服的便利性，整个搭建过程更是如虎添翼。

话不多说，上教程！

### Part 1: 后端部署，懒猫微服显神通！

懒猫微服（如果你还不了解，可以去搜一下，是个好东西！）提供了一个非常便捷的应用商店。

1. **一键安装 MixSpace 后端**  
    首先，在懒猫应用商店中搜索并一键安装 MixSpace。过程非常丝滑，稍等片刻，后端服务就悄然启动了。  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514215220.png)
    
https://appstore.lazycat.cloud/#/shop/detail/chengpi.lzapp.mxserver

2. **初探后台，进行初始化**  
    安装完成后，我们需要访问 MixSpace 的管理后台进行初始化设置。通过 你的懒猫微服地址/proxy/qaqdmin 路径即可进入。（这里的 qaqdmin 应该是 MixSpace 默认的后台路径，具体以懒猫微服中显示的为准）  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514215308.png)
    
3. **配置前后端地址**  
    进入后台后，会引导你进行一些基础配置。最关键的是设置**前端地址**和**后端地址**。这里你需要准备两个域名（或者子域名）：
    
    - **后端域名**: 例如 mixapi.yourdomain.com (这个后面会通过懒猫微服的公网映射功能指向 MixSpace 后端服务)
        
    - **前端域名**: 例如 blog.yourdomain.com (这个后面会指向我们部署在 Vercel 上的前端主题)
        
    
    如下图所示，填入你规划好的域名：  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514215630.png)
    
      
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514215713.png)
    
      
    简单几步，后台的基础设置就完成了！是不是很简单？  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514215752.png)
    
4. **公网映射，让后端拥抱世界**  
    现在我们的 MixSpace 后端还运行在内网。为了让 Vercel 上的前端能够访问到它，我们需要在懒猫微服中为 MixSpace 后端服务添加一个公网映射。  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514220433.png)
    
      
    将你刚才规划的后端域名（如 mixapi.yourdomain.com）映射到 MixSpace 运行的内部端口。  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514220651.png)
    
      
    添加映射后，你的后端API就可以通过公网域名访问啦！
    

### Part 2: 前端部署，Vercel 助你起飞！

后端搞定，接下来就是我们博客的“门面”——前端主题了。MixSpace 官方文档提供了丰富的[前端主题列表 ↗](https://www.google.com/url?sa=E&q=https%3A%2F%2Fmx-space.js.org%2Fdocs%2Fthemes)。这里我们以优雅的 Shiro 主题为例（Arthals 大佬也在用这款，简约而不简单！）。

1. **Fork 主题代码仓库**  
    访问 Shiro 主题的 GitHub 仓库（或其他你喜欢的主题仓库），点击右上角的 "Fork" 按钮，将代码仓库复制到你自己的 GitHub 账号下。这样我们才能自由修改配置。  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514213705.png)
    
      
    Fork 成功后，你的 GitHub 里就会有这个仓库了：  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514213736.png)
    
2. **修改主题配置**  
    在你自己 Fork 来的仓库中，找到 .env.template 文件（有些主题可能是 .env.example 或其他类似名称，具体看主题说明）。将其复制一份并重命名为 .env 或 .env.local（根据主题文档来）。  
    然后，修改里面的 API 地址，指向我们刚刚配置好的**公网后端域名**：  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514220936.png)
    
      
    例如，修改为（请务必替换成你自己的！）：
    
    ```
    NEXT_PUBLIC_API_URL=http://mixapi.yourdomain.com/api/v2
    NEXT_PUBLIC_GATEWAY_URL=http://mixapi.yourdomain.com/
    ```
    
    
    **踩坑提示：** 记得检查你的后端地址是否正确，http 还是 https，以及路径是否完整。
    
3. **Vercel 部署**  
    前端主题我们选择部署在 [Vercel ↗](https://www.google.com/url?sa=E&q=https%3A%2F%2Fvercel.com%2F) 这个对静态网站和 Jamstack 应用非常友好的平台上。它的自动化部署和全球 CDN 加速能让你的博客访问速度起飞！
    
    - 登录或注册 Vercel，并授权绑定你的 GitHub 账号。  
        
        ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514213849.png)
        
    - 在 Vercel Dashboard 中，点击 "Add New..." -> "Project"。
        
    - 选择 "Import Git Repository"，找到并选择你刚刚 Fork 并修改好的主题仓库。  
        
        ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514213926.png)
        
    - Vercel 通常会自动识别项目类型 (Next.js, Vue, etc.)。确认无误后，展开 "Environment Variables" 选项。
        
    - **重要：** 把你在上一步 .env 文件中配置的环境变量（如 NEXT_PUBLIC_API_URL 和 NEXT_PUBLIC_GATEWAY_URL）也添加到 Vercel 的环境变量设置中。这是因为 .env 文件通常不会提交到 Git 仓库（出于安全考虑），Vercel 构建时需要这些变量才能正确连接到你的后端。  
        
        ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514221010.png)
        
    - 点击 "Deploy"。Vercel 就会拉取你的代码并开始自动构建和部署。这个过程可能需要几分钟，泡杯茶，稍作等待吧。看着它一步步变成绿色的√，是不是很有成就感？
        

### Part 3: 最终配置与域名绑定

当前端在 Vercel 上构建成功后，它会给你一个 Vercel 的默认域名 (例如 your-project.vercel.app)。

1. **更新后端主题配置**  
    回到 MixSpace 的管理后台（通过懒猫微服的 /proxy/qaqdmin），检查“站点设置”或类似地方，确保“站点地址”或“前端地址”填写的是你 Vercel 分配的地址，或者你稍后要绑定的自定义前端域名。这样 MixSpace 才能正确生成一些内部链接。  
    
    创建/保存设置：  
    
    参考这个 [部署 - Mix Space 文档](https://mx-space.js.org/docs/themes/shiro/deploy)
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514232825.png)
    
    
      
    **碎碎念：** 这一步有时容易忘记，导致一些功能（比如评论回调、前端预览）可能不正常，所以细心检查一下总是好的。
    
2. **绑定自定义前端域名**  
    谁不想用自己的域名呢？在 Vercel 项目的 "Settings" -> "Domains" 中，添加你之前规划的前端域名（例如 blog.yourdomain.com）。  
    
    ![alt text](https://mxspace-1258860570.cos.ap-shanghai.myqcloud.com/Blog_images/2025%2F05%2F14%2F20250514233017.png)
    
      
    Vercel 会提示你如何修改 DNS 解析（通常是添加一个 CNAME 记录指向 Vercel 的地址，如 cname.vercel-dns.com，或者有时是 A 记录）。去你的域名服务商那里完成解析，稍等片刻生效后（通常很快，但有时也可能需要一点耐心），你的个人空间就可以通过自定义域名访问啦！Vercel 还会自动帮你处理 SSL 证书，省心！
    

### 结语：你的创作，由此开始！

恭喜！至此，一个基于懒猫微服部署 MixSpace 后端、Vercel 托管前端的现代化个人空间就搭建完成了！比想象中简单快捷

现在，你可以登录 MixSpace 后台，开始你的创作之旅：写文章、发说说、自定义主题……尽情享受这个属于你的数字花园吧！

整个过程下来，懒猫微服的便捷部署和 Vercel 的无缝托管体验给我留下了深刻印象。MixSpace 本身的优秀设计更是锦上添花。