「网站制作」Lovart 原型，Trae 网站，掘金 MCP部署🧣

Lovart 原型，Trae 网站，掘金 MCP部署🧣

网站开发成果概述

完成情况：昨天完成了雷军个人网站的开发，整体样式效果不错。
遗憾之处：图片、视频和音频未能很好地完成对接，否则效果会更好。

一、Lovart 原型设计

构建一个雷军的个人网站，在这个网站的页面的呈现的过程当中的话，展示雷军的各个不同时期的照片。以及在这个照片的过程当中呈现出他的不同的时期的演讲的一个视频。使用小米的LOGO的色调。

原型制作与开发工具

原型制作 ：
- 初始使用 Trae 开发工具制作原型效果不佳，后直接使用 Lovart 进行原型制作。
- 制作过程中给出相应提示，快速出了三个网站原型，包括首页，照片轮播图和视频展示页。
- 单纯用编程工具制作原型效果相对较弱，更多时候需要图像工具，效果更好一些。

Trae 网站开发

网站开发过程

图片代码生成与优化 ：
- 先完成图片的html代码生成复刻，再逐步优化。
- 优化过程中不断增加信息，如投资公司、雷军教育背景、发展历程等，通过不断叠加完善网站内容。
图片、音频、视频对接 ：
- 对接过程耗时，因时间有限未完成好。
- 若想做好网站，需花费2~3天时间寻找素材并进行对接。

三、掘金 MCP部署

官方文档：通过 Trae 等 AI IDE 配置 MCP一键发布到掘金

网站部署与后续工作

部署工具 ：
- 使用掘金的mcp网页部署工具，将html网页部署到掘金网站上。
- 部署后重点是完成mcp对接，可阅读官方文档快速掌握过程。
开发经验与难点 ：
- 静态网页开发难度不大，关键在于明确目标和参考内容。
- 复杂之处在于后端数据库和管理过程的接入，增加用户、数据类别和支付功能，使网站从个人使用转变为多人使用，实现商业价值变现。

掘金 MCP DE 对接

perl 复制代码

{
  "mcpServers": {
    "juejin-deploy-mcp": {
      "command": "npx",
      "args": [
        "--registry=https://registry.npmjs.org",
        "-y",
        "@juejin-team/mcp-server@latest"
      ],
      "env": {
        "JUEJIN_TOKEN": ""
      }
    }
  }
}

token 秘钥的获取

网页的部署命令

推送到掘金

Builder with MCP

用户想要将项目推送到掘金平台，我需要使用掘金部署MCP服务来上传前端项目文件。

juejin-deploy-mcp/deploy_frontend

✅ 项目成功推送到掘金平台

您的雷军个人网站项目已经成功部署到掘金平台！

🌐 在线预览链接

juejin.cn/aicoding/wo...