天天看點
傳回

利用git搭建自己的個人部落格

轉載請标明出處： 

http://blog.csdn.net/lmj623565791/article/details/51319147； 

本文出自:【張鴻洋的部落格】

一、概述

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

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

這樣是不行的，關鍵在于我的部落格站點是csdn所提供的，歸屬于csdn的blog子域名下，但是在設定域名解析的時候隻能填寫ip，如果你

ping 我的部落格位址

最終得到的ip可能是csdn某台伺服器的甚至是拿不到的，是以光填寫ip是不行的，不過如果你是自己搭建的伺服器站點就可以簡單設定解析ip就可以了。

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

  • http://blog.csdn.net/lmj623565791

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

  • zhanghongyang.com（張鴻洋.com）

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

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的賬号，立志作為一名優秀的程式員，這個賬号是應該有的，如果沒有趕快申請一個。

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

利用git搭建自己的個人部落格

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

利用git搭建自己的個人部落格

這裡隻要注意一個地方，就是倉庫的名稱，必須是：

你的使用者名.github.io

，例如我的使用者名是hongyangAndroid，我填寫的倉庫名稱即為：

hongyangAndroid.github.io

。

（2）更新内容

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

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

  1. clone

    到本地

    指令行進入硬碟上任意一個檔案夾，然後執行

    git clone https://github.com/hongyangAndroid/hongyangAndroid.github.io.git
    • 1
    • 2
    • 1
    • 2
    注意修改為你的倉庫位址，如果你的電腦上并不支援Git指令，你可以搜尋

    git 安裝

     ，先安裝好git并配置好環境。

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

<!DOCTYPE html>
<html>
<body>
<h1>這是我使用github pages搭建的個人站點。</h1>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

完成之後，記得儲存，index.html必須和你clone下來的

.git

檔案夾在同一個目錄，如圖：

利用git搭建自己的個人部落格

完成之後，就是送出了。

/Users/zhy/github_repository/mine/hongyangAndroid.github.io
git add .
git commit -m "更新index.html，編寫博文測試"
[master c22f3d4] 更新index.html，編寫博文測試
  file changed,  insertions(+),  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
  • 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
  • 1

例如我在浏覽器通路這個位址：

利用git搭建自己的個人部落格

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

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

ok，到這裡，我們已經教會大家如何利用

github pages

去搭建個人站點了，哈，免費的個人站點。如果我大學時候知道這個功能，我至少網頁設計可以多拿10分，恩，那會我得了90分。

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

ok，經過上面的内容，大家了解了利用github搭建個人站點，以及一些簡單git指令的使用，但是我們文章的标題是：

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

，恩，接下來的标題就是專屬域名。

對了，如果你想利用這個做個人部落格，以及有很多友善的工具輔助你完成了，例如

hexo

等，具體自行搜尋。

三、打造部落格專屬域名

（1）域名購買與解析

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

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

利用git搭建自己的個人部落格

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

利用git搭建自己的個人部落格

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

例如：

ping www.hongyangandroid.github.io
  • 1
  • 1

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

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

  • 主機記錄

    www

     對應

    www.zhanghongyang.com
  • 主機記錄

    @

     對應

    zhanghongyang.com

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

恩，是不能，你去通路會顯示404.

我們還差一個環節。

（2）CNAME

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

利用git搭建自己的個人部落格

然後記得執行：

git add .

 , 

git commit -m "注釋"

，

git push

，然後輸入你的使用者名，密碼即可，忘了指令往前翻。

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

利用git搭建自己的個人部落格

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

等），好了，看你的腦洞了~~

git使用教程 部落格 git
上一篇: 手把手教你使用Python實作常用的假設檢驗 ！
下一篇: javaScript之操作元素

繼續閱讀