当我们使用Github、Coding Net、码云Gitee等存储工程代码时,都会有相应的pages服务。
它们提供的pages如下:
- Github Pages:
****.github.io
- CodingNet Pages:
****.coding.me
- Gitee Pages:
****.gitee.io
以Github Pages为例,操作流程如下:
为了使多个项目可以共用该Github Pages,我们不建议将某个项目直接设置使用。
在github中新建一个以自己 用户名.github.io 开头的工程名称,并设置为public,如
cpm828.github.io
。在
cpm828.github.io
工程下新建一个index.html,用于存放一个路由导航页面,可以导航到其他工程。操作完成之后就可以使用https://cpm828.github.io
来访问这个index.html了。继续绑定自己购买的域名。
在Settings页面
Github Pages
模块里面设置Custom domain
为自己的域名,如pimichen.com
,如图:在
cpm828.github.io
新建一个CNAME
文件,里面写上自己的域名。如图:如果操作正确,会出现该提示,如图。现在,你可以使用自己的域名访问了。
继续设置https协议。
在Settings页面
Github Pages
模块,勾选Enforce HTTPS
,如果出现置灰无法勾选的情况,打开网页控制台,找到该input,手动删除disabled
属性,然后勾选即可成功。哈哈,Github
你不要太调皮。成功之后即可以使用https来访问了。
附加:
Github 里面的工程可以设置一个 gh-pages
分支用于存放需要使用 Github Pages
的代码内容。如新建了一个 cpm-ui
的工程,我们将编译后的目录存放到 gh-pages
分支中,vue-cli
生成 gh-pages
分支步骤如下:
正常创建工程并存放到github上
npm安装gh-pages
1
npm install gh-pages -D
配置快速启动脚本,配置homepages
package.json:1
2
3
4"homepage": "https://cpm828.github.io/cpm-ui", // 首页地址
"script": {
"deploy": "gh-pages -d examples/dist"
}如果是vue-cli项目,需要修改config/index.js:
1
2
3build: {
assetsPublicPath: ''
}执行编译,即可成功创建
gh-pages
1
npm run deploy
操作成功后访问 https://pimichen.com/cpm-ui
即可以直接指向 cpm-ui
工程下 gh-pages
分支中的内容。