將 Create React App Deploy 到 Github Pages
Published in
5 min readApr 6, 2021
GitHub Pages 是 GitHub 提供的一個網頁代管服務，於2008年推出，搭配 Creact React App 可快速建置靜態網頁，推薦初學者用來客製化個人履歷或作品集。
建立ＧitHup 新專案： 使用 Create React App
打包部署：修改路徑
建立 Ｇithup 新專案
- 建立新的 Create React App
$ npx create-react-app my-app
$ cd my-app
$ yarn start
Create React App- 如果有安裝 Github Desktop ，可以從已經 連結到 Github 的 Github Desktop Gui 介面快速新增 Repository
File > Add Local Repository > choose > “my-app”
安裝 Githup Pages
- 安裝 gh-pages
$ yarn add gh-pages- 在
Package.json加入
"scripts": {
"deploy": "gh-pages -d build"
}
- 加入之後 git commit / git push 上 Github
！！！必須取消勾選 keep this code private 才能使用 Github Pages
打包部署
- 產生 bundle 檔案
$ yarn build
- 將Code deploy上去
$ yarn deploy- 進入 Github > 專案的 Repository > Settings 頁面 > 下滑至 GitHub Pages > 出現 Publish 的連結
連結打開會呈現一片空白，因為路徑指向錯誤，此時從 Github Project 切換到 Branch gh-pages 找到 index.html 更改 css 及 js 的連結路徑
<!doctype html>
<html lang="en"><head>
.
.
.
<link rel="stylesheet" href="/這裡加上repository名稱/styles/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
</head><body>
.
.
<script src="/這裡加上repository名稱/static/js/1.59eea781.chunk.js"></script>
<script src="/這裡加上repository名稱/static/js/main.e99c9045.chunk.js"></script>
</body></html>
- 存檔後，等一段時間即可顯示
！！！如果要使用 Custom domain，則不需要處理連結路徑。
Say hello! 我是 Angel,這裏的內容如果有幫到你，希望能獲得一些拍手作為鼓勵
工作上的合作歡迎隨時透過 Mail 聯繫我 contact@aneglho.design–
Thanks for watching!
