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

時間 2019-11-24

標籤如何利用 github 打造博客專屬域名欄目 Git 简体版

原文原文鏈接

1、概述

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

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

這樣是不行的，關鍵在於個人博客站點是csdn所提供的，歸屬於csdn的blog子域名下，可是在設置域名解析的時候只能填寫ip，若是你ping 個人博客地址最終獲得的ip多是csdn某臺服務器的甚至是拿不到的，因此光填寫ip是不行的，不過若是你是本身搭建的服務器站點就能夠簡單設置解析ip就能夠了。html

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

http://blog.csdn.net/lmj623565791

通常人太難記住了，因此我但願買一個好記的域名android

zhanghongyang.com（張鴻洋.com）

這樣你們一眼就能記住，一眼不夠兩眼確定沒問題。git

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

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

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

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

不少人可能並不清楚github pages是幹嗎的，官網是：https://pages.github.com/，其實算github提供的一個服務，咱們能夠免費的再其上面搭建本身的網站，也有不少人利用github pages做爲本身的我的博客站點。windows

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

那麼，經過本文的學習，你也能夠利用github pages搭建一個小站點，構建屬於本身的網站，或者使用github pages維護我的博客均可以。

這裏感謝郭神，該方案雖然一塊兒討論得出，可是對該方案的實施是在我以前的，此外你們能夠關注他的博客。

2、Github Pages的使用

（1）新建倉庫

ok，首先你須要一個github的帳號，立志做爲一名優秀的程序員，這個帳號是應該有的，若是沒有趕快申請一個。

有了帳號之後，首先點擊新建倉庫，如圖：

而後到達倉庫信息填寫界面，如圖：

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

（2）更新內容

有了倉庫之後，你就能夠去隨意的更新內容了，若是你對html熟悉，你能夠隨便寫個頁面提交上去，好比我寫個簡單的html頁面。

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

clone到本地

命令行進入硬盤上任意一個文件夾，而後執行

git clone https://github.com/hongyangAndroid/hongyangAndroid.github.io.git

注意修改成你的倉庫地址，若是你的電腦上並不支持git命令，你能夠搜索git 安裝，先安裝好git並配置好環境。

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

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

完成以後，記得保存，index.html必須和你clone下來的.git文件夾在同一個目錄，如圖：

完成以後，就是提交了。

/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://hongyangAndroid@github.com': 
>zhy$

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

更新成功以後，那就要恭喜你了，你的我的站點搭建成功了。

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

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

http://hongyangandroid.github.io

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

看到沒有，咱們剛纔編寫的簡單html文件已經能夠經過特定的url訪問了，恩，你記得修改成你本身的url。

若是你的html、css、js技術足夠好，你徹底能夠利用這樣的方式搭建一個高逼格且實用的我的站點，固然你也能夠在上面搭建你的簡歷，方便打印，不過注意保護我的隱私。

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

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

ok，通過上面的內容，你們瞭解了利用github搭建我的站點，以及一些簡單git命令的使用，可是咱們文章的標題是：如何利用github打造博客專屬域名，恩，接下來的標題就是專屬域名。

對了，若是你想利用這個作我的博客，以及有不少方便的工具輔助你完成了，例如hexo等，具體自行搜索。

3、打造博客專屬域名

（1）域名購買與解析

ok，首先你要有個域名，那麼就要去申請域名了，這裏咱們能夠經過萬網申請：https://wanwang.aliyun.com/，查找你想申請域名，若是能夠買，購買就能夠了。

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

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

而後點擊添加解析，ip能夠跟我填寫的一致，固然以防發生變化，你能夠ping你的url：

例如：

ping www.hongyangandroid.github.io

而後拿到返回的這個IP也能夠。

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

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

ok，設置完成解析以後，是否是直接訪問域名就能跳轉到咱們剛纔的github頁面呢？

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

咱們還差一個環節。

（2）CNAME

差什麼呢，差一個CNAME文件，這個文件須要提交到咱們剛纔建立的倉庫，內容爲咱們的域名，例如:

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

更新成功以後，檢查下，肯定成功了，就能夠經過你的域名訪問了，例如：

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等），好了，看你的腦洞了~~