iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
2
Modern Web

從 Hooks 開始,讓你的網頁 React 起來系列 第 29

[Day 29 - 即時天氣] 寫網頁就是要炫耀啊,不然要幹麻?發布上 Github Pages 吧!

keywords: create-react-app, github pages, progressive web app, PWA, deployment

昨天我們已經在完成了整個即時天氣 App,既然都寫好了當然就是要跟大家分享炫耀啊!今天我們會把先前在 CodeSandbox 完成的即時天氣 App 透過 Create React App 在本地建好專案後發布到 Github Page 上,讓所有人都可以看到你完成的作品,你可以把完成的這個作品傳給你的爸爸、媽媽、阿公、阿嬤,跟他們說這是你兒(孫)做的拉!

在這裡就把這個「即時天氣 App」正名為「臺灣好天氣」!阿捏丟四愛胎玩啦!!

今天的單元會需要你對終端機(Terminal)、npm 和 Github 本身具備有一些基本的了解,你可以先照著步驟做,在不清楚的地方或完成整個流程後,在自己透過其他網路資源去補齊自己還不太了解的地方。

完成後你做的即「臺灣好天氣」就會像這樣有一個屬於自己的網址可以分享:https://pjchender.github.io/realtime-weather-app/

Create React App

先前我們有提到在 CodeSandbox 上的 React 專案時,主要是基於 Create React App 所建立,這個 create-react-app 是個在終端機中可以使用的工具,它讓開發者可以在電腦本地快速建立 React 專案的工具,透過終端機的指令就可以快速建立、開發、和測試 React 專案。

建立並啟動 React 專案

create-react-app 這個工具並不先行需要安裝,但你的電腦需要已經安裝好 Node.js 和 npm,接著透過終端機切換到想要建立專案的資料夾內,在終端機輸入:

$ npx create-react-app <專案名稱>
$ npx create-react-app realtime-weather-app

這時候 create-react-app 就會建立一個名為 realtime-weather-app 的專案:

Imgur

接著在終端機中輸入下列指令即可進入並啟動該專案:

$ cd realtime-weather-app
$ npm start

如下圖所示,啟動後會看到一個 React 專案:

Imgur

編輯與搬移專案

透過程式編輯器打開專案後,你會發現就和在 CodeSandbox 的架構很像:

Imgur

安裝相關套件

首先我們把在「臺灣好天氣」中和 Emotion 有關的套件安裝進來:

$ npm install @emotion/core @emotion/styled emotion-theming

使用 CSS Reset

在原本 CodeSandbox 專案中我們有使用了 normalize.css,這是用來解決跨瀏覽器間某些元素預設的 CSS 樣式不同。在 Create React App 中,我們只需在 index.css 中加上:

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

它就會自動幫我們套入 normalize.css 的內容。

搬移專案內容

接下來就可以把原本寫在 CodeSandbox 上的程式碼搬進本機內。若有需要的話,也可以直接從 Github 下載完成好的程式碼更改使用。

補充:雖然在 CodeSandbox 工具列上的 File 中有「Export to zip」的選項,但目前點了沒有反應。

當我們全部搬移好後,一樣透過 npm start 啟動專案後,就可以看到原本只能在 CodeSandbox 上的畫面,出現在自己電腦的 localhost:3000 上了!

Imgur

如果在本機能夠看到原本的「臺灣好天氣」的話,接著就可以準備把原始碼推到 Github 上。這裡我們先留一個 Github Commit:

# 在專案資料夾內
git add .
git commit -m "Finish download original codes of Weather App on CodeSandbox"

新增並將專案 push 到 Github 上

先在 Github 上新增一個專案,這裡我取名一樣叫 realtime-weather-app

Imgur

接著在終端機中貼上下列程式碼,就可以把該專案推上 github 專案:

# 在專案資料夾內
git remote add origin git@github.com:PJCHENder/realtime-weather-app.git
git push -u origin master

如下圖所示,現在 github 上已經有一份我們的程式碼了:

Imgur

將專案發佈到 Github Page 上

Github Page 是 Github 提供可以放置靜態網站的服務,現在就讓我們把「臺灣好天氣」發布到 Github Page 上。

在 package.json 中設定 Github Page 的網址

在專案的 package.json 中加入 homepage 欄位,裡面放入 Github Page 的網址:

// package.json
{
  "name": "realtime-weather-app",
  "homepage": "https://myusername.github.io/my-app",
  // ...
}

其中 myusername 的部分就是你的 github 帳號,而 my-app 的部分就是剛剛在 Github 上建立的專案名稱。以這裡來說,我的 username 就填入 pjchender,專案名稱就填入 realtime-weather-app,因此 package.json 會如下圖所示:

Imgur

安裝並設定部署用的工具 gh-pages

接著一樣在資料夾內透過 npm 安裝 gh-pages 這個工具,這個工具可以幫助我們快速的把專案發佈到 Github Page 上:

# 在專案資料夾中
npm install --save gh-pages

接著再到 package.json 檔案中的 scripts 欄位中添加以下指令:

// package.json
{
  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    // ...
  }
}

變更部分如下圖所示:

Imgur

開始發布啦

有了 gh-pages 這個工具後,只需要終端機中輸入一個指令就可以發布到 Github Page 上拉!!那就是:

npm run deploy

沒問題的話,火箭就順利升空拉~

Imgur

在 Github 上開啟 Github Page

當我們成功部署到 Github 上後,你會發現這個專案多了一個名為 gh-pages 的分支:

Imgur

先在我們就要到 Github 的設定頁中前開啟 Github Page 的功能,並且把頁面對應的內容指到 gh-pages 這個分支。

首先進到 Github 專案的設定頁面:

Imgur

接著拉到最下面會看到 Github Pages 的地方。這裡我們要確認 Github Pages 已經被開啟,並且在 Source 的地方選擇到的來源是 gh-pages branch 這個分支:

Imgur

現在點擊 Github Pages 提供的網址,趕快來看一下吧:

Imgur

努力了這麼久,這個成品終於正式發佈上線拉!!

修改 Github 專案的說明

最後會到 Github 該專案的首頁,可以編輯一下專案的描述和對應的網址:

Imgur

恭喜你!大功告成拉!就在 Pixel 4 發表的今天,我們的「臺灣好天氣」也上線啦!!

範例程式碼

今天的範例程式碼會放在 Github 上,有需要的話可以直接下載下來執行或檢視:

參考資源


上一篇
[Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用
下一篇
[Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠,還要變成手機 App!還有那些重要但故意先不告訴你的內容
系列文
從 Hooks 開始,讓你的網頁 React 起來30

1 則留言

0
falex
iT邦新手 5 級 ‧ 2019-11-18 12:00:17

補充:雖然在 CodeSandbox 工具列上的 File 中有「Export to zip」的選項,但目前點了沒有反應。


現在可以 Export to zip 了。

我要留言

立即登入留言