龍之家族

用GitHub Pages架設靜態網站並綁定網域
這個主題其實大家Google就可以發現很多篇教學文
不過有許多同主題的教學都需要使用到git指令
或是用到一些git的基本知識，讓不太理解git的人看不懂

或是有些教學比較舊、需要比較多的步驟
這篇文章的目的就是教大家用最快的方式
在Github上架設一個靜態網站，並且替網站綁定一個網域
讓每次存取的網址不再出現github.io/….

雖然標題直接寫了不用懂git
不過git在版本控制的領域中是一個非常強大且好用的工具
還是大家去推薦去學一下
這篇文章只能教大家快速部署靜態網站上Github
網站後續維護與更新的部分，還是要靠git來好好管理自己的程式碼啊

開始吧！Let’s Go

Step1.建立一個新的repository

在Github開一個新的repository
然後用你喜歡的方式命名repository
我這邊要上傳我很久以前做的個人履歷
用來紀念一下寫的code多爛XD
所以用”Self”來命名

其他設定都用預設就可以哩
然後就按下“Create repository”
建立一個新的repository囉

Step2.用預設模板來建立靜態網頁

接下來我們回到github的網頁，切換到Settings頁面
往下滑到GitHub Pages的區塊

 

按下圖片左下角的“Choose a theme”
讓github幫我們先建立一個由幾種模板產生的靜態網站

接著會跳到下面這個頁面，讓你能夠選擇你Github Pages的主題
這邊隨便選一個就可以了
預設其實就OK，反正之後會變成自己的網頁

然後按下右邊的“Select theme”按鈕

這時候你應該已經可以用
https://{你的帳號名稱}.github.io/{你的repository名稱}/
來存取你剛剛選擇的模板所建立的網站

像是我的話，網址是
https://northbei.github.io/Self/

Step3.綁定申請好的網域

接著回到repository的Settings頁面
可以看到Gihub Pages多了一些設定欄位

在custom domain的欄位中，填入你為你網站申請的domain Name
然後按下右邊的”Save”

 

如果不知道怎麼樣才能有自己的網域
可以看看我之前寫的
NCTU Domain免費網域申請教學
文章內Step1~3為申請的流程

或是也可以到這邊辦個帳號，就能申請免費的網域

Step4.複製repository到電腦中

這個步驟開始邊會使用到Github for Desktop
如果沒有安裝過的人，可以從這邊下載並安裝
否則後面就無法使用軟體來操作，必須使用git指令了

接下來你會來到下圖的這個頁面
按照下面圖片中的順序點選按鈕
我們要把這個repository的檔案複製一份到你的電腦裡

接著電腦中的Github Desktop會被喚醒
出現類似以下的畫面

基本上都使用預設就可以了
Local Path的部分就是repository下載下來之後儲存的位置
可以自己調整

最後再按下右下角的“Clone”按鈕，開始複製一份repository到我們電腦
複製完成的repository資料夾內容會如下，擁有3個檔案

 

Step5.設定DNS

如果用NCTU Domain的人
可以參考這篇文章的Step3

其他的服務應該也是類似的流程
只是介面不太一樣

總之這個步驟就是告訴讓我們申請網域的服務商
這個網域我會用在某一台DNS Server上

設定完之後
理論上需要等待一下，等待時間依照各平台會有所不同
(NCTU Domain超快，大概只要30秒)
等待時可以去存取我們申請的網域看看
如果看到網頁出現了，就代表設定成功囉

http://northbei.nctu.me/

設定成功啦～

Step5.部署靜態網站

一切都準備就緒了
剩下只差把我們的網站放到Github上代管了！

接下來我們開啟Step3複製成功的repository資料夾
把網站的首頁命名成index.html
跟其他資源檔案一起放進去資料夾內

像是我的資料夾就如下，多了一些網頁載入時會用到的檔案

要命名成index.html的原因是因為
用網址存取網頁時預設會去找資料夾內的index.html檔案當作要載入的頁面
所以這樣命名網址會比較好看~

當然你也可以命名成test.html之類的
不過存取時就要用
http://xx.yy/test.html這樣的網址來存取檔案

接著開啟Github Desktop
會出現類似以下的畫面

然後按照1(紀錄的標題),2(紀錄的內容),3(儲存記錄)的順序進行填寫或是點擊
3的部分儲存完成之後，4的介面會變成這樣

 

看到Push origin的話就按下去吧！
這個動作是將repository資料夾的檔案同步至Github
所以會依照你repository內的檔案的大小有不同時間長短的loading
loading完成就代表成功將你的檔案同步至Github啦

可以開啟或是重新整理一下你的網站
應該就可以看到你做好的網站囉