将react项目部署到Github pages

操作

首先在github上创建一个仓库,然后clone到本地,在本地目录创建一个react项目,最后把react项目部署到github pages页面。

准备环境

  1. github上面创建一个仓库
    在这里插入图片描述
    在这里插入图片描述

  2. 克隆到本地

    git clone xxxxx
    
  3. 创建一个react项目,在上面仓库的目录下面,比如仓库名字react_learn,就在react_learn/下创建一个react项目

    npx create-react-app app
    cd app
    npm install
    
  4. 安装gh-pages(github page一般用master和gh-pages分支部署)

    npm install gh-pages --save-dev
    
  5. 修改package.json

      "private": true,
      "homepage": "./",  
    
    "scripts": {
            ...
         + "deploy": "gh-pages -d build" //方便使用命令直接推送到github
    }
    
  6. 本地跑起来,yarn start,跑起来没有问题再继续
    在这里插入图片描述

  7. 推送到github

npm run build 将react项目打包编译成静态资源放在build目录下
npm run deploy 将build下面内容传送到github上

如果build下面index.html界面与预期不符合,检查6,7步。预期符合了再执行npm run deploy

  1. 遇到的问题
    github page是空白的,检查 “homepage”: “./”, 地址是否有问题
  2. 实际效果图

视频


版权声明:本文为u013716535原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。