文章主要介绍了以下内容：
需要
改官网为开源项目，包括以下功能：
它是什么？
它是一个开源的Go语言流媒体服务器开发框架。 如下所示：
用户界面设计
UI方面，团队中的设计朋友正在帮忙设计官网PC首页，其他功能如文档教程页面、移动端适配等都是我们自己开发实现的。
设计稿如下图所示：
主要设计内容如下：
期间我们和设计师保持着沟通。 首页UI的设计是一个不断沟通和调整的过程。
自适应解决方案
针对 PC 的自适应解决方案不止一种。 浏览了一些主流官网，最终的适配方案如下：
请问一个问题，为什么大多数PC页面不使用rem？
实施思路
实施思路体现了平衡的哲学。
这里有一个初步的考虑，就是实施的成本。 主要费用如下：
兼职维护开源项目既可以是免费的，也可以是不免费的。 缺乏自由主要体现在时间和精力的投入有限，所以综合考虑后，选择低成本的方案。
后来我特意浏览了一些KTV网站。 综合比较后，感觉Vue官网总体不错。 然后看了vue官网源码，结合实现成本，确定了实现思路：
技术选型
实现思路确定后，整体的技术选型也就确定了，如下：
技术选型=pnpm+turbo+vue3+ts+vite++服务器（node|go）+
服务器端，以上选择与vue官网一致（总体原因）。 下面我简单介绍一下各项技术选型的理由：
PNPM+涡轮
当前生态百花齐放，正确的实践方法应该是整合最好的方法，即取各家公司的长处。 目前的趋势也是如此。 每个开源工具都达成默契，专注于自己的能力。
例如，pnpm 擅长依赖管理，turbo 擅长构建任务编排。 所以在技术选型上，我选择了pnpm和turbo。
pnpm原因如下：
对比vue官网，我是在使用pnpm的时候添加的。
涡轮增压的原因如下：
vue3+ts
vue3的原因如下：
原因如下：
维特
大家都不再陌生了。
原因如下：
原因如下：
设计理念我很认同，目前官网主题的实现方案是：
fork @vue/theme 源码并使用pnpm进行管理和二次开发，然后慢慢演化成自己的主题。
KTV网站： /
服务器节点| 去
节点原因如下：
去的原因如下
这里我使用提供的API，方便快捷。
技术选型总结
至此，技术选型已经介绍完毕。 上述技术选型既有主流成熟度，也有前沿趋势。 总的来说，这是一个很好的解决方案。
目前施工工艺和技术选型的趋势是什么？
笔者认为，当前的前端构建工具链正在快速被Rust和Go接管。 比如swc、vite、turbo，速度惊人。 这也对前端工程师提出了更高的要求，鼓励我们永无休止地学习。
技术选型确定并开发维护一段时间后，技术选型还可以调整吗？
当然可以，有信心把“？”这个词去掉。
在建筑设计中，有一个原则叫做进化原则。 进化胜于一步。 好的软件会不断发展。 这符合人类的演化、地球的演化、宇宙的演化。 自然法则，最简单。
说到架构，下面我就介绍一下官网的技术架构。 请和我一起阅读。
技术架构三原则
建筑设计有三个重要原则：
也就是说，在做架构设计的时候，必须有意识地让架构符合这三个原则。 这将确保你的架构设计至少在大方向上是正确的。
通用软件架构
以下是4种常用的软件架构：
分层架构是最常用的软件架构。 感觉有点递归。 首先分为大层，每个大层又可以分为更小的层。 另外，插件架构也很常用。 在前端层面，一般采用分层架构和插件架构。
俗话说：麻雀虽小，五脏俱全。 虽然开发一个KTV网站很容易，但你仍然可以有优秀的架构思想。 下面介绍一下我的官网架构设计。
官网结构
官网的软件架构图如下：
采用分层架构设计，具体如下：
上面的架构图并不一定完全满足分层架构。 这并不重要。 重要的是它符合架构的设计原则。 这里有一个简单的解释：
技术架构总结
上述常用的软件架构并不是独立存在的。 它们可能交叉并共存。 这些软件架构本身遵循适当性、简单性和演进性的原则。 我们要做的就是在软件生命周期中利用架构设计，让软件发挥出更大的价值，承载更多的使命。
构建部署构建
核心是使用pnpm+turbo来构建，大致介绍如下：
施工流程如下：
您可以在图中看到构建时间。 所需时间非常短，并且构建速度非常快。
具体使用方法请参考KTV文档和开源案例。
部署
核心是：用它来自动化构建和部署。
关于使用，大家可以自行搜索。 这里我解释一下部署过程，如下：
将官网代码提交到仓库并使用登录。 绑定项目设置域名。 绑定官网域名并填写构建配置。 这里我把官网当前的构建配置贴在网站上，如下图：
只需要设置一下即可，其余不变。 5. 保存构建配置，然后构建、部署并发布到外界。 6.只要将代码提交到后续官网，就会自动触发构建和部署。
部署矿坑：
官网使用的是pnpm和turbo。 使用它进行构建和部署时，遇到了本地成功成功，但是构建失败的问题。 具体原因是不祥的。 官网文档内容非常简单，并没有看到什么关于issue和的有用信息。 最后，我在上找到了一个关于构建和部署pnpm + Turbo +的视频。 看完视频并结合自己的理解，我就走完了这个过程。
预览和源代码
预览：直接访问官网m7s.live/，与上面设计图基本一致。
源码地址：//webs...
源码目录如下图：
如有需要，您可以自行下载查看。 这里不再介绍源码内容。
附开源实践总结