Try   HackMD

從 0 到 1 的 GitHub Pages 教學手冊

影片教學

Windows：https://youtu.be/PldKaxOkN1o
Mac：https://youtu.be/DjgsqLLJrxM

開始前注意事項

  • 本次教學使用 GitHub Desktop 應用程式操作
  • 著重於不需要了解 Git指令 與 Git觀念知識
  • Windows 作業系統必須是 64bit
  • 提交作業的話，請打開 GitHub Pages 的功能，就可以在網路上看到你的畫面哦

32 位元與 64 位元 Windows： 常見問題集

GitHub Desktop 下載連結
請依作業系統 Download
教學操作版本號為 2.4.0 不同版本介面可能有所不同

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

閱讀指南

  • 我們會模擬開發的狀況，來介紹如何 初次上傳 與 修改後上傳
  • 閱讀本教學手冊時，可以透過畫面右側的文章導覽到達指定標題
  • 若對於以下操作想要深入了解的話，建議上是先學習 Git是什麼

GitHub 註冊

複製以下的連結，前往 GitHub 官網
https://github.com/

  • 依下圖所示填寫你的資料，點擊 Sign up for GitHub

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著會有 機器人驗證 與 Email 郵件推播資訊勾選框

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著會有選擇 GitHub 帳號的相關資訊
  • 請選擇 Individual (個人) 與 Free

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著就歡迎使用 GitHub 並且要你填寫來源資訊，這個可以按 Skip this step

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 恭喜到這邊後，就可以去驗證電子郵件
  • 驗證後就已經完成註冊

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

初次上傳

專案程式碼

  • 請於習慣路徑建立專案資料夾
  • 接著我們照著下圖的方式，模擬專案已完成

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

GitHub Desktop 設定

  • 打開一開始就下載的 GitHub Desktop 執行檔
  • 一開始建議先去設定以下兩點
    • GitHub 帳號綁定
    • Git 使用者與信箱 (不設定的話，等等上傳會叫你設定)
  • 跟著下方的圖示點開 Options

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 登入 GitHub 帳號

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 切換到 Git 填寫 Name 與 Email

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Name 與 Email 是指我們每一次專案版本修改並提交紀錄的使用者

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

建立 Repository

Repository 的翻譯是儲存庫
意思是會把專案資料夾的檔案複製一份加到 Repository 裡面

從下圖會看到左邊有4個選項

  1. 建立操作教程的儲存庫
  2. 從網路上的儲存庫複製一份到本機上
  3. 建立一個新的儲存庫到本機上
  4. 從本機上加入已存在的儲存庫

注意

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

我們要選擇 選項4 因為我們已經有專案，只是還沒有儲存庫
選項3 是創建一個 空的專案資料夾 與 內建儲存庫

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著依下圖操作

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 若沒意外的話，會跳出下圖警告，意思是檔案內沒有儲存庫
  • 此時點選 create a repository 建立儲存庫

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著會看到以下圖示
  • 特別注意的是 Local path 已經綁定資料夾，你不能 Choose 它
  • 建立儲存庫的各選項資訊為
    • Name (儲存庫名稱)
    • Description (儲存庫的描述 e.g 第一週作業)
    • lnitialize this..(儲存庫初始化階段，建立 README 檔案)
    • Gitignore (需要被儲存庫忽略的檔案)
    • License (授權宣告，意思是別人取用檔案的話自身權益的保障)

以上選項可以只填寫 Name 就好哩，接著按下 Create Repository

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著請看下圖的紅框 LiveCourse 就是已建立的 repository
  • 下方有 Changes 與 History

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著我們切換 History 會看到以下的初始化檔案紀錄

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
此時專案資料夾內會有 .git 與 .gitattributes

  • .git 是隱藏資料夾 (這個代表著你的儲存庫)
  • .gitattributes 這個是 Git 斷行字元處理 (請不要理它)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

到這邊就完成了建立 Repository 的流程

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

推上 GitHub 伺服器

  • 我們接續上一個步驟的 History
  • 你會發現程式碼已經被儲存庫完整紀錄下來
  • 這個時候選單切換為 Changes
  • 點選下圖的紅框 發佈儲存庫 (推上 GitHub 伺服器)

這邊就不特別 Google翻譯…請自行查詢藍框內的英文

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著彈出的視窗，要畫重點注意
  • 選項上我們不是企業，是屬於個人要選擇 GitHub.com
  • Name 這個會自動帶入儲存庫名稱
  • Description 描述可空白
  • Keep this code private 這個重要了！請取消勾選

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
決定了發佈 GitHub 伺服器的儲存庫是否公開

  • 取消勾選 = 公開
  • 已勾選 = 私密

