---
title: 不用懂git也能用GitHub Pages架設靜態網站並綁定網域
tags: 靜態網站, GitHub
---
# 不用懂git也能用GitHub Pages架設靜態網站並綁定網域
作者：林罡北
Dec 26, 2017·10 min read

 用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免費網域申請教學](https://medium.com/@NorthBei/nctu-domain%E5%85%8D%E8%B2%BB%E7%B6%B2%E5%9F%9F%E7%94%B3%E8%AB%8B%E6%95%99%E5%AD%B8-b629fdaaad90) ，文章內Step1~3為申請的流程。

:::info
NCTU Domain免費網域申請教學
這幾天才知道，原來交通大學(NCTU)有提供免費的網域服務 只要擁有NCTU Domain帳號的人 每個人最多可以申請3個以ntcu.me為主網域的子網域 雖然是子網域，網址比較長一些 不過由於網址滿好記的，我就還是申請個來用看看啦
:::
 或是也可以到這邊辦個帳號，就能申請免費的網域
[Freenom](http://www.freenom.com/zu/index.html?lang=zu)

## Step4.複製repository到電腦中
 這個步驟開始邊會使用到GitHub for Desktop，如果沒有安裝過的人，可以從[這邊](https://desktop.github.com/)下載並安裝，否則後面就無法使用軟體來操作，必須使用git指令了。
 接下來你會來到下圖的這個頁面，按照下面圖片中的順序點選按鈕，我們要把這個repository的檔案複製一份到你的電腦裡。
 接著電腦中的Github Desktop會被喚醒，出現類似以下的畫面：
 基本上都使用預設就可以了。Local Path的部分就是repository下載下來之後儲存的位置，可以自己調整，最後再按下右下角的“Clone”按鈕，開始複製一份repository到我們電腦。
 複製完成的repository資料夾內容會如下，擁有3個檔案：
## Step5.設定DNS
 如果用NCTU Domain的人，可以參考這篇文章的Step3，其他的服務應該也是類似的流程，只是介面不太一樣。總之這個步驟就是告訴讓我們申請網域的服務商，這個網域我會用在某一台DNS Server上
設定完之後，理論上需要等待一下，等待時間依照各平台會有所不同(NCTU Domain超快，大概只要30秒)，等待時可以去存取我們申請的網域看看，如果看到網頁出現了，就代表設定成功囉。
## Step6.部署靜態網站
 一切都準備就緒了，剩下只差把我們的網站放到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內的檔案的大小有不同長短的載入時間，載入完成就代表成功將你的檔案同步至GitHub啦，可以開啟或是重新整理一下你的網站，應該就可以看到你做好的網站囉。
## Step7.幫網站加上https
 由於Github Pages的服務是使用http協定，並沒有使用https，也就是沒有替封包進行加密，如果有在靜態網頁中使用其他服務提供的API，而且API又是使用http協定來傳輸的話，封包的內容可能會被其他人看光光～
 為了避免這種情形出現，就需要幫網站加上https啦，不過這部分我還沒實作過XD，先貼參考連結，真的實作成功我再回來補上內容~~

[自訂域名 - 輕鬆擁有 https 綠鎖頭](https://blog.dmoon.tw/github-pages-custom-domain/)

## Reference
[How to Set up GoDaddy Domain with GitHub Pages](https://hackernoon.com/how-to-set-up-godaddy-domain-with-github-pages-a9300366c7b)

[How to Configure GoDaddy Custom Domains with GitHub Pages](https://medium.com/@supriyakankure/how-to-add-a-custom-domain-to-your-github-page-with-godaddy-84495781143e)

[jekyll+Github架站Domain網址客製化](http://mis101bird.js.org/domain/)

[GitHub Pages 也可拿來架設HTML靜態網站，與綁定網域名稱](https://www.minwt.com/website/server/18522.html)

[GitHub Pages使用自訂網域名稱](https://xiwan.io/archive/github-pages-use-custom-domain-name.html)

[在 GitHub 使用 A 記錄網域名稱的方法](https://blog.ccjeng.com/2016/03/How-To-Config-A-Record-Domain-Name-In-GitHub.html)

[設定自訂域名到 Github Pages - LeafHub](http://leafwind.tw/20160219-set-custom-domain-for-github-pages.html)