如何實用github打造博客專屬域名

原創 AndrewHR 2018-08-24 22:34
本文出自:【張鴻洋的博客】

一、概述

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

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

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

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

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

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

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

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

  1. 買個服務器，搭建個服務做頁面跳轉（redirect或者js跳轉）.
  2. 利用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倉庫中的內容：

  1. 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

完成之後，記得保存，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$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

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

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

恩，是的，默認的地址是:

http://hongyangandroid.github.io
  • 1

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

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
  • 1

然後拿到返回的這個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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

然後我提交就搞定了，我就可以通過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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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

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

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

歡迎關注我的微博：
http://weibo.com/u/3165018720

羣號：535687182，歡迎入羣

微信公衆號：hongyangAndroid
（歡迎關注，本公衆號已經開通投稿功能，歡迎聯繫我）
1422600516_2905.jpg

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

csdn如何快速完美的轉載別人的文章

AndrewHR 2020-06-02 03:49:24

xgboost調用sklearn的交叉驗證，並且使用自定義的訓練集、驗證集進行模型的調參

AndrewHR 2018-08-24 22:34:35