- 利用腳手架創(chuàng)建react 項目
create-react-app test
我們在github上面新建一個遠(yuǎn)程倉庫,名字也叫test
記錄遠(yuǎn)程倉庫的地址(eg: https://github.com/fyxwanan/author-demo.git)修改并完善項目,達(dá)到你想要的那種程度,瘋狂敲代碼
在package.json配置文件中加一句:
“homepage”: “https://fyxwanan.github.io/test”
'test '是 項目名稱,跟遠(yuǎn)程倉庫名字一樣鲤拿,'fyxwanan'對應(yīng)你的github用戶名
homepage不配置的話或者配置有誤,訪問鏈接的時候就會報錯404
- 開始打包
npm run build
// 打包完成之后會生成一個build文件夾,內(nèi)面都是靜態(tài)資源
- 之后我們就把項目傳到github上面去
git add .
git commit -m '一些描述'
git remote add origin https://github.com/xxx(之前我們保存的地址)
// 一般提代碼之前我們都應(yīng)該先拉下代碼宛篇,避免沖突
git pull origin master
git push origin master
// 成功之后代碼就會提交到master上面去,此時倉庫中有相應(yīng)的代碼
-
在github展示的是靜態(tài)的html文件薄湿,我們上傳的react項目是不能預(yù)覽的叫倍,此時我們可以把打包好的build文件夾上傳到另一個分支
git subtree push --prefix=build origin gh-pages
執(zhí)行7操作之后,倉庫多了個gh-pages分支
-
進(jìn)入倉庫豺瘤,點擊Setting,找到GitHub Pages這一塊吆倦,修改Source選擇剛剛的gh-pages,然后保存
image.png
然后 圖中的 2 就是你項目預(yù)覽的地址坐求。
點擊鏈接就可以預(yù)覽你的項目啦