详细视频版www.bilibili.com/video/BV149…

github 部署静态页面

主要分为三种：

• 普通的HTML文件
• React项目
• Vue项目

HTML项目

1、创建一个项目

2、点击“初始化存储库”

3、点击下方的“+”号，输入框填入本次修改信息，然后点击上方的“✅”

4、点击“发布分支”，在弹出的下来框中选择有“public”关键字的，“public”是公共仓库，“private”是私有仓库

5、选择仓库类型后，VsCode会自动帮你在Github创建仓库，并提交

6、登录Github，找到刚才的项目，点击“Settings”

7、点击左侧“Pages”

8、在这里选择“master”分支，点击“Save”按钮。

9、点击生成的链接🔗，查看部署的静态页面。

Vue项目

1、创建一个项目，选择Vue2/Vue3，选择相应的配置。（使用npx不用全局安装vueCli）。

    npx @vue/cli create yourProjectName

2、安装"gh-pages"

    yarn add gh-pages -D

3、初始化仓库，提交下代码，这些步骤同HTML项目相同，提交后，登录Github，进入项目，选择Code，复制该项目链接🔗，链接方式SSH或者HTTPS都可以。

3、在“package.json”的“scripts”中添加两个脚本：

• 需要将-r 后面的链接地址改为你的项目的地址。
• -b是切换分支，gh-pages是静态页面分支的名字，叫什么都可以。

    "predeploy":"npm run build",
    "deploy":"gh-pages -d dist -r https://github.com/DaiWang-Lei/vue-pages.git -b gh-pages"

4、在终端中运行命令,目录中出现dist同时出现Published，则发布成功,即可打开页面。

    npm run deploy

5、发布成功后，登录Github，进入项目，选择Settings,点击左侧Pages，选择gh-pages分支，的root,点击Save,点击生成的链接🔗。即可进入。

6、如果发布上去的页面打开时空白，则需要在vue.config.js里加上如下配置，再运行下npm run deploy：

  publicPath:'.'

React项目

1、创建React项目

    npx create-react-app myPages

2、安装“gh-pages

    yarn add gh-pages -D

3、初始化代码仓库，提交下代码，同HTML项目相同，登录Github，进入项目，选择Code，复制该项目链接🔗，链接方式SSH或者HTTPS都可以。

3、在“package.json”的“scripts”中添加两个脚本：

• 需要将-r 后面的链接地址改为你的项目的地址。
• -b是切换分支，gh-pages是静态页面分支的名字，叫什么都可以。

   "predeploy":"npm run build",
   "deploy":"gh-pages -d build -r https://github.com/DaiWang-Lei/reactpages.git -b gh-pages"

4、在终端中运行命令npm run deploy,左侧目录中出现build，同时出现Published，则发布成功。

5、登录Github，进入项目，选择Settings,点击左侧Pages，看是否已生成链接，如果没链接，再进行后续步骤；选择gh-pages分支，的root,点击Save,点击生成的链接🔗。即可进入。

6、如果发布上去的页面点开空白，则需要在package.json里加上如下配置，再运行下npm run deploy

    "homepage": ".",