目的
- 聚焦开源官网开发,分享从
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
开发(掌控感更好,但费时费力),采用最前沿技术(利于学习成长,但难度大)