【开源实践】从0到1做好官网开发

目的

• 聚焦开源官网开发，分享从 0 到 1 的官网开发实践经验
• 作为一个系列文章开头，不定期分享我在开源实践方面的总结和经验，欢迎关注

内容

文章主要介绍以下内容：

• 需求、设计、实现思路
• 技术选型： pnpm + turbo + vue3 + ts + vite + vitepress + 服务端( node | go ) + vercel
• 技术架构
• 构建部署
• 预览与源码
• 开源实践总结、附（文中提及名词地址）

需求

给开源项目 Monibuca 换官网，包含以下功能：

• 官网首页： Monibuca 的主页
• 文档教程页： Monibuca 的使用文档
• 后端服务：提供 go 包下载转发

Monibuca 是什么？

Monibuca 是开源 Go 语言流媒体服务器开发框架。如下图所示：

ui 设计

ui 这块， 有团队中的设计朋友在帮忙设计官网 pc 首页，其他的如文档教程页、移动端自适应等功能，则自行开发实现。

设计稿如下图所示：

主要设计内容如下：

• 整体分为 【导航 + banner + 内容 + 底部】 四个 ui 模块
• 整体版心固定为 1200px
• banner 版心固定为 1400px

这期间，我们和设计师保持沟通，首页 ui 的设计，是一个不断沟通和调整的过程。

自适应方案

pc 的自适应方案不只一种，浏览了一些主流官网，最终确定的自适应方案如下：

• 大屏幕（电脑）采用固定版心宽度，版心宽度 1200px 基本可以保证最小电脑屏幕能够完整展示出来
• 不做 rem 适配，使用媒体查询进行小屏幕（ pad 、 手机等）适配

提个问题， 为什么 PC 页面基本都不用 rem ？

实现思路

实现思路体现着平衡哲学。

这里有一个前置考虑，那就是实现的代价，主要代价如下：

• 代价大： 功能全部从 0 开发（掌控感更好，但费时费力），采用最前沿技术（利于学习成长，但难度大）