如何實用github打造部落格專屬域名

阿新 • • 發佈：2019-01-17

一、概述

哈，本篇部落格不屬於Android技術類的文章，但卻有非常高的實用性。如果你心細的話，你會發現現在訪問zhanghongyang.com或者guolin.tech你會發現最終跳轉的是我們的csdn部落格的列表目錄。

有人會說，這個簡單哇，買個域名，設定下域名解析不就好了麼？

這樣是不行的，關鍵在於我的部落格站點是csdn所提供的，歸屬於csdn的blog子域名下，但是在設定域名解析的時候只能填寫ip，如果你ping 我的部落格地址最終得到的ip可能是csdn某臺伺服器的甚至是拿不到的，所以光填寫ip是不行的，不過如果你是自己搭建的伺服器站點就可以簡單設定解析ip就可以了。

ok，但是大多數人可能還我一樣並沒有足夠的精力去維護個人部落格站點，而選擇csdn、簡書、部落格園等平臺編寫部落格。但是這類平臺所提供的url想必是非常長的，例如我的：

一般人太難記住了，所以我希望買一個好記的域名

這樣大家一眼就能記住，一眼不夠兩眼肯定沒問題。

ok，那麼針對我這樣的問題，有什麼好的且免費的方案呢？

這個問題，郭神和我在dota群裡討論過，最終的方案有兩個選擇：

買個伺服器，搭建個服務做頁面跳轉（redirect或者js跳轉）.
利用github提供的github pages

方案1我是不會選的，因為租伺服器這種事情要錢哇；最終選擇了方案二，利用github pages。

很多人可能並不清楚github pages是幹嘛的，官網是：https://pages.github.com/，其實算github提供的一個服務，我們可以免費的再其上面搭建自己的網站，也有很多人利用github pages

作為自己的個人部落格站點。

接下來，我們就看github pages如何使用，以及我是如何利用它做頁面跳轉的。

那麼，通過本文的學習，你也可以利用github pages搭建一個小站點，構建屬於自己的網站，或者使用github pages維護個人部落格都可以。

這裡感謝郭神，該方案雖然一起討論得出，但是對該方案的實施是在我之前的，此外大家可以關注他的部落格。

二、Github Pages的使用

（1）新建倉庫

ok，首先你需要一個github的賬號，立志作為一名優秀的程式設計師，這個賬號是應該有的，如果沒有趕快申請一個。

有了賬號以後，首先點選新建倉庫，如圖：

20160504233503957

然後到達倉庫資訊填寫介面，如圖：

20160504234028998

這裡只要注意一個地方，就是倉庫的名稱，必須是：你的使用者名稱.github.io，例如我的使用者名稱是hongyangAndroid，我填寫的倉庫名稱即為：hongyangAndroid.github.io。

（2）更新內容

有了倉庫以後，你就可以去隨意的更新內容了，如果你對html熟悉，你可以隨便寫個頁面提交上去，比如我寫個簡單的html頁面。

先簡單說一下如果更新github倉庫中的內容：

clone到本地

命令列進入硬碟上任意一個資料夾，然後執行
```
git clone https://github.com/hongyangAndroid/hongyangAndroid.github.io.git
```
- 1
- 2
注意修改為你的倉庫地址，如果你的電腦上並不支援git命令，你可以搜尋git 安裝，先安裝好git並配置好環境。

到達本地之後，我們就可以準備好需要更新進去的頁面了，比如我新建一個index.html內容如下：

<!DOCTYPE html>
<html>
<body>
<h1>這是我使用github pages搭建的個人站點。</h1>
</body>
</html>

完成之後，記得儲存，index.html必須和你clone下來的.git資料夾在同一個目錄，如圖：

20160504234102373

完成之後，就是提交了。

/Users/zhy/github_repository/mine/hongyangAndroid.github.io
git add .
git commit -m "更新index.html，編寫博文測試"
[master c22f3d4] 更新index.html，編寫博文測試
 1 file changed, 6 insertions(+), 1 deletion(-)
git push
Username for 'https://github.com': hongyangAndroid
Password for 'https://[email protected]': 
>zhy$

注意首先命令列進入你的hongyangAndroid.github.io這個目錄，然後依次執行git add . , git commit -m "註釋"，git push，然後輸入你的使用者名稱，密碼即可。

更新成功之後，那就要恭喜你了，你的個人站點搭建成功了。

你肯定又要說，你忽悠誰呢，頂多算你新建了一個倉庫，提交了一個html檔案而已，這裡我要說，No No No，你的個人站點真的搭建好了，你已經可以給你的親朋好友炫耀了，那麼站點總要有個訪問的地址吧，不然怎麼訪問呢？

恩，是的，預設的地址是:

http://hongyangandroid.github.io

例如我在瀏覽器訪問這個地址：

20160504234148374

看到沒有，我們剛才編寫的簡單html檔案已經可以通過特定的url訪問了，恩，你記得修改為你自己的url。

如果你的html、css、js技術足夠好，你完全可以利用這樣的方式搭建一個高逼格且實用的個人站點，當然你也可以在上面搭建你的簡歷，方便列印，不過注意保護個人隱私。

ok，到這裡，我們已經教會大家如何利用github pages去搭建個人站點了，哈，免費的個人站點。如果我大學時候知道這個功能，我至少網頁設計可以多拿10分，恩，那會我得了90分。

