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

 嘿，朋友们！在这个信息爆炸的时代，拥有一个属于自己的独立思考和发声的小天地，是不是一件很酷的事情？传统的博客搭建方式可能略显繁琐，但今天，我要给大家分享一个超级现代且便捷的方案：使用**懒猫微服**快速部署 **MixSpace** 后端，再配合 **Vercel** 托管前端，轻松打造一个颜值与实力并存的现代化个人空间！ 我一直很喜欢 [Mix Space <span>↗</span>](https://www.google.com/url?sa=E&q=https%3A%2F%2Fmx-space.js.org%2F) 这个项目，它自称“现代化的个人空间解决方案”，确实名副其实。它的模块化设计、丰富的插件以及活跃的社区都让我心动不已。这次，借助懒猫微服的便利性，整个搭建过程更是如虎添翼。 话不多说，上教程！ ### Part 1: 后端部署，懒猫微服显神通！ 懒猫微服（如果你还不了解，可以去搜一下，是个好东西！）提供了一个非常便捷的应用商店。 1. **一键安装 MixSpace 后端** 首先，在懒猫应用商店中搜索并一键安装 MixSpace。过程非常丝滑，稍等片刻，后端服务就悄然启动了。  https://appstore.lazycat.cloud/#/shop/detail/chengpi.lzapp.mxserver 2. **初探后台，进行初始化** 安装完成后，我们需要访问 MixSpace 的管理后台进行初始化设置。通过 你的懒猫微服地址/proxy/qaqdmin 路径即可进入。（这里的 qaqdmin 应该是 MixSpace 默认的后台路径，具体以懒猫微服中显示的为准）  3. **配置前后端地址** 进入后台后，会引导你进行一些基础配置。最关键的是设置**前端地址**和**后端地址**。这里你需要准备两个域名（或者子域名）： - **后端域名**: 例如 mixapi.yourdomain.com (这个后面会通过懒猫微服的公网映射功能指向 MixSpace 后端服务) - **前端域名**: 例如 blog.yourdomain.com (这个后面会指向我们部署在 Vercel 上的前端主题) 如下图所示，填入你规划好的域名：   简单几步，后台的基础设置就完成了！是不是很简单？  4. **公网映射，让后端拥抱世界** 现在我们的 MixSpace 后端还运行在内网。为了让 Vercel 上的前端能够访问到它，我们需要在懒猫微服中为 MixSpace 后端服务添加一个公网映射。  将你刚才规划的后端域名（如 mixapi.yourdomain.com）映射到 MixSpace 运行的内部端口。  添加映射后，你的后端API就可以通过公网域名访问啦！ ### Part 2: 前端部署，Vercel 助你起飞！ 后端搞定，接下来就是我们博客的“门面”——前端主题了。MixSpace 官方文档提供了丰富的[前端主题列表 <span>↗</span>](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 账号下。这样我们才能自由修改配置。  Fork 成功后，你的 GitHub 里就会有这个仓库了：  2. **修改主题配置** 在你自己 Fork 来的仓库中，找到 .env.template 文件（有些主题可能是 .env.example 或其他类似名称，具体看主题说明）。将其复制一份并重命名为 .env 或 .env.local（根据主题文档来）。 然后，修改里面的 API 地址，指向我们刚刚配置好的**公网后端域名**：  例如，修改为（请务必替换成你自己的！）： ``` NEXT_PUBLIC_API_URL=http://mixapi.yourdomain.com/api/v2 NEXT_PUBLIC_GATEWAY_URL=http://mixapi.yourdomain.com/ ``` **踩坑提示：** 记得检查你的后端地址是否正确，http 还是 https，以及路径是否完整。 3. **Vercel 部署** 前端主题我们选择部署在 [Vercel <span>↗</span>](https://www.google.com/url?sa=E&q=https%3A%2F%2Fvercel.com%2F) 这个对静态网站和 Jamstack 应用非常友好的平台上。它的自动化部署和全球 CDN 加速能让你的博客访问速度起飞！ - 登录或注册 Vercel，并授权绑定你的 GitHub 账号。  - 在 Vercel Dashboard 中，点击 "Add New..." -> "Project"。 - 选择 "Import Git Repository"，找到并选择你刚刚 Fork 并修改好的主题仓库。  - Vercel 通常会自动识别项目类型 (Next.js, Vue, etc.)。确认无误后，展开 "Environment Variables" 选项。 - **重要：** 把你在上一步 .env 文件中配置的环境变量（如 NEXT_PUBLIC_API_URL 和 NEXT_PUBLIC_GATEWAY_URL）也添加到 Vercel 的环境变量设置中。这是因为 .env 文件通常不会提交到 Git 仓库（出于安全考虑），Vercel 构建时需要这些变量才能正确连接到你的后端。  - 点击 "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)  **碎碎念：** 这一步有时容易忘记，导致一些功能（比如评论回调、前端预览）可能不正常，所以细心检查一下总是好的。 2. **绑定自定义前端域名** 谁不想用自己的域名呢？在 Vercel 项目的 "Settings" -> "Domains" 中，添加你之前规划的前端域名（例如 blog.yourdomain.com）。  Vercel 会提示你如何修改 DNS 解析（通常是添加一个 CNAME 记录指向 Vercel 的地址，如 cname.vercel-dns.com，或者有时是 A 记录）。去你的域名服务商那里完成解析，稍等片刻生效后（通常很快，但有时也可能需要一点耐心），你的个人空间就可以通过自定义域名访问啦！Vercel 还会自动帮你处理 SSL 证书，省心！ ### 结语：你的创作，由此开始！ 恭喜！至此，一个基于懒猫微服部署 MixSpace 后端、Vercel 托管前端的现代化个人空间就搭建完成了！比想象中简单快捷 现在，你可以登录 MixSpace 后台，开始你的创作之旅：写文章、发说说、自定义主题……尽情享受这个属于你的数字花园吧！ 整个过程下来，懒猫微服的便捷部署和 Vercel 的无缝托管体验给我留下了深刻印象。MixSpace 本身的优秀设计更是锦上添花。