如果是勾選狀態傳給助教或老師批改就會出現 GitHub 404 頁面
這個時候筆者就把你釘在牆上，我在講你有沒有在看，沒有嘛！！

  • 接著就放心地按下按鈕

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 接著開啟 GitHub 並且登入帳號
  • 按照下圖可以點擊 Your repository 或者畫面左側的儲存庫名稱
  • 特別注意的是此畫面是已經上傳的儲存庫為私密狀態
  • 若你的已經是公開，可以大概看一下儲存庫 Settings 按鈕在哪
  • 接著會教如何改回公開，即可避免被筆者釘到牆上

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 當你發現點進去儲存庫後是 Private 的話
  • 請點擊 Settings

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 當切到 Settings畫面後，頁面滾到最下方找到 Danger Zone
  • 點擊 Make pubilc

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 輸入紅框內的文字
  • 就可以點擊按鈕切換成公開
  • 此時切回專案資料夾的畫面 Private 就會消失，就不放圖囉

GitHub Pages 設置

  • 接著透過 GitHub 建立靜態網站稱為 GitHub Pages
  • 我們在 Settings 頁面找尋 GitHub Pages 標題如下圖所示
  • 找到後點擊 下拉式按鈕 選擇 master branch

  • 接著會畫面會閃一下重整頁面
  • 回到 GitHub Pages 標題，就會發現如下圖所示
  • 可以看到下圖的藍框有一串網址，這個就是你的靜態網站網址

生成靜態網站的速度，依專案大小而定通常不超過3小時

截止於此，你的專案可以傳給助教或老師檢閱囉
接下來是當建立儲存庫專案已被追蹤，修改後的操作

修改後上傳

專案程式碼

  • 接著我們模擬一下程式碼修改

GitHub Desktop 操作

  • 程式碼儲存後，回到 GitHub Desktop
  • 就會發現 Changes 後面多了 (1) 這代表1個檔案被修改過
  • 從下圖來看可以發現修改的程式碼，完整顯示於畫面上
  • 這時候來到左下方紅框 - 意思提交檔案紀錄的選項

  • 依下圖所示會看到 "被助教釘在牆上修改版本_v1"
  • 這個意思是本次提交檔案紀錄的標題
  • 至於 Description 就是這次提交紀錄的描述

標題通常會寫 修改程式碼的主要操作 e.g. 修改 Footer 外距誤差值
描述可以不寫，但是若覺得程式碼修改比較複雜，可以有善利用描述

  • 接著就是點擊 Commit to master

  • 接著切換到 History 就會發現多一筆紀錄是 被助教釘在牆上修改版本_v1

  • 這個時候，就已經修改好本機的儲存庫
  • 接下來要上傳 GitHub 伺服器囉
  • 請切換回 Changes
  • 點擊 Push origin 後會跑一下等到按鈕消失即可

  • 接著回到 GitHub 儲存庫
  • 依下圖所示，會發現 commits 這個提交紀錄是 2 次
  • index.html 後面的版本紀錄最新的是 被助教釘在牆上修改版本_v1

  • 接著打開靜態網站網址，畫面上會同步更新

如果沒有的話，要稍微等一下重新整理

截止於此，修改後上傳已經完成囉

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

補充

VS Code

當你建立好儲存庫，你的專案資料夾內有 .git
重新打開後 VS Code 會跳出以下的警示，找不到 Git 應用程式

這是因為 GitHub Desktop 是採內建 Git 應用程式

解決方案：
點擊連結去官方下載 Git 應用程式，全域安裝在你的系統內

https://git-scm.com/

GitHub Pages 404

  • 如果你的 GitHub Pages 出現以下問題

  • 如果資料夾結構是類似於以下的圖示

這樣 GitHub Pages 會抓不到 index.html
你必須手動更改網址讓它指向 index.html

範例如下

https://username.github.io/儲存庫名稱/work1/index.html/
  • 如果資料夾結構是類似於以下的圖示

  • 但是以下的網址還是 404
https://username.github.io/儲存庫名稱/
  • 請試著手動輸入 index.html 讓它指向 index.html 檔案
https://username.github.io/儲存庫名稱/index.html
  • 或者你的資料結構 html 檔名，不是 index 的話，請改寫為你的檔名
https://username.github.io/儲存庫名稱/檔名.html

忽略檔案

  • 假設你想加入一些範例在資料夾內，但是又不想把它加入到儲存庫，可以參考以下的圖示。
  • 本次圖示是以新增 example 資料夾為例

推薦 VScode 套件，可以針對檔案右鍵加入忽略 - 連結

深入研究 Git

這裡是提供給讀者，學習 Git 的資源參考

感謝牆

謝謝 這篇文章，幫助我很多~ 洧杰
感謝分享~大家要注意路徑的問題喔！我之前卡了很久XDjason06286
謝謝這篇教學文，對於突然換電腦的我，現在再回頭重新設定一次，幫助很大QQ 西零
超級感謝這篇QQ，第一次這麼快又清楚的使用git
謝謝 這篇文章，幫助我很多~ Cliff0317

tags: Shared
Last changed by 
 
Albertnotes
3
37
41648
Published on HackMD