1. 首頁
  2. »
  3. 網站架設
  4. »
  5. 主機
  6. »
  7. [架站] GitHub Pages 也可拿來架設HTML靜態網站,與綁定網域名稱

[架站] GitHub Pages 也可拿來架設HTML靜態網站,與綁定網域名稱

2017/10/17

梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
  提到GitHub對於許多前端網頁設計師不感陌生,透過GitHub可用來管理專案,以及版本控管,是相當方便的平台,甚至也可將開發好模組,放到GitHub給大家來進行下載,甚至在GitHub中,也可在README.md的頁面中,介紹自己所開發的套件,與要如何使用,甚至當有更新版本時,也可依照更新的日期,來顯示套件的更新狀況,甚至也可將自己專案常用的元件,整理好發佈到GitHub中,當下回有專案要執行時,再把整理好的素材,整包下載回自己的專案中,因此深受許多前端設計師的喜愛。

  而GitHub除了可用來版本控管外,它還有一個相當實用的功能,那就是透過GitHub page就可用來架設HTML的靜態網頁,甚至GitHub page還支援圖片外連,更酷的是還可綁定網域名稱,因此這對於想用來架設個人作品集,或是一頁式銷售頁,都相當的適合,再加上GitHub的開啟速度相當快,同時也相當的穩定,只不過GitHub在操作上,與一般的免空或雲端硬碟有些些不同,但好在有圖形化工具,無需打任何的指令,就可以在GitHub中,架設起HTML的靜態網頁啦!


GitHub
網站名稱:GitHub
網站連結:首頁/註冊頁

GitHub Desktop
軟體名稱:GitHub Desktop
軟體下載:Windows/MAC

Step1
首先,需註冊為GitHub的會員,當註冊完畢,並登入完成後,再點右下的「New repository」鈕,先建立一個專案。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step2
輸入專案的名稱,以及將下方的核許框,勾起來。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step3
當專案建立完畢後,再點上方的「Settings」頁籤。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step4
將頁面向上拉,找到「GitHub Pages」的選項後,點下方的「Choose a theme」鈕。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step5
接著隨便選一個佈景主題。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step6
當建立好後,上方面就會顯示GitHub Pages外部連結,https://帳號+github.io/專案名稱。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step7
由於預設的網址有點長,這時可以從下方Custom domain的輸入框中,輸入要綁定的網址。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step8
接著到DNS中,建立一組CNAME作對應。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step9
到這邊,已建立好靜態頁面的空間了。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step10
接著下載GitHub Desktop桌面程式,雙響開啟再按「Sign In」登入。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step11
輸入GitHub的帳密。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step12
登入好後,再點上選單中的,File / Clone Repository….選項
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step13
接就會看到剛在GitHub建立好的專案,再按下方的「Clone」鈕,將它同步至本機中。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step14
當同步完成後,在本機電腦中,就會看到剛在GitHub中建立的檔案。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step15
這時再把製作好的HTML頁面與檔案,全部丟到這個資料夾中。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step16
這時再回到GitHub Desktop的應用程式後,就會看到剛所複製的檔案,接著再下方輸入該檔案的名稱與描述。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step17
接著再按上方的「Push origin」鈕,這時就會開始,將本機電腦中的資料,同步到GitHub專案中。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step18
完成後,上方也會出現已完成的訊息。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step19
這時再回到GitHub的專案中,就會看到剛所同步完的檔案。
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱
Step20
這時再輸入剛所綁定的網域,就會看到啦!是不是超酷呀!因此無論是要用來架設個人作品集,或是一頁式網頁都相當的合適喔!
梅問題-GitHub page 也可用來架設HTML靜態網頁,以及綁定網域名稱