Try   HackMD
tags: FM631A FM628A FM633A

使用 GitHub Pages 架設個人網站

GitHub 原本是檔案版本控制的雲端平台。不過它提供有一個 GitHub Pages 功能, 可以當作網頁伺服器使用, 只要將 HTML 檔上傳至 GitHub, 即可用使用瀏覽器取得網頁。

註冊 GitHub 帳號

連線至 https://github.com/ 頁面並依照下列步驟完成:

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 →

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

建立倉庫

Github 的使用是以倉庫 (repository) 為單位, 倉庫內可以存放各式各樣的檔案, 接著我們就要建立一個專屬於 Github Pages 的倉庫, 讓我們可以存放後續實驗所需的網頁。

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 →

上傳檔案

倉庫建立完成後就可以開始上傳檔案, 請準備如下的文字檔 test.txt:

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 →

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 →

將檔案放入倉庫的動作稱為 commit, 除了儲存檔案外, 也會記錄不同時間儲存的檔案內容, 以便能夠將檔案內容回復到特定時間點。

瀏覽網頁

將檔案成功上傳到 GitHub 後, 在瀏覽器輸入以下網址就能看到網頁內容:

https://使用者名稱.github.io/test.txt

請務必在網址開頭填入自己 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 →

前半段的 https://使用者名稱.github.io 是 GitHub Pages 的伺服器網址, 後半段則是檔案名稱。

利用這樣的方式, 我們就可以把網頁檔案放到 GitHub 上, 用 GitHub 來建置專屬的個人網站了。