如何将vuepress2.x项目部署到github pages并绑定自定义域名

大家好我是图恩，经过这两天的摸索终于将vurepress 成功部署到github pages，期间看过网上很多教程发现按照它们给出的代码或者配置都不能很好的正常运行。

以下为笔者整理的教程供参考：

创建vuepress2.x项目，可参考文章： 如何从零创建一个vuepress2.x项目

执行npm run docs:build 命令生成html文件

在github账号中创建同名xxx.github.io项目，比如笔者创建的项目为esplori.github.io，同时创建两个分支，main跟dev分支，后续github page会用到main分支。

将生成在.vuepress/dist/目录下的所有文件上传至项目的main分支

进入项目设置>pages ，在build and deployment 设置目录为刚刚创建的main分支，这个分支主要就是打包后的html文件。

在custom domain中添加自定义域名，一级二级域名都可以，添加成功后上面会显示访问地址，这个地方需要注意的是添加域名的操作会在根目录生成一个CNAME文件，内容就是自定义域名，也就是说如果你的项目需要一直保持这个文件的存在，否则不能访问。所以你可以在项目的.vuepress/public目录下新建一个CNAME文件，这样每次打包后都会有这个文件了。

最后做域名解析，在你的域名解析平台新建一个CNAME记录，记录值为github提供的二级域名，比如图恩的就设置的esplori.github.io

所以整个流程就是自定义域名通过cname解析到了github提供的二级域名，二级域名绑定了main静态文件分支，并通过项目内的CNAME文件跟关联最终实现域名的正常访问。

本文章由javascript技术分享原创和收集