使用Github展示自己的项目

灰太狼 2022-12-23 03:30 306阅读 0赞

前提：

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

20201122131633510.png

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

1. GitHub Pages

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

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

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70

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

2. gh-pages

package.json添加deploy script：

  1. "scripts": {
  2.     "serve": "vue-cli-service serve",
  3.     "build": "vue-cli-service build",
  4.     "lint": "vue-cli-service lint",
  5.     "deploy": "gh-pages -d dist"
  6. }

  1. 安装gh-pages；

    1. npm install gh-pages --save-dev

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

    1. npm run build

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

    watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1 watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2

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

后记：

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

发表评论

表情：
评论列表 （有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读