如何用github搭建自己的個人網站

作為一個前端小白,昨天一時興起在阿里雲上買了個域名,準備搭一個自己的個人網站。可苦逼的學生狗沒有錢租伺服器,而正好github有提供搭建個人網站的服務,索性就用github來搭了。可在網晚上搜了很多攻略,依葫蘆畫瓢不是這裡出問題就是那裡不行,痛定思痛,斯決定先弄清原理再開始搭,歷盡千辛萬苦海枯石爛最後終於搭成了。現在將個人經驗分享給大家,希望對大家有幫助。


總體思路

要在github上搭建個人網站我們可以分兩步走,

  1. 在github上搭建網站 即username.github.io(username是你的github使用者名稱)
  2. 把自己的域名(如zhangsan.com)繫結到username.github.io上

完成這兩步就可以通過zhangsan.com訪問你在github上搭建的網站了


首先在github上搭建網站

要使用github,首先你得有個github賬號,沒有的趕緊去注一個,超級好用的。好了,現在預設你已經有了github賬號且使用者名稱是username。
首先我們要新建一個repository,將Repository name那一欄設定為username.github.io,
這裡寫圖片描述

這是github分配給每個使用者的github page地址,要使用它只用新建一個名字為username.github.io的倉庫就行了,倉庫裡面存放你的個人主頁程式碼。倉庫建好後,應該是這樣的。
這裡寫圖片描述

直接點選README那幾個藍色字的任意一個,進入編輯頁面,將檔名設為index.html,內容隨意寫
這裡寫圖片描述
點選儲存,回到倉庫我們發現裡面多了個index.html檔案,這就是你的主頁檔案。
現在我們在github上的主頁就搭建完成了,只要在位址列輸入username.github.io就可以訪問你的主頁了(前提是你的倉庫裡有index.html或類似的檔案,沒有就新建一個檔案,裡面隨便寫點什麼,存為index.html就行了)。


將username.github.io與自己的域名關聯

其實對於一般的需求,把username.github.io當自己的主頁也是可以的。但我們如果有自己的域名的話,完全可以直接通過自己的域名來訪問username.github.io,這才叫真–個人主頁嘛。
將自己的域名與github上的主頁相關聯也得分兩步,

  1. 在github端將域名繫結到username.github.io
  2. 在域名端將DNS指向username.github.io

    首先我們操作github端,
    第一步:進入我們剛剛新建的倉庫,點選setting進入設定介面
    這裡寫圖片描述

    第二步:進入設定介面後找到github pages欄
    這裡寫圖片描述

    第三步:將custom domain設定為自己的域名如zhangsan.com點選儲存

    至此我們github端的設定就完成了,另外,上圖中的Theme chooser欄可以選擇網站的模板,不會寫網站同學有福了!

    完成後我們回到倉庫,發現裡面多了一個叫CNAME的檔案,
    這裡寫圖片描述
    檔案的內容就是我們剛才繫結的域名 zhangsan.com ,其實我們也可以完全不經過以上三步,直接在倉庫裡新建一個名為CNAME(注意沒有字尾)的檔案,將我們的域名寫在裡面就行了,效果是一樣的。

    github端的工作完成後,只是訪問username.github.io時會重定向到zhangsan.com,但目前我們的zhangsan.com還是沒有內容的,因此我們需要在域名端將zhangsan.com通過dns解析到user.github.io,也就是我們在github上的空間中來。

    以阿里云為例:
    第一步:進入域名解析設定介面
    這裡寫圖片描述

    第二步: 新增解析
    這裡寫圖片描述

    由於我們這裡是將域名解析到另外一個域名,因此記錄型別欄我們選擇CNAME(別名解析),主機記錄欄由於我們用的是二級域名zhangsan.com 因此選擇@(空,如果出現錯誤提示,刪掉其他這一欄為@的解析記錄即可),如果我們要用三級域名www.zhangsan.com就填寫www,依此類推。記錄值欄填寫我們要解析到的域名,這裡寫上username.github.io就可以了。點選儲存,等個幾分鐘DNS就會生效了。

    至此我們的域名和github主頁的雙向繫結就完成了,只需要在瀏覽器中訪問zhangsan.com就可以看到我們在github上放置的個人主頁了。

    另外我們還可以再新建一條解析記錄,將主機記錄欄選為www其餘欄與上面一樣,這樣zhangsan.com和www.zhangsan.com都會解析到username.github.io 。由於github自帶的重定向功能,當username繫結為zhangsan.com時,來自www.zhangsan.com的解析也會被重定向到zhangsan.com上,
    這裡寫圖片描述
    這樣我們在瀏覽器位址列輸入這兩個網址時都會進入zhangsan.com。當然我們也可以在github端繫結www.zhangsan.com,這樣就和百度一樣不論輸不輸入www都會進入www.baidu.com一樣了,是不是很酷!


在github上搭建個人網站有幾個好處:

  1. 不用花錢,哈哈哈,真是我等窮人的福利
  2. 由於伺服器在國外,不用備案,懶人必備呀
  3. 程式碼維護方便,用過的github人都知道

缺點就是空間較小,只能支援較為簡單的服務,但作為個人小站來講已經足矣。