至於這個頁面好不好看，看你的才華了；這個頁面能幹什麼，看你的想象了。

ok，經過上面的內容，大家瞭解了利用github搭建個人站點，以及一些簡單git命令的使用，但是我們文章的標題是：如何利用github打造部落格專屬域名，恩，接下來的標題就是專屬域名。

對了，如果你想利用這個做個人部落格，以及有很多方便的工具輔助你完成了，例如hexo等，具體自行搜尋。

三、打造部落格專屬域名

（1）域名購買與解析

ok，首先你要有個域名，那麼就要去申請域名了，這裡我們可以通過萬網申請：https://wanwang.aliyun.com/，查詢你想申請域名，如果可以買，購買就可以了。

購買域名完成，進入萬網的管理控制檯：

20160504234515750

找到你已經購買的域名，點選解析，進入如下頁面：

20160504234645766

然後點選新增解析，ip可以跟我填寫的一致，當然以防發生變化，你可以ping你的url：

例如：

ping www.hongyangandroid.github.io

然後拿到返回的這個IP也可以。

恩，根據上表，選擇一個IP，填寫兩條記錄其實就可以了：

主機記錄www對應www.zhanghongyang.com
主機記錄@對應zhanghongyang.com

ok，設定完成解析之後，是不是直接訪問域名就能跳轉到我們剛才的github頁面呢？

恩，是不能，你去訪問會顯示404.

我們還差一個環節。

（2）CNAME

差什麼呢，差一個CNAME檔案，這個檔案需要提交到我們剛才建立的倉庫，內容為我們的域名，例如:

20160504234717157

然後記得執行：git add . , git commit -m "註釋"，git push，然後輸入你的使用者名稱，密碼即可，忘了命令往前翻。

更新成功之後，檢查下，確定成功了，就可以通過你的域名訪問了，例如：

20160504234758817

ok，到這裡你已經學會了如何通過你購買的域名與github pages結合，即通過你購買的域名訪問你的個人站點了。

一般情況下，到這裡就可以慶祝了，比如你想託管你的簡單的網頁設定。

但是，如果你和我一樣，部落格在其他平臺下託管，你想通過購買的域名跳轉到該平臺，你的任務還沒結束。

（3）神奇的JS

好吧，其實一點也不神奇，也就一行js跳轉程式碼。

對於我這種情況，我不需要任何內容，只要一行js就好了，我可以這麼寫index.html：

<!DOCTYPE html>
<html>
<script>
    window.location.href="http://blog.csdn.net/lmj623565791";
</script>

<body>
</body>

</html>

然後我提交就搞定了，我就可以通過zhanghongyang.com直接跳轉到我的部落格頁面了。

but，心細的人並沒有滿足，比如我們手機訪問的csdn列表頁面和電腦的列表頁面不同的，於是我們可以更加完善我們的js程式碼：

<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        window.location.href="http://blog.csdn.net/lmj623565791";
    } else {
        window.location.href="http://m.blog.csdn.net/blog/index?username=lmj623565791";
    }
}
browserRedirect();
</script>

通過判斷userAgent來確定是否是來自手機端的，如果是手機端的訪問mobile的頁面，否則訪問pc端頁面。這麼心細也就沒誰了，該程式碼是郭神編寫的。

ok，到此就真的結束了~~

文章不長，但是值得玩一下，你可以設計個賀卡，做個網頁版ppt，託管個網站原型，恩，甚至編寫部落格（記得利用各種工具hexo等），好了，看你的腦洞了~~

群號：535687182，歡迎入群

微信公眾號：hongyangAndroid
（歡迎關注，本公眾號已經開通投稿功能，歡迎聯絡我）

如何實用github打造部落格專屬域名

一、概述

二、Github Pages的使用

（1）新建倉庫

（2）更新內容

三、打造部落格專屬域名

（1）域名購買與解析

（2）CNAME

（3）神奇的JS

如何實用github打造部落格專屬域名

如何利用github釋出星雲Dapp 和繫結域名 --如何利用github打造部落格專屬域名

hexo部落格新增域名實現雙線部署（github和coding）

github個人部落格繫結個性化域名出現dns解析失敗可能的原因

[轉載] 如何將你的github倉庫部署到github pages（github.io部落格）

hexo-github搭建部落格詳細教程

使用github搭建部落格出現的問題：Jekyll主題下push文章到github上沒有生效

Github+Hexo部落格搭建過程

用hexo在github釋出部落格

github釋出部落格

如何擁有個人的Github技術部落格

Django2.0 利用ajax打造部落格的評論區

hexo github搭建部落格常用的命令

HEXO個人部落格實現域名訪問

使用 Hexo 和 GitHub 搭建部落格，出現 hexo -d 報錯

建立GitHub技術部落格全攻略

百度檢索Github Page部落格

Mac下Hexo+GitHub搭建部落格圖文教程

hexo+github 搭建部落格

建立github技術部落格——安裝Git,Node.js,npm,hexo進行中

如何實用github打造部落格專屬域名

一、概述

二、Github Pages的使用

（1）新建倉庫

（2）更新內容

三、打造部落格專屬域名

（1）域名購買與解析

（2）CNAME

（3）神奇的JS

相關推薦