從零開始搭建屬於自己的部落格
- 環境:Mac OS X Yosemite
- 版本:10.10.5
- 前言:綜合前輩經驗,歷經磨礪,終於成功部署了屬於自己的部落格網站,將其整個思路整理出來,希望對有需要的人有所幫助。由於撰寫比較倉促,描述得可能不夠仔細,有問題歡迎留言交流!
- 目錄:
1. 註冊Github,建立Repository
開啟網址:https://github.com, 註冊屬於自己的Github賬號,擁有賬號後再登入賬號進入Repositories中建立一個以自己使用者名稱+”.github.io”建立的repository(倉庫),如我的使用者名稱為xiaoyaoyou1212,那麼建立的倉庫名為xiaoyaoyou1212.github.io,這樣我們就有了GitHub預設分配給每個使用者的二級域名,如我的GitHub二級域名是
有了這個二級域名後,我們就可以利用GitHub的免費站點部署自己的個人網站,本文準備利用Hexo這個靜態框架搭建自己的個人部落格,如果你已擁有自己的CSDN部落格,那麼你可以利用GitHub的免費站點作為中轉站進行跳轉,具體設定如下:
1、在目錄下新建資料夾,clone GitHub中的程式碼到本地,具體命令如下:git clone https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git
,這個執行的前提是本地已經安裝好git,如果沒有安裝,可略過先看以下步驟,後面有詳細講解;
2、新建index.html檔案,該檔案內容如下(為了描述方便,跳轉連結是我的CSDN部落格,替換為你的CSDN部落格地址就行):
<!DOCTYPE html>
<html>
<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/xiaoyaoyou1212";
} else {
window.location.href="http://m.blog.csdn.net/blog/index?username=xiaoyaoyou1212";
}
}
browserRedirect();
</script>
<body>
</body>
</html>
3、上傳本地檔案index.html到GitHub,按順序執行以下命令,命令如下:
git pull //獲取GitHub上最新程式碼,此處因為是第一提交,可以忽略
git add . //添加當前目錄下的所有檔案到git本地倉庫,注意最後的“.”
git commit -m "描述" //提交本地檔案到git本地倉庫
git push //push本地檔案到GitHub倉庫
4、訪問你的GitHub提供的二級域名地址,是不是已經成功跳轉到你的CSDN部落格地址了,就是這麼簡單
2. 註冊域名(可選)
開啟阿里雲服務的萬網網址:https://wanwang.aliyun.com,查詢自己想註冊的域名是否存在,如果該域名還未被註冊,那麼恭喜你,你可以用這個名字申請一個.com的頂級域名,首次註冊第一年的費用是45元,是不是很便宜,哈哈,就是這麼便宜,所以現在的域名滿天飛咯,找到一個好記又短的域名非常難了,不過只是自己的個人網站域名長點倒也無所謂啦,像我的域名http://www.xiaoyaoyou1212.com就很長而且還有數字,是不是感覺很不規範,主要還是因為這個賬號自己很多地方用到了,還是有點感情的啦!好了,說了這麼多,下面正式進入利用Hexo打造專屬自己的個人網站。
3. 安裝brew
brew又叫Homebrew,是Mac OSX上的軟體包管理工具,能在Mac中方便的安裝軟體或者解除安裝軟體,只需要一個命令,非常方便,brew類似ubuntu系統下的apt-get的功能;brew的官方網站:http://brew.sh/在官方網站對brew的用法進行了詳細的描述;安裝方法:在Mac中開啟Termal輸入如下命令:ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
。
4. 安裝Git
由於安裝了brew,所以此處很簡單啦,只需要執行如下命令就行:brew install git
,安裝完後使用命令git --version
進行驗證,如果輸出了git的版本號則說明git已經安裝成功,可以放心使用了!
5. 安裝Node
安裝node前,需要先安裝npm工具,npm是一個node包管理和分發工具,已經成為了非官方的釋出node模組(包)的標準,有了npm,可以很快的找到特定服務要使用的包,進行下載、安裝以及管理已經安裝的包。
安裝npm的命令如下:brew install npm
,安裝完後可以使用命令npm -v
看是否顯示版本號來進行驗證。
安裝node的命令如下:npm install -g node
,-g表示全域性安裝,同樣安裝完後可以使用命令node -v
來進行驗證。
6. 安裝Hexo
輸入命令npm install -g hexo
進行安裝,安裝完後選擇一個目錄新建資料夾blog,進入blog目錄,執行命令hexo init
,以後blog這個目錄就是整個網站的根目錄,以後所有的操作都在該目錄下進行。
執行命令hexo generate(或hexo g)
生成靜態頁面,再執行命令hexo server
進行服務啟動,在瀏覽器中輸入http://localhost:4000
就可以訪問了,不過別急,這個還只是Hexo預設的風格哦,還需要進行一些個性化設定才符合自己的口味嘛!下面就詳細講解怎麼通過一些配置打造個性化的網站風格。
7. 配置Hexo
網上提供了很多支援Hexo的主題,可以按照個人喜愛選擇一個,我選擇的是yilia,為啥選擇這個,就是第一眼感覺最滿意就選擇了,下面我將依據yilia主題進行配置的講解。首先進入blog目錄,執行命令git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
下載該主題到本地,修改_config.yml中的theme: yilia
.以下是yilia的配置檔案,由於註釋符“#”在markdown中有其他用途,所以都以“//”進行替換進行展示說明,你可以按照註釋修改為自己想展示的效果,如果你選擇的是其他主題,那麼就按照主題作者提供的配置檔案進行相關修改,其實都大同小異。
//Header
menu:
主頁: /
所有文章: /archives
隨筆: /tags/隨筆
相簿: /picture
//SubNav
subnav:
github: "#"
weibo: "#"
rss: "#"
//zhihu: "#"
//douban: "#"
//mail: "#"
//facebook: "#"
//google: "#"
//twitter: "#"
//linkedin: "#"
rss: /atom.xml
//Content
excerpt_link: more
fancybox: true
mathjax: true
//是否開啟動畫效果
animate: true
//是否在新視窗開啟連結
open_in_new: false
//Miscellaneous
google_analytics: ''
favicon: /favicon.png
//你的頭像url
avatar:
//是否開啟分享
share_jia: true
share_addthis: false
//是否開啟多說評論,填寫你在多說申請的專案名稱 duoshuo: duoshuo-key
//若使用disqus,請在部落格config檔案中填寫disqus_shortname,並關閉多說評論
duoshuo: true
//是否開啟雲標籤
tagcloud: true
//是否開啟友情連結
//不開啟——
//friends: false
//開啟——
friends: true
//是否開啟“關於我”。
//不開啟——
//aboutme: false
//開啟——
aboutme: 個人介紹
8. 部署及釋出
前面所講解的都是依據本地進行訪問,如果需要將自己的網站部署到GitHub上,並且能通過自己申請的域名進行訪問的話,那麼還需要進行一些相關的配置。首先,需要修改_config.yml檔案中的deploy屬性
deploy:
type: git
repo: https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git
branch: master
再執行命令npm install hexo-deployer-git --save
;然後需要配置下SSH,步驟如下:
1. 設定使用者名稱:git config –global user.email “[email protected]” config --global user.name "xxx"
2. 生成金鑰:ssh-keygen -t rsa -C "[email protected]"
3. 找到使用者目錄下.ssh目錄下生成的兩個檔案id_rsa和id_rsa.pub,用文字編輯器開啟ssh.pub檔案,拷貝其中的內容,將其新增到GitHub Add SSH Key
4. 執行命令ssh -T [email protected]
進行驗證
5. 執行命令hexo g
進行部署,再執行命令hexo d
進行釋出,釋出成功後,在瀏覽器中輸入你Github的二級域名,如:https://xiaoyaoyou1212.github.io就可以看到你釋出的網站了,不過如果想通過你申請的一級域名來訪問的話還需要在你的blog的source目錄下新建CNAME檔案,裡面輸入你的域名地址,再進行部署及釋出就行。
附:
每次部署的步驟,可按以下三步來進行:
hexo clean
hexo generate
hexo deploy
常用命令:
hexo new"postName" #新建文章
hexo new page"pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠(預設埠4000,'ctrl + c'關閉server)
hexo deploy #將.deploy目錄部署到GitHub
hexo help # 檢視幫助
hexo version #檢視Hexo的版本
常用複合命令:
hexo deploy -g
hexo server -g
簡寫:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
9. 常見問題
- ERROR Deployer not found: git 或者 ERROR Deployer not found: github,執行命令
npm install hexo-deployer-git --save
; - ERROR Process failed: layout/.DS_Store, 那麼進入主題裡面layout和_partial目錄下,執行刪除命令
rm -rf .DS_Store
; - ERROR Plugin load failed: hexo-server,執行命令:
sudo npm install hexo-server
; - 執行命令hexo server,提示:Usage: hexo ….,執行命令:
npm install hexo -server --save
,提示:[email protected] node_modules/hexo-server….,這個時候再執行:hexo server
; - 如果輸入
ssh -T [email protected]
出現錯誤提示:Permission denied (publickey).因為新生成的key不能加入ssh就會導致連線不上github。解決辦法如下:先輸入ssh-agent
,再輸入ssh-add ~/.ssh/id_key
,這樣就可以了;如果還是不行的話,輸入ssh-add ~/.ssh/id_key
命令後出現報錯Could not open a connection to your authentication agent.解決方法是key用Git Gui的ssh工具生成,這樣生成的時候key就直接儲存在ssh中了,不需要再ssh-add命令加入了,其它的user,token等配置都用命令列來做;最好檢查一下在你複製id_rsa.pub檔案的內容時有沒有產生多餘的空格或空行,有些編輯器會幫你新增這些的。