使用github pages发布自己的网站Date: 2019-11-07 当我们使用Github、Coding Net

Date: 2019-11-07

当我们使用Github、Coding Net、码云Gitee等存储工程代码时，都会有相应的pages服务。

它们提供的pages如下：

以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 分支步骤如下：

配置快速启动脚本，配置homepages package.json:

"homepage": "https://cpm828.github.io/cpm-ui", // 首页地址
"script": {
    "deploy": "gh-pages -d examples/dist"
}

如果是vue-cli项目，需要修改config/index.js:

build: {
    assetsPublicPath: ''
}

操作成功后访问 https://pimichen.com/cpm-ui 即可以直接指向 cpm-ui 工程下 gh-pages 分支中的内容。