第十四章使用Vercel部署在线文档

第十四章使用Vercel部署在线文档
文档网站需要发布到互联网上才能让更多的人知道。传统的发布方法需要做以下准备。
- Linux服务器；
- 网页服务软件 Nginx；
- 购买域名 + 实名认证；
- HTTPS 证书；
- Sftp 上传工具；
- Github Action CI 自动发布最新文档。
这里面租用服务器和域名需要一笔花费。安装 Linux、Nginx，配置域名与 HTTPS 证书需要相应的服务器端知识。注册 HTTPS 证书和实名认证都需要准备和寄送材料，传统的部署方式可以说是费时费力。假设你只想简单的发布一个静态网页，完全没有必要采用这个方案。

目前，最佳的解决方案是使用 Serverless 页面托管云服务。这些云服务只需简单配置就可以自动发布 Github 上面的页面；图形化界面操作省去了学习服务器端知识；分配二级 HTTPS 域名无需购买域名和实名认证，可以说是省时省力。

目前比较推荐的有 Github Pages、Vercel、Netlify。

我们选择Vercel来部署我们的在线文档。

部署文档网站

首先需要登录 vercel.com/ 网站，使用 Github 账号第三方登录。这个时候 Vercel 会要求你提供 Github 数据读取授权。你可以认为 Vercel 这个时候充当的是一个 CI 服务器，它需要随时调用 Github API 随时监听项目的变化，并且获取最新的代码。
- 选择 New Project 添加一个项目。
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dRdv3MOG-1669311055394)(D:\GeniusNotes\ViteVue3UI\img\vercel_add_project.png)]$
- 导入github项目
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Ro8Su8i-1669311055395)(D:\GeniusNotes\ViteVue3UI\img\import_repo.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWDxMLPt-1669311055395)(D:\GeniusNotes\ViteVue3UI\img\import_repo_end.png)]$
- 选择项目目录
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3BJYlbh-1669311055396)(D:\GeniusNotes\ViteVue3UI\img\root_dir_doc.png)]$
- 配置打包属性
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMVkRVDX-1669311055396)(D:\GeniusNotes\ViteVue3UI\img\build_env.png)]$
- 点击Deploy按钮开始部署
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cAJvJPOX-1669311055397)(D:\GeniusNotes\ViteVue3UI\img\docs_dep_end.png)]$

访问地址：https://study-ui.vercel.app/

实现 CI 自动更新

下面要考虑的就是，如果有文档更新如何自动实现推送。当然这个 Vercel 已经默认提供这个功能。但是作为工程化，这个是需要大家考虑的一个问题。我们可以在 Deployments 中看到每次 Vercel 更新的记录，这表明 CI 工作正常。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WnzUSWZ-1669311055397)(D:\GeniusNotes\ViteVue3UI\img\auto_dep.png)]$

添加 HomePage 配置

文件名：packages/smarty-ui-vite/package.json
```
"homepage": "https://study-ui.vercel.app/",
1
```
下将发布后的地址填写到 package.json 中去，这一步的属性可以让 Github 页面中显示相应的主页链接。后续发布到 NPM 上也会有主页链接。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eM1FytCE-1669311055398)(D:\GeniusNotes\ViteVue3UI\img\online_doc.png)]$

本次部署选择了 Vercel ，其实其他两个服务也各有特点，尤其是 Github Pages，这个非常常用，也请大家体验一下。
相关阅读:
华为HMS Core携手超图为三维GIS注入新动能
 Web3：去中心化视频平台都有哪些？
ElasticSearch如何在前后台启动
 记录一次坑｜包版本不一致产生的问题的排查过程
 纯css实现奥运五环、3D平移、旋转、扭曲
 python在线及离线安装库
 Request和Response介绍 [Tomcat][Servlet]
Java市场真的饱和了吗？
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成，实现通用的业务编码规则管理
 K8S------kube-apiserver Webhook令牌客户端认证
原文地址：https://blog.csdn.net/qq_36362721/article/details/128029813

第十四章 使用Vercel部署在线文档

部署文档网站

实现 CI 自动更新

添加 HomePage 配置