Lecture 06 - 進階- Github、部署、規劃
Github 和 Github Desktop
什麼是Github？
GitHub是一個在線軟件開發平台。它用於存儲、跟踪和協作軟件項目。
大多數程序員和IT公司使用它
用於協作和代碼版本控制
你可以把
Github視為程序員版的Google Drive所有代碼都會使用
git上傳到Github
Lab 01 - 創建Github帳戶
https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home
點擊上面的鏈接先註冊一個帳戶。如果你還沒有電子郵件，請註冊一個gmail帳戶。
Github 頁面的內容?
倉庫 (Repositories)
每個項目都被稱為
repository（又稱為 repo）我們將創建一個
repository，並將所有項目代碼上傳到該repository中
Lab 02 - 創建一個新的私有倉庫 (Private repository)
按照以下步驟創建一個倉庫：
您應該從 Github 首頁開始，點擊 右上角的加號 + 圖標，選擇 New repository
Lab 02 - 步驟 1
將倉庫命名為 <your_name>-project-website，然後選擇 Private
Lab 02 - 步驟 2
向下滾動並取消選中 Add a README file，然後點擊 Create a repository
Lab 02 - 步驟 3
如果完成，您將看到相應的屏幕。
Lab 03 - 下載 Github 桌面版
Lab 03 - 步驟 1
您將看到相應的屏幕，點擊 Download for XXXX 按鈕進行下載。
Lab 03 - 步驟 2
下載完成後，點擊 Sign in with Github.com 進行登錄。
Lab 03 - 步驟 3
成功登錄後，您可能會看到相應的屏幕（不包含內容）
Github Desktop 是什麼？為什麼要使用？
💻 一個基於 GUI 的 git 軟體
📡 容易上手的 git 管理 GUI
🧰 免費且強大
在初步階段，我們將使用 Github Desktop 來 push，clone，pull，merge 專案。如果您對編程有興趣，當您熟悉 Github Desktop 後，您可以學習 git。
Lab 04 - 使用 Github Desktop 來 push 代碼
push 代碼如果您還沒完成Lab 01-03，請先完成這些實驗室。
在這個實驗室中，我們將進行以下操作：
克隆(Clone)代碼
在本地電腦上調整代碼
推送代碼到
Github
Lab 04 - 步驟 1
回到這個畫面，您可以在畫面中央左側看到一個名為 Set up in Desktop 的按鈕。點擊它。
Lab 04 - 步驟 2
點擊後會彈出以下畫面。選擇一個適當的 本地路徑，然後點擊藍色的 Clone 按鈕。
Lab 04 - 步驟 3
Clone 完成後，您會看到這個畫面。檢查左上角的部分是否是您的存儲庫名稱。
Lab 04 - 步驟 4
右鍵點擊左上角的部分，然後選擇 Open in Visual Stuidio Code 進入 VSC。
Lab 04 - 步驟 5
在文件夾中創建一個 index.html 和 apple.html。
Lab 04 - 步驟 6
將這些內容複製到 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<h1>Hello world</h1>
<a href="/apple.html"> Go to apple </a>
</body>
</html>Lab 04 - 步驟 7
將這些內容複製到 apple.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>apple</title>
</head>
<body>
<h1>Hello apple</h1>
<a href="/index.html"> Go to index </a>
</body>
</html>Lab 04 - 步驟 8
回到 Github Desktop，選擇
index.html和apple.html在
Summary (required)輸入框中輸入內容輸入後，點擊
Commit to main
Lab 04 - 步驟 9
現在你可以點擊 Published branch 按鈕了。點擊後等待上傳。
Lab 04 - 步驟 10 Done
如果你從 Github 網站重新整理頁面(F5)並看到 index.html 和 apple.html，表示你成功了。
Lab 04 我們做了什麼？
Set up in Desktop=>git clone克隆一個項目表示下載一個項目Type in Summary (required)+Commit to main=>git commit提交表示對代碼庫進行了更改Click Published branch=>git push推送表示將這些更改添加到分支中
將網站部署到全球
如何連接網際網路並查看網站？
🖥 電腦？
🖨 物聯網裝置？
📱 手機？
📟 設備？
💻 伺服器？
💻 伺服器
我們需要一個伺服器來為使用者提供我們的網站/內容。
伺服器將幫助我們為目標用戶提供所需的數據。
如何獲得伺服器
自我託管?
雲端託管（SaaS）？
軟件即服務（SaaS）
一種軟件授權和交付模式，其中軟件以訂閱方式許可並集中託管。SaaS也被稱為'按需軟件'和Web-based/Web-hosted軟件
例如：AWS，Azure，GCP，Digital ocean，vercel等...
使用 vercel 進行網站託管
vercel 進行網站託管網站託管服務是一種互聯網託管服務，為客戶提供託管網站所需的設施，即使其創建和維護網站，並在全球資訊網上進行訪問。提供網站託管服務的公司有時被稱為網站託管服務提供商。
也就是說，您可以從雲端提供商公司租用伺服器。
Lab 05 - 部署 Github 儲存庫到 vercel
Github 儲存庫到 vercelVercel 是為前端開發人員打造的平台，提供創新者創造靈感時需要的速度和可靠性。
在這個實驗室中，我們將部署Lab 04 的 Github 儲存庫到 vercel。（免費）
Lab 05 - 步驟 1
打開 https://vercel.com/ ，並點擊 sign up。在該頁面中，點擊 Continus with GitHub 並進行註冊。
Lab 05 - 步驟 2
如果您可以看到此頁面，請點擊右上角的 Add New..，並選擇 Project。
Lab 05 - 步驟 3
選擇您的 repo，點選 import。 注意: 如果您尚未在 vercel 中授權 github，請先授權。
Lab 05 - 步驟 4
在此頁面，只需點擊 Deploy，等待部署完成即可。
Lab 05 - 步驟 5
恭喜，您已經成功將網站部署到全球！ 點擊 Continus to Dashboard 並獲取 DOMAINS 網址。
Lab 05 - 步驟 6
一個隨機的 DOMAINS 將被指定給您。這是您的網站所屬的網址。您可以將鏈接分享給他人。請嘗試單擊它並將鏈接分享給他人。
Lab 05 - 步驟 7
回到具有您的專案的 VSC。 現在，嘗試向我們的 index.html 添加更多代碼。
添加任何您喜歡的內容，甚至可以打開新頁面。
Lab 05 - 步驟 8
打開一個名為 images 的 folder，並添加一個圖像。
在 apple.html 中，在 <body> 中添加 <img> 標記，並參照圖像
apple.html 樣本
<img src="/images/hero.png" alt="a nice image">Lab 05 - 步驟 8 (Cont)
samples
Lab 05 - 步驟 9
回到 Github Desktop，執行與 Lab 04 - 步驟 8 相同的操作
在左下角輸入提交消息
點擊
Commit to main點擊右上方的
Push origin
Lab 05 - 步驟 9 (Cont)
Lab 05 - 步驟 10 Done
返回 vercel 並打開專案，您將看到網站已更新。
Lab 05 重點：Vercal 和 Github repo
每當發生推送時，vercel 將知道您的專案已更新並使用最新版本重新部署。
✨ 實際上，vercel 將使用 Github Actions 自動進行 CI / CD 進行部署。
Last updated