【 DevOps 】透過 GitHub Pages 服務發佈靜態網頁

內容

• 學習目標
• 前置準備作業
• 使用軟體
• 本範例 Repository 樹狀圖
• 透過 GitHub Pages 服務發佈靜態網頁

學習目標

• 在 GitHub 上透過 GitHub Pages 服務發佈靜態網頁

前置準備作業

• 一台可上網的 macOS 或 Windows 電腦
• 已申請 GitHub 帳號
• GitHub 上的 Repository 已存在靜態網頁

使用軟體

• Google Chrome 網路瀏覽器

本範例 Project Repository 樹狀圖

透過 GitHub Pages 服務發佈靜態網頁

Step 1. 透過瀏覽器開啟 GitHub 並登入

• 透過瀏覽器開啟 GitHub，GitHub 網址如下 https://github.com/

• 登入 GitHub

Step 2. 建立 GitHub Pages

• 點選上方的 Repositories 頁籤

• 點選要建立 GitHub Pages 的 Repository
  • ㊟ 本範例以 Project 的 Repository 說明之

• 點選右上角 Settings 頁籤

• 點選 GitHub Pages

• 設定 Source 下拉選單為 master branch

• 產生 GitHub Page 的 URL

Step 3. 查看 GitHub Pages

• 預設 GitHub Page 的 URL https://archerhuang.github.io/Project/ 會抓取 Project Repository 下一層的 index.html 檔

• 如要顯示 Movie_List_with_Genres 下一層的 index.html 檔，請在預設 GitHub Page 的 URL https://archerhuang.github.io/Project/ 後面加上 Movie_List_with_Genres 變為 https://archerhuang.github.io/Project/Movie_List_with_Genres

• 如要顯示 RGB_to_Hex_Converter 下一層的 index.html 檔，請在預設 GitHub Page 的 URL https://archerhuang.github.io/Project/ 後面加上 RGB_to_Hex_Converter 變為 https://archerhuang.github.io/Project/RGB_to_Hex_Converter

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://learningsky.io/author/archer/
• https://medium.com/@mmosconii