GitHub免費搭建個人網站
學習前端的人應該知道，開始學習前端時，心裡想的肯定是我一定要給自己做一個的非常棒的網站，學完之後網站做好了，但是要怎麼上線呢？？？
作為一個前端，擁有有自己的個人網站，算是邁出了前端道路的第一步！
本文目的
通過 GitHub Pages 免費快速的搭建個人網站，文章隨長，其實非常簡單，寫的詳細是為了能夠讓多數人都能夠看得懂
建站常識
首先了解常識，建站三部曲：
- 網站專案
- 伺服器
- 域名
簡單來說，就是我們要有一個域名，然後繫結伺服器，再把網站上傳到伺服器上，這樣就可以通過域名訪問我們的網站了
網站專案就是你寫的網站檔案，這個如果不會的話請去學習前端 w3school傳送門
伺服器就是網路中為使用者提供服務的專用裝置。分為訪問、檔案、資料庫、通訊等不同功能的伺服器。那麼要怎樣擁有一個伺服器呢，(用錢就好了！！！)，正規途徑是在網上買一個伺服器，看圖
fuwuqi1.png
剛開始玩的話買一個空間小的相對便宜的就行，當然有錢請隨意！！！
域名就是訪問網站的網址，怎樣獲取域名，沒錯還是用錢，看圖
yuming1.png
我的域名是在阿里雲註冊的，域名也是有區別的，字尾不一，長短不一，相對價錢就不一，如我的域名：
歡迎訪問啊！不要問為什麼兩個都是 .top 的字尾，因為 .top 的域名最貴了，我最有錢，我最任性
域名註冊好之後首先要進行實名認證，然後域名解析、繫結伺服器，最後把網站上傳伺服器，進行網站備案，靜候備案成功就可以了（ 注 ：國內伺服器需要備案，國外或香港伺服器不用備案，但是相比國內伺服器訪問速度慢點，因為距離遠嘛！）
這是一個網站上線的基本流程，當然以上不是本文重點，這些只是一些必備的常識，重點在下面
GitHub Pages建站
什麼是GitHub Pages？
我就不照抄官方文件了，想了解請走傳送門
官方文件比較高大上，簡單來說GitHub Pages就是一個伺服器，但它是免費的！免費的！免費的！重要的事說三遍！它能提供給我們1G空間的儲存，讓你放東西，然後還可以請求到
當然GitHub Pages還有一些其他的東西，不過我們的宗旨是建站，其他不用瞭解
重點來了：
登入 GitHub.com 官網(全英的介面，英語不好的朋友請用谷歌翻譯！)
github.PNG
登入後點擊右上角的加號，進入 new repository 選項新建一個儲存庫,看到以下介面
ku.PNG
首先輸入庫名，倉庫名字為固定格式
你的GitHub名.github.io // 例： // 我的GitHub名字為 isboyjc，所以庫名為 isboyjc.github.io
中間還有個儲存庫說明，可以不寫，儲存庫說明下有一個自動為你選上的 Public 選項，意思是公開此儲存庫（就是別人可以看到並下載你庫中的內容，當然可以不公開，但是要收費7美金/月，這個完全沒有必要，因為IT的精華就是開源！當然土豪請隨意！）
最後點選綠色按鈕提交建立，提交後如下圖
create.PNG
點選 README 進行初始化README ，就是用 markdown 語法編寫此儲存庫的具體說明或者說簡單的展示， markdown 語法十分簡單，我也寫了相應的 markdown 語法教程markdown和Typora--傳送門，有興趣可以瞭解一下，當然這裡不寫也是可以的，直接點選下面綠色按鈕提交即可
anniu.PNG
再然後是如下介面：
end.PNG
上面圖片紅色框中依次翻譯為：建立新檔案、上傳檔案、查詢檔案、克隆或下載
點選 Upload files 上傳檔案
endd.PNG
點選 choose your files 選擇檔案上傳，最後綠色按鈕提交( 注： 上傳的檔案為你的網站檔案，預設訪問 index.html 檔案所以你的網站首頁一定要是 index.html ，css、js、img檔案同html檔案一同拖拽進去即可，網速慢的話上傳速度較慢請耐心等待，上傳失敗請重新上傳)
這時神奇的一幕就來了，如果你的操作沒錯，這時你就可以在瀏覽器輸入 你的GitHub名.github.io 訪問你的網站了（ 注： 如果你的儲存庫下沒有 index.html檔案 ，訪問時會自動顯示你的 README.md 文件）！！！如下：
這個名字有點長，我想通過自己購買的域名訪問怎麼辦呢？
接著往下看
GitHub Pages域名繫結
首先是域名解析
進入你的域名控制檯，我的域名是阿里雲註冊的，所以本文以阿里云為例，如下圖
con1.PNG
點選解析進入解析新增解析，如下圖
jiexi.PNG
記錄型別
記錄型別我們選擇 CNAME ，別名記錄，就是把一個域名完完全全設定為另外一個域名的別名
主機記錄
主機記錄就是域名字首，常見用法有：
www：解析後的域名為www.aliyun.com @：直接解析主域名 aliyun.com *：泛解析，匹配其他所有域名 *.aliyun.com mail：將域名解析為mail.aliyun.com，通常用於解析郵箱伺服器 二級域名：如：abc.aliyun.com，填寫abc 手機網站：如：m.aliyun.com，填寫m 顯性URL：不支援泛解析（泛解析：將所有子域名解析到同一地址）
舉個例紙，我購買的域名是 isboyjc.top 我添加了兩個域名解析，一個主機記錄是 @ ，一個主機記錄是 www ，意思是讓我的網站能夠分別通過 isboyjc.top 和 www.isboyjc.top 訪問到
解析路線
如果只有一個IP地址或CNAME域名，請務必選擇【預設】 預設：必填！未匹配到智慧解析線路時，返回【預設】線路設定結果 境外：向除中國大陸以外的其他國家和地區，返回設定的記錄值 搜尋引擎：向搜尋引擎爬蟲的DNS，返回設定的記錄值
記錄值
因為我們使用的是 GitHub Pages 伺服器，所以記錄值填寫為之前的倉庫名 你的GitHub名字.github.io ，如果是你自己購買的伺服器，解析時記錄值應該填寫為你的伺服器主機地址
TTL
TTL指的是域名解析的生命週期，簡單來說它表示DNS伺服器解析域名時記錄在DNS伺服器上的快取時間
什麼意思呢，來點題外話，先說下網站的訪問流程，你的網站檔案儲存在資料伺服器上，它會有一個IP地址，就像門牌號一樣，我們在輸入域名訪問網站時，資料伺服器是不認識你這個域名的，它只認識IP，你的域名會通過DNS伺服器解析成IP值，通過這個門牌號(IP值)向資料伺服器查詢你的網站資料並給你返回到瀏覽器上
訪問網站時，不會每次都到DNS伺服器域名解析，而是第一次訪問時才到DNS伺服器進行解析，然後解析的結果會快取到當地的遞迴DNS伺服器(快取伺服器)上，當地的第二個使用者訪問網站時，遞迴伺服器會直接返回解析結果，而不會再向DNS伺服器請求解析，那多久之後遞迴伺服器才會更新這個解析結果呢？這就是TTL來決定的
如果增大TTL值，可以節約域名解析時間，給網站訪問加速 ，TTL值大多都是以秒為單位的，很多的預設值都是3600，也就是預設快取1小時，這個值有點小了，難道會有人一個小時就改一次域名記錄嗎
如果減小TTL值，可以減少更換空間時的不可訪問時間 ，如果TTL值大了，更換新的域名記錄時因為TTL快取的問題，結果可能是有的人可能訪問到了新伺服器，有的人訪問走快取會訪問到了舊的伺服器
那麼TTL值多少才好呢？
總的來說，你要訪問速度，TTL值就大一點，如果你近期想更換伺服器或IP，為了更換後能儘量解析到新的IP上，TTL值就小一點，說的有點多了，好了，跳過這個話題，回到主題，本文介紹的是個人建站，一般個人網站建議設定TTL值為600，也就是10分鐘是剛好的！
上面的東西弄完之後只剩最後一步啦！！！
在GitHub倉庫頁新增CNAME檔案
cname.PNG
還是上傳檔案的這個頁面，點選 Create new file 建立一個新檔案，檔名為 CNAME ，注意是大寫，檔案內容寫你解析的域名，例：
isboyjc.top
如果你還解析了 www 的域名,那麼你就在檔案中寫兩個域名，例：
isboyjc.top www.isboyjc.top
然後點選提交
最後，在瀏覽器上輸入你的域名訪問一下吧！！！
累死我了，終於寫完了！！！
本文僅是我自己的看法，如有錯誤，還請指出，不喜勿噴！
如果對您有用，請點選連結關注鼓勵下！謝謝
原創文章，轉載請註明出處！
投訴建議郵箱： [email protected]
GitHub原始碼地址: https://github.com/isboyjc