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