使用Github展示自己的项目

前提：

创建个人的Github站点的仓库。 ” Github用户名.github.io “

在这仓库里放一些静态页面，在外网访问就能访问到里面的静态资源了

1. GitHub Pages

第一种：直接使用Github的Github Pages进行构建。

GitHub仓库  -  Settings  -  GitHub Pages  - 选择分支  -  Save

 访问：Github用户名.github.io/仓库地址   将显示仓库中index.html的内容。

2. gh-pages

package.json添加deploy  script：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"
}

 

1. 安装gh-pages；

   npm install gh-pages --save-dev

2. 打包项目；（生成dist目录）

   npm run build

3. npm run deploy：在Github仓库建立gh-pages分支，并将dist目录的内容作为分支的内容；并自动设置Source为gp-pages分支。

                        

 访问：Github用户名.github.io/仓库地址

后记：

• 删除：删除仓库的gh-pages分支( git push origin --delete gh-pages )，在Setttings中设置source为None；