美文网首页
在github上面部署预览你的React项目(搭建博客)

在github上面部署预览你的React项目(搭建博客)

作者: 小热呀丶 | 来源:发表于2019-05-27 23:01 被阅读0次
    1. 利用脚手架创建react 项目
    create-react-app test
    
    1. 我们在github上面新建一个远程仓库,名字也叫test
      记录远程仓库的地址(eg: https://github.com/fyxwanan/author-demo.git

    2. 修改并完善项目,达到你想要的那种程度,疯狂敲代码

    3. \color{red}{重要}在package.json配置文件中加一句:

    “homepage”: “https://fyxwanan.github.io/test” 
    
    'test '是 项目名称,跟远程仓库名字一样,'fyxwanan'对应你的github用户名
    homepage不配置的话或者配置有误,访问链接的时候就会报错404
    
    1. 开始打包
    npm run build
    // 打包完成之后会生成一个build文件夹,内面都是静态资源
    
    1. 之后我们就把项目传到github上面去
    git add .
    git commit -m '一些描述'
    git remote add origin https://github.com/xxx(之前我们保存的地址)
    // 一般提代码之前我们都应该先拉下代码,避免冲突
    git pull origin master
    git push origin master
    // 成功之后代码就会提交到master上面去,此时仓库中有相应的代码
    
    1. \color{red}{重要}在github展示的是静态的html文件,我们上传的react项目是不能预览的,此时我们可以把打包好的build文件夹上传到另一个分支
    git subtree push --prefix=build origin gh-pages
    
    1. 执行7操作之后,仓库多了个gh-pages分支

    2. 进入仓库,点击Setting,找到GitHub Pages这一块,修改Source选择刚刚的gh-pages,然后保存


      image.png

      然后 图中的 2 就是你项目预览的地址。

    3. 点击链接就可以预览你的项目啦

    相关文章

      网友评论

          本文标题:在github上面部署预览你的React项目(搭建博客)

          本文链接:https://www.haomeiwen.com/subject/ltfltctx.html