學(xué)習(xí)前端的人應(yīng)該知道弱判，開(kāi)始學(xué)習(xí)前端時(shí)襟沮，心里想的肯定是我一定要給自己做一個(gè)的非常棒的網(wǎng)站，學(xué)完之后網(wǎng)站做好了昌腰，但是要怎么上線(xiàn)呢开伏？？遭商？
作為一個(gè)前端固灵，擁有有自己的個(gè)人網(wǎng)站，算是邁出了前端道路的第一步劫流！
本文目的
通過(guò)GitHub Pages免費(fèi)快速的搭建個(gè)人網(wǎng)站巫玻，文章隨長(zhǎng)，其實(shí)非常簡(jiǎn)單祠汇，寫(xiě)的詳細(xì)是為了能夠讓多數(shù)人都能夠看得懂
建站常識(shí)
首先了解常識(shí)大审，建站三部曲：
- 網(wǎng)站項(xiàng)目
- 服務(wù)器
- 域名
簡(jiǎn)單來(lái)說(shuō)，就是我們要有一個(gè)域名座哩，然后綁定服務(wù)器徒扶，再把網(wǎng)站上傳到服務(wù)器上，這樣就可以通過(guò)域名訪問(wèn)我們的網(wǎng)站了
網(wǎng)站項(xiàng)目就是你寫(xiě)的網(wǎng)站文件根穷，這個(gè)如果不會(huì)的話(huà)請(qǐng)去學(xué)習(xí)前端 w3school傳送門(mén)
服務(wù)器就是網(wǎng)絡(luò)中為用戶(hù)提供服務(wù)的專(zhuān)用設(shè)備姜骡。分為訪問(wèn)、文件屿良、數(shù)據(jù)庫(kù)圈澈、通信等不同功能的服務(wù)器。那么要怎樣擁有一個(gè)服務(wù)器呢尘惧，(用錢(qián)就好了？嫡弧！！)啥么，正規(guī)途徑是在網(wǎng)上買(mǎi)一個(gè)服務(wù)器登舞，看圖
剛開(kāi)始玩的話(huà)買(mǎi)一個(gè)空間小的相對(duì)便宜的就行，當(dāng)然有錢(qián)請(qǐng)隨意Ｐ佟２っ搿！
域名就是訪問(wèn)網(wǎng)站的網(wǎng)址氯迂，怎樣獲取域名践叠，沒(méi)錯(cuò)還是用錢(qián)，看圖
我的域名是在阿里云注冊(cè)的嚼蚀，域名也是有區(qū)別的禁灼，后綴不一，長(zhǎng)短不一轿曙，相對(duì)價(jià)錢(qián)就不一弄捕，如我的域名：
歡迎訪問(wèn)啊拳芙！不要問(wèn)為什么兩個(gè)都是.top的后綴察藐，因?yàn)?code>.top的域名最貴了皮璧，我最有錢(qián)舟扎，我最任性
域名注冊(cè)好之后首先要進(jìn)行實(shí)名認(rèn)證，然后域名解析悴务、綁定服務(wù)器睹限，最后把網(wǎng)站上傳服務(wù)器，進(jìn)行網(wǎng)站備案讯檐，靜候備案成功就可以了（注：國(guó)內(nèi)服務(wù)器需要備案羡疗，國(guó)外或香港服務(wù)器不用備案，但是相比國(guó)內(nèi)服務(wù)器訪問(wèn)速度慢點(diǎn)别洪，因?yàn)榫嚯x遠(yuǎn)嘛＿逗蕖）
這是一個(gè)網(wǎng)站上線(xiàn)的基本流程，當(dāng)然以上不是本文重點(diǎn)挖垛，這些只是一些必備的常識(shí)痒钝，重點(diǎn)在下面
GitHub Pages建站
什么是GitHub Pages？
我就不照抄官方文檔了痢毒，想了解請(qǐng)走傳送門(mén)
官方文檔比較高大上送矩，簡(jiǎn)單來(lái)說(shuō)GitHub Pages就是一個(gè)服務(wù)器，但它是免費(fèi)的哪替！免費(fèi)的栋荸！免費(fèi)的！重要的事說(shuō)三遍！它能提供給我們1G空間的存儲(chǔ)晌块，讓你放東西爱沟，然后還可以請(qǐng)求到
當(dāng)然GitHub Pages還有一些其他的東西，不過(guò)我們的宗旨是建站摸袁，其他不用了解
重點(diǎn)來(lái)了：
登錄GitHub.com官網(wǎng)(全英的界面钥顽，英語(yǔ)不好的朋友請(qǐng)用谷歌翻譯！)
登錄后點(diǎn)擊右上角的加號(hào)靠汁，進(jìn)入new repository選項(xiàng)新建一個(gè)儲(chǔ)存庫(kù),看到以下界面
首先輸入庫(kù)名蜂大，倉(cāng)庫(kù)名字為固定格式
你的GitHub名.github.io
// 例：
// 我的GitHub名字為 isboyjc，所以庫(kù)名為 isboyjc.github.io
中間還有個(gè)儲(chǔ)存庫(kù)說(shuō)明蝶怔，可以不寫(xiě)奶浦，儲(chǔ)存庫(kù)說(shuō)明下有一個(gè)自動(dòng)為你選上的Public選項(xiàng)，意思是公開(kāi)此儲(chǔ)存庫(kù)（就是別人可以看到并下載你庫(kù)中的內(nèi)容踢星，當(dāng)然可以不公開(kāi)澳叉，但是要收費(fèi)7美金/月，這個(gè)完全沒(méi)有必要沐悦，因?yàn)镮T的精華就是開(kāi)源成洗！當(dāng)然土豪請(qǐng)隨意！）
最后點(diǎn)擊綠色按鈕提交創(chuàng)建藏否，提交后如下圖
點(diǎn)擊README進(jìn)行初始化README 瓶殃，就是用markdown語(yǔ)法編寫(xiě)此儲(chǔ)存庫(kù)的具體說(shuō)明或者說(shuō)簡(jiǎn)單的展示，markdown語(yǔ)法十分簡(jiǎn)單副签，我也寫(xiě)了相應(yīng)的markdown語(yǔ)法教程markdown和Typora--傳送門(mén)遥椿，有興趣可以了解一下，當(dāng)然這里不寫(xiě)也是可以的淆储，直接點(diǎn)擊下面綠色按鈕提交即可
再然后是如下界面：
上面圖片紅色框中依次翻譯為：創(chuàng)建新文件冠场、上傳文件、查找文件本砰、克隆或下載
點(diǎn)擊Upload files上傳文件
點(diǎn)擊choose your files選擇文件上傳碴裙，最后綠色按鈕提交(注：上傳的文件為你的網(wǎng)站文件，默認(rèn)訪問(wèn)index.html文件所以你的網(wǎng)站首頁(yè)一定要是index.html点额，css舔株、js、img文件同html文件一同拖拽進(jìn)去即可咖楣，網(wǎng)速慢的話(huà)上傳速度較慢請(qǐng)耐心等待督笆，上傳失敗請(qǐng)重新上傳)
這時(shí)神奇的一幕就來(lái)了，如果你的操作沒(méi)錯(cuò)诱贿，這時(shí)你就可以在瀏覽器輸入你的GitHub名.github.io訪問(wèn)你的網(wǎng)站了（注：如果你的儲(chǔ)存庫(kù)下沒(méi)有index.html文件娃肿，訪問(wèn)時(shí)會(huì)自動(dòng)顯示你的README.md文檔）９径小！料扰！如下：
這個(gè)名字有點(diǎn)長(zhǎng)凭豪，我想通過(guò)自己購(gòu)買(mǎi)的域名訪問(wèn)怎么辦呢？
接著往下看
GitHub Pages域名綁定
首先是域名解析
進(jìn)入你的域名控制臺(tái)晒杈，我的域名是阿里云注冊(cè)的嫂伞，所以本文以阿里云為例，如下圖
點(diǎn)擊解析進(jìn)入解析添加解析拯钻，如下圖
記錄類(lèi)型
記錄類(lèi)型我們選擇CNAME帖努，別名記錄，就是把一個(gè)域名完完全全設(shè)置為另外一個(gè)域名的別名
主機(jī)記錄
主機(jī)記錄就是域名前綴粪般，常見(jiàn)用法有：
www：解析后的域名為www.aliyun.com
@：直接解析主域名 aliyun.com
*：泛解析拼余，匹配其他所有域名 *.aliyun.com
mail：將域名解析為mail.aliyun.com，通常用于解析郵箱服務(wù)器
二級(jí)域名：如：abc.aliyun.com亩歹，填寫(xiě)abc
手機(jī)網(wǎng)站：如：m.aliyun.com匙监，填寫(xiě)m
顯性URL：不支持泛解析（泛解析：將所有子域名解析到同一地址）
舉個(gè)例紙，我購(gòu)買(mǎi)的域名是isboyjc.top我添加了兩個(gè)域名解析小作，一個(gè)主機(jī)記錄是@亭姥，一個(gè)主機(jī)記錄是www，意思是讓我的網(wǎng)站能夠分別通過(guò)isboyjc.top和www.isboyjc.top訪問(wèn)到
解析路線(xiàn)
如果只有一個(gè)IP地址或CNAME域名顾稀，請(qǐng)務(wù)必選擇【默認(rèn)】
默認(rèn)：必填达罗！未匹配到智能解析線(xiàn)路時(shí)，返回【默認(rèn)】線(xiàn)路設(shè)置結(jié)果
境外：向除中國(guó)大陸以外的其他國(guó)家和地區(qū)础拨，返回設(shè)置的記錄值
搜索引擎：向搜索引擎爬蟲(chóng)的DNS氮块，返回設(shè)置的記錄值
記錄值
因?yàn)槲覀兪褂玫氖?code>GitHub Pages服務(wù)器绍载，所以記錄值填寫(xiě)為之前的倉(cāng)庫(kù)名你的GitHub名字.github.io诡宗，如果是你自己購(gòu)買(mǎi)的服務(wù)器，解析時(shí)記錄值應(yīng)該填寫(xiě)為你的服務(wù)器主機(jī)地址
TTL
TTL指的是域名解析的生命周期击儡，簡(jiǎn)單來(lái)說(shuō)它表示DNS服務(wù)器解析域名時(shí)記錄在DNS服務(wù)器上的緩存時(shí)間
什么意思呢塔沃，來(lái)點(diǎn)題外話(huà)，先說(shuō)下網(wǎng)站的訪問(wèn)流程阳谍，你的網(wǎng)站文件存儲(chǔ)在數(shù)據(jù)服務(wù)器上蛀柴，它會(huì)有一個(gè)IP地址，就像門(mén)牌號(hào)一樣矫夯，我們?cè)谳斎胗蛎L問(wèn)網(wǎng)站時(shí)鸽疾，數(shù)據(jù)服務(wù)器是不認(rèn)識(shí)你這個(gè)域名的，它只認(rèn)識(shí)IP训貌，你的域名會(huì)通過(guò)DNS服務(wù)器解析成IP值制肮，通過(guò)這個(gè)門(mén)牌號(hào)(IP值)向數(shù)據(jù)服務(wù)器查找你的網(wǎng)站數(shù)據(jù)并給你返回到瀏覽器上
訪問(wèn)網(wǎng)站時(shí)冒窍，不會(huì)每次都到DNS服務(wù)器域名解析，而是第一次訪問(wèn)時(shí)才到DNS服務(wù)器進(jìn)行解析豺鼻，然后解析的結(jié)果會(huì)緩存到當(dāng)?shù)氐倪f歸DNS服務(wù)器(緩存服務(wù)器)上综液，當(dāng)?shù)氐牡诙€(gè)用戶(hù)訪問(wèn)網(wǎng)站時(shí)，遞歸服務(wù)器會(huì)直接返回解析結(jié)果儒飒，而不會(huì)再向DNS服務(wù)器請(qǐng)求解析谬莹，那多久之后遞歸服務(wù)器才會(huì)更新這個(gè)解析結(jié)果呢？這就是TTL來(lái)決定的
如果增大TTL值桩了，可以節(jié)約域名解析時(shí)間附帽，給網(wǎng)站訪問(wèn)加速 ，TTL值大多都是以秒為單位的井誉，很多的默認(rèn)值都是3600士葫，也就是默認(rèn)緩存1小時(shí)，這個(gè)值有點(diǎn)小了送悔，難道會(huì)有人一個(gè)小時(shí)就改一次域名記錄嗎
如果減小TTL值慢显，可以減少更換空間時(shí)的不可訪問(wèn)時(shí)間 ，如果TTL值大了欠啤，更換新的域名記錄時(shí)因?yàn)門(mén)TL緩存的問(wèn)題荚藻，結(jié)果可能是有的人可能訪問(wèn)到了新服務(wù)器，有的人訪問(wèn)走緩存會(huì)訪問(wèn)到了舊的服務(wù)器
那么TTL值多少才好呢洁段？
總的來(lái)說(shuō)应狱，你要訪問(wèn)速度，TTL值就大一點(diǎn)祠丝，如果你近期想更換服務(wù)器或IP疾呻，為了更換后能盡量解析到新的IP上，TTL值就小一點(diǎn)写半，說(shuō)的有點(diǎn)多了岸蜗，好了，跳過(guò)這個(gè)話(huà)題叠蝇，回到主題璃岳，本文介紹的是個(gè)人建站，一般個(gè)人網(wǎng)站建議設(shè)置TTL值為600悔捶，也就是10分鐘是剛好的铃慷！
上面的東西弄完之后只剩最后一步啦！Ｍ筛谩犁柜！
在GitHub倉(cāng)庫(kù)頁(yè)添加CNAME文件
還是上傳文件的這個(gè)頁(yè)面，點(diǎn)擊Create new file創(chuàng)建一個(gè)新文件堂淡，文件名為CNAME馋缅，注意是大寫(xiě)坛怪，文件內(nèi)容寫(xiě)你解析的域名，例：
isboyjc.top
如果你還解析了www的域名,那么你就在文件中寫(xiě)兩個(gè)域名股囊，例：
isboyjc.top
www.isboyjc.top
然后點(diǎn)擊提交
最后袜匿，在瀏覽器上輸入你的域名訪問(wèn)一下吧！Ｖ烧睢居灯！
累死我了，終于寫(xiě)完了Ｄ诠贰９窒印！
本文僅是我自己的看法柳沙，如有錯(cuò)誤岩灭，還請(qǐng)指出，不喜勿噴赂鲤！
如果對(duì)您有用噪径，請(qǐng)點(diǎn)擊鏈接關(guān)注鼓勵(lì)下！謝謝
原創(chuàng)文章数初，轉(zhuǎn)載請(qǐng)注明出處找爱！
投訴建議郵箱：214930661@qq.com
GitHub源碼地址:https://github.com/isboyjc
