之前用11篇文章分享了基于vue3开发完整的四件套（组件库、文档、示例、cli）和Monorepo组件库工程，构建和发布组件库。本文是这11篇文章的延伸——如何发布到GitHub以及如何快速使用GitHub发布组件库文档。这样，亚哥的《组件库框架》系列就形成了一个闭环：从开发到开源。开始本文之前，请先注册一个GitHub账号并登录。1提交GitHub1.1创建Repository登录GitHub后，点击右上角“+”--“Newrepository”创建Repository，如图如下图：进入仓库创建页面后，填写仓库名称（关于仓库名称，Elegant习惯使用本地项目名），点击页面下方的“创建仓库”按钮：repository创建完成后，会进入repository的页面，里面写的很清楚如何将本地代码提交到githubrepository。1.2推送代码在命令中进入项目根目录，执行以下命令将代码提交到上面创建的GitHub仓库，初始化本地Git仓库：gitinit添加要提交到git的文件：混帐添加。提交代码到本地仓库：gitcommit-m'feat:Initializecomponentlibraryproject'设置主分支：gitbranch-Mmain添加远程仓库，仓库创建成功后页面可以看到这行命令上面：gitremoteaddorigingit@github.com:HeroCloudy/yyg-demo-ui.git将代码推送到GitHub仓库：gitpush-uoriginmain这会将本地代码提交到GitHub。刷新仓库页面，显示如下：如果后续代码有修改，先使用gitcommit提交到本地仓库，再使用gitpush命令推送到github。2发布组件库文档代码已经发布在GitHub上。接下来，我们希望充分利用GitHub的资源，将组件库的打包文档发布在GitHub上，方便用户直接访问文档。GitHub提供了一个能力页面，通过它我们可以将静态HTML资源发布到GitHub上，并支持以HTTP的形式访问网页。实现思路如下：构建组件库文档；将构建好的组件库文档（./docs/.vitepress/dist）提交并推送到仓库的另一个分支；配置GitHubPages指向上面的新分支。2.1构建组件库文档我们之前配置了组件库文档的构建命令：pnpmrundocs:build等待构建完成，会看到打包后的内容位于./docs/.vitepress/dist目录。2.2推送到github新分支文档建好后，需要提交到新分支。如果手动操作，会很麻烦。优雅哥推荐使用一个npm工具来帮助我们完成这个操作——gh-pages。在项目根目录下安装gh-pages：pnpminstallgh-pages-D-w然后就可以使用gh-pages将指定目录提交到github的新分支（gh_pages分支）：gh-pages-ddocs/。vitepress/dist稍等片刻，控制台会提示Published，表示发布成功。这时候可以查看仓库的分支：先执行gitfetch拉取github上最新的分支信息，然后执行gitbranch-a查看本地和远程所有分支的输出结果如下：可以看到远程中有一个名为gh-pages的附加分支。我们在GitHub仓库的首页也可以看到这个分支：回顾一下，上面的操作分为两步：打包组件库文档，将打包后的文档内容推送到gh-pages分支。我们可以在项目根目录的package.json中添加一个新的脚本来结合以上两个操作："scripts":{..."docs:deploy":"pnpmrundocs:build&&gh-pages-ddocs/.vitepress/dist",...}，后面修改组件库文档内容时，只需要执行pnpmrundocs:deploy即可。2.3配置GitHubPages1）点击仓库首页的设置按钮，进入仓库设置页面2）点击设置页面左侧的pages，进入GitHubPages页面，可以看到gh-pages分支默认给我们配置好了，还要告诉我们访问地址：3）在浏览器访问这个路径，会发现显示不正常。这是因为组件库文档模块配置的上下文路径（BaseUrl）与真实的上下文路径不同。2.4组件库文档上下文路径区分环境最后，我们需要修改组件库的上下文路径。如果简单，修改docs/.vitepress/config.ts中导出对象的base属性值即可。githubpages中的context路径为：/yyg-demo-ui/，所以只需将base:'/'改为base:'/yyg-demo-ui/'即可。但是这样在本地开发时访问路径也需要携带这个上下文http://localhost:3100/yyg-dem...。那么如何使用/进行本地开发和/yyg-demo-ui/进行打包构建呢？只需要以下三步：1）在docs模块中添加开发依赖minimist，用于提取命令中的参数：pnpminstallminimist-D2）修改docs模块中的build命令，添加buildfor命令参数："scripts":{..."build":"vitepressbuild--build",...},3）在docs/.vitepress/config.ts中判断当前运行模式是dev还是build，根据判断结果指定base的值：importminimistfrom'minimist'....constargv=minimist(process.argv.slice(2))constbuild=argv.build||falseexportdefaultdefineConfig({...base:build?'/yyg-demo-ui/':'/',...})这样我们就可以根据不同的运行模式指定不同的上下文路径。提交项目根目录下的代码，重新执行pnpmrundocs:deploy，等待组件库文档打包发布显示Published，然后刷新浏览器显示组件库文档的页面.如果仍然显示不正常，可能是网络和缓存的原因，暴力刷新几分钟后重试：至此，我们完成了组件库的开源，提交到GitHub，使用GitHubPages访问组件库的文档。GitHub上有很多高级的操作，比如使用GitHub进行CI/CD，Actionrunner等，可以帮助我们更自动化的实现很多操作，闲着没事可以多了解一下。感谢您阅读本文。如果本文对您有一点帮助或启发，请三连支持，多多了解。
