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

內容

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

學習目標

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

前置準備作業

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

使用軟體


本範例 Project Repository 樹狀圖


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

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

☆ 1.1  透過瀏覽器開啟 GitHub,GitHub 網址如下
       https://github.com/

☆ 1.2  登入 GitHub 


Step 2. 建立 GitHub Pages

☆ 2.1   點選上方的【 Repositories 】頁籤

☆ 2.2   點選要建立 GitHub Pages 的 Repository

        ㊟ 本範例以【 Project 】 的 Repository 說明之

☆ 2.3   點選右上角【 Settings 】頁籤

☆ 2.4   點選【 GitHub Pages 】區域中的【 Source 】下拉選單為【 master branch 】
  • 【 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
List of blogs
ALL RIGHTS RESERVED. COPYRIGHT © 2018. Designed and Coded by Makee.io