GitHub免費搭建個人網站

學習前端的人應該知道，開始學習前端時，心裡想的肯定是我一定要給自己做一個的非常棒的網站，學完之後網站做好了，但是要怎麼上線呢？？？

作為一個前端，擁有有自己的個人網站，算是邁出了前端道路的第一步！

本文目的

通過GitHub Pages免費快速的搭建個人網站，文章隨長，其實非常簡單，寫的詳細是為了能夠讓多數人都能夠看得懂

目錄

建站常識

首先了解常識，建站三部曲：

• 網站專案
• 伺服器
• 域名

簡單來說，就是我們要有一個域名，然後繫結伺服器，再把網站上傳到伺服器上，這樣就可以通過域名訪問我們的網站了

網站專案就是你寫的網站檔案，這個如果不會的話請去學習前端 w3school傳送門

伺服器就是網路中為使用者提供服務的專用裝置。分為訪問、檔案、資料庫、通訊等不同功能的伺服器。那麼要怎樣擁有一個伺服器呢，(用錢就好了！！！)，正規途徑是在網上買一個伺服器，看圖

剛開始玩的話買一個空間小的相對便宜的就行，當然有錢請隨意！！！

域名就是訪問網站的網址，怎樣獲取域名，沒錯還是用錢，看圖

我的域名是在阿里雲註冊的，域名也是有區別的，字尾不一，長短不一，相對價錢就不一，如我的域名：

ljcljc.top

isboyjc.top

歡迎訪問啊！不要問為什麼兩個都是.top

域名註冊好之後首先要進行實名認證，然後域名解析、繫結伺服器，最後把網站上傳伺服器，進行網站備案，靜候備案成功就可以了（注：國內伺服器需要備案，國外或香港伺服器不用備案，但是相比國內伺服器訪問速度慢點，因為距離遠嘛！）

這是一個網站上線的基本流程，當然以上不是本文重點，這些只是一些必備的常識，重點在下面

GitHub Pages建站

什麼是GitHub Pages？

我就不照抄官方文件了，想了解請走傳送門

GitHub Pages傳送門

官方文件比較高大上，簡單來說GitHub Pages就是一個伺服器，但它是免費的！免費的！免費的！重要的事說三遍！它能提供給我們1G空間的儲存，讓你放東西，然後還可以請求到

當然GitHub Pages還有一些其他的東西，不過我們的宗旨是建站，其他不用瞭解

重點來了：

登入GitHub.com官網(全英的介面，英語不好的朋友請用谷歌翻譯！)

登入後點擊右上角的加號，進入new repository選項新建一個儲存庫,看到以下介面

首先輸入庫名，倉庫名字為固定格式

你的GitHub名.github.io

// 例：
// 我的GitHub名字為 isboyjc，所以庫名為 isboyjc.github.io

中間還有個儲存庫說明，可以不寫，儲存庫說明下有一個自動為你選上的Public選項，意思是公開此儲存庫（就是別人可以看到並下載你庫中的內容，當然可以不公開，但是要收費7美金/月，這個完全沒有必要，因為IT的精華就是開源！當然土豪請隨意！）

最後點選綠色按鈕提交建立，提交後如下圖

點選README進行初始化README ，就是用markdown語法編寫此儲存庫的具體說明或者說簡單的展示，markdown語法十分簡單，我也寫了相應的markdown語法教程markdown和Typora–傳送門，有興趣可以瞭解一下，當然這裡不寫也是可以的，直接點選下面綠色按鈕提交即可

再然後是如下介面：

上面圖片紅色框中依次翻譯為：建立新檔案、上傳檔案、查詢檔案、克隆或下載

點選Upload files上傳檔案

點選choose your files選擇檔案上傳，最後綠色按鈕提交(**注：**上傳的檔案為你的網站檔案，預設訪問index.html檔案所以你的網站首頁一定要是index.html，css、js、img檔案同html檔案一同拖拽進去即可，網速慢的話上傳速度較慢請耐心等待，上傳失敗請重新上傳)

這時神奇的一幕就來了，如果你的操作沒錯，這時你就可以在瀏覽器輸入你的GitHub名.github.io訪問你的網站了（**注：**如果你的儲存庫下沒有index.html檔案，訪問時會自動顯示你的README.md文件）！！！如下：

https://isboyjc.github.io

這個名字有點長，我想通過自己購買的域名訪問怎麼辦呢？

接著往下看

GitHub Pages域名繫結

首先是域名解析

進入你的域名控制檯，我的域名是阿里雲註冊的，所以本文以阿里云為例，如下圖

點選解析進入解析新增解析，如下圖

記錄型別

記錄型別我們選擇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檔案

還是上傳檔案的這個頁面，點選Create new file建立一個新檔案，檔名為CNAME，注意是大寫，檔案內容寫你解析的域名，例：

isboyjc.top

如果你還解析了www的域名,那麼你就在檔案中寫兩個域名，例：

isboyjc.top
www.isboyjc.top

然後點選提交

最後，在瀏覽器上輸入你的域名訪問一下吧！！！

累死我了，終於寫完了！！！

本文僅是我自己的看法，如有錯誤，還請指出，不喜勿噴！

如果對您有用，請點選關注鼓勵下！謝謝

原創文章，轉載請註明出處！

投訴建議郵箱：[email protected]

原文請點選連結-GitHub:https://github.com/isboyjc