1 Git Pages 服務(wù)準(zhǔn)備
工欲善其事,必先利其器赃泡。
在配置本地環(huán)境之前,先介紹Pages服務(wù)乘盼,是因?yàn)檫@是一切靜態(tài)博客的基礎(chǔ)升熊。我們之所以能夠使用Github、GitCafe等代碼托管站來(lái)托管我們的博客绸栅,是因?yàn)樗麄兲峁┝?strong>Pages服務(wù)级野。來(lái)看GitCafe上的介紹。
Pages服務(wù)
GitCafe Pages 是一項(xiàng)公眾網(wǎng)頁(yè)托管和發(fā)布服務(wù)粹胯。你可以使用 GitCafe Pages 托管博客蓖柔、項(xiàng)目官網(wǎng)一類(lèi)的靜態(tài)網(wǎng)頁(yè),支持綁定自定義域名风纠。
GitCafe Pages 支持用戶 Pages 服務(wù)和項(xiàng)目 Pages 服務(wù)况鸣。用戶 Pages 可以通過(guò) user_name.gitcafe.io 形式的 URL 直接訪問(wèn),適合用作個(gè)人或組織的靜態(tài)博客或網(wǎng)站竹观;項(xiàng)目 Pages 需通過(guò)user_name.gitcafe.io/project_name形式的 URL 訪問(wèn)懒闷,更適合托管項(xiàng)目的官網(wǎng)或博客。
1.1 創(chuàng)建Github項(xiàng)目
這里只以Github為例栈幸,GitCafe是類(lèi)似的愤估。
如果還沒(méi)有Github賬號(hào),先去注冊(cè)一個(gè)吧https://github.com/速址。
用剛剛注冊(cè)的 Github 賬號(hào)登錄玩焰,然后在點(diǎn)擊頁(yè)面右上角的加號(hào),在彈出菜單中點(diǎn)擊New Repository
芍锚,如圖所示
{% img /images/blog_post_images/2016-03/2016-03-01-Hexo之旅-二-:Hexo博客搭建1.jpg %}
然后會(huì)跳轉(zhuǎn)到一個(gè)新建庫(kù)(Create new repository)的頁(yè)面昔园,在Repository name
一欄填[your_username].github.io
蔓榄,[your_username]
是你 Github 上的用戶名,請(qǐng)務(wù)必按照此格式填寫(xiě)默刚,否則無(wú)法在 Github 上部署博客甥郑。然后點(diǎn)擊 Create repository 按鈕提交。
如果一切順利會(huì)出現(xiàn)一個(gè)頁(yè)面荤西,有一個(gè) SSH 地址澜搅,形如git@github.com:[your_username]/[your_username].github.io.git
,下一步會(huì)用到邪锌。(這里會(huì)有兩種形式的地址勉躺,一種是HTTPS的,一種是SSH的觅丰,我們用SSH形式的)饵溅。
1.2 添加 SSH 公鑰
為了保證安全,以及不用每次輸入git密碼妇萄,我們可以在Github上添加 SSH 公鑰蜕企。
SSH 密鑰的創(chuàng)建需要在終端(命令行)環(huán)境下進(jìn)行,我們首先進(jìn)入命令行環(huán)境冠句。通常在 Mac OS X 和 Linux 平臺(tái)下我們使用終端工具(Terminal)轻掩,在 Windows 平臺(tái)中,可以使用 Git Bash 工具轩端。
在 GitCafe 的官網(wǎng)上有很詳細(xì)的添加 SSH 公鑰的方法的介紹。
點(diǎn)擊查看“添加 SSH 公鑰”的方法
注意:如果是同一個(gè)Email注冊(cè)的Github和GitCafe逝变,在本地只需要生成一次公鑰密鑰基茵,然后分別添加到Github和GitCafe上。
添加到Github上的方法與GitCafe是類(lèi)似的壳影,點(diǎn)擊右上角的頭像打開(kāi)setting
拱层,點(diǎn)擊SSH Keys
,點(diǎn)擊右上角的New SSH key
宴咧,將公鑰復(fù)制進(jìn)去創(chuàng)建即可根灯。
做完上面這兩個(gè)步驟,我們的 Pages 服務(wù)就準(zhǔn)備好了掺栅,下面開(kāi)始搭建本地環(huán)境烙肺。
2 本地環(huán)境準(zhǔn)備
既然是為黑客設(shè)計(jì)的博客框架,安裝起來(lái)肯定沒(méi)有像普通應(yīng)用程序那么簡(jiǎn)單氧卧,需要一些準(zhǔn)備工作桃笙,但請(qǐng)相信我,并不復(fù)雜沙绝。
- Hexo 是基于 Node.js 的搏明,而且我們需要使用 git 來(lái)管理代碼鼠锈,所以總體上來(lái)說(shuō)我們需要安裝 Node.js 和 Git。
- 安裝 Node.js 和 Git 可以通過(guò) HomeBrew 安裝星著。
2.1 安裝 HomeBrew
HomeBrew 是一個(gè)非常有用的軟件包管理系統(tǒng)购笆,你可以把它想象成一個(gè)稍微抽象一點(diǎn)的 Mac App Store。正如我們用 Mac App Store 來(lái)安裝其他軟件一樣虚循,我們這一步安裝 HomeBrew 的目的是為了安裝別的軟件(Node.js 和 Git)同欠。當(dāng)然 Mac App Store 和 HomeBrew 本身也是軟件。
安裝 HomeBrew 非常簡(jiǎn)單邮丰,打開(kāi)終端 (Terminal)行您,執(zhí)行以下命令(所謂「執(zhí)行」即「輸入+回車(chē)」,下同):
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果在執(zhí)行上如命令的時(shí)候彈出需要安裝 Xcode Command Line Tool 的提示剪廉,直接點(diǎn)擊安裝即可娃循。
安裝好之后最好先執(zhí)行以下命令:
$ brew doctor
此條命令用來(lái)診斷安裝中出現(xiàn)的問(wèn)題并提示修復(fù)方法,如果沒(méi)有問(wèn)題則會(huì)顯示:
$ Your system is ready to brew.
如遇問(wèn)題斗蒋,則按照提示處理捌斧,如果不懂如何處理可以先試著執(zhí)行后面的步驟,如果能成功泉沾,則沒(méi)有太大問(wèn)題捞蚂,畢竟我們只是想寫(xiě)博客而已。當(dāng)然跷究,做任何事情之前姓迅,備份是必須的。
2.2 安裝 Git
安裝 Git 非常簡(jiǎn)單俊马,執(zhí)行以下命令即可:
$ brew install git
2.3 安裝 Node.js
Hexo官網(wǎng)上說(shuō)安裝Node.js 的最佳方式是使用nvm丁存。因此推薦的安裝流程如下:
- 使用Homebrew安裝nvm
- 使用nvm安裝Node.js
- 使用nvm無(wú)痛切換Node.js版本
使用Homebrew安裝nvm
$ brew install nvm
安裝過(guò)程看到如下提示:
==> Downloading https://github.com/creationix/nvm/archive/v0.30.1.tar.gz
==> Downloading from https://codeload.github.com/creationix/nvm/tar.gz/v0.30.1
######################################################################## 100.0%
==> Caveats
Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.
You should create NVM's working directory if it doesn't exist:
mkdir ~/.nvm
Add the following to ~/.bash_profile or your desired shell
configuration file:
export NVM_DIR=~/.nvm
. $(brew --prefix nvm)/nvm.sh
You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.30.1 will destroy any nvm-installed Node installations
upon upgrade/reinstall.
Type `nvm help` for further information.
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
?? /usr/local/Cellar/nvm/0.30.1: 6 files, 82.6K, built in 6 seconds
根據(jù)提示知道,為了讓你可以直接在shell使用nvm指令柴我,必須創(chuàng)建nvm的工作目錄解寝,并且在你的 .bash_profile 加入以下兩行:
export NVM_DIR=~/.nvm
. $(brew --prefix nvm)/nvm.sh
在終端按順序執(zhí)行以下命令:
$ mkdir ~/.nvm
$ echo "export NVM_DIR=~/.nvm" >> .bash_profile
$ echo ". $(brew --prefix nvm)/nvm.sh" >> .bash_profile
記得重新source你的 .bash_profile來(lái)讓設(shè)定生效:
$ . ~/.bash_profile
最后用 nvm help
來(lái)驗(yàn)證nvm是否正確安裝
以上步驟一定要執(zhí)行,不然無(wú)法在命令行使用nvm艘儒。有時(shí)候你明明記得已經(jīng)安裝了nvm聋伦,但是提示找不到nvm命令,則可以重復(fù)執(zhí)行以上的步驟界睁。
使用nvm安裝Node.js
安裝完了nvm觉增,接著安裝主角 Node.js。先用 $ nvm ls-remote
指令看一下有哪些版本可以安裝:
$ nvm ls-remote
.
.
.
v0.11.12
v0.11.13
v0.11.14
v0.11.15
v0.11.16
v0.12.0
v0.12.1
v0.12.2
v0.12.3
v0.12.4
v0.12.5
v0.12.6
v0.12.7
v0.12.8
v0.12.9
v0.12.10
.
.
.
直接用
$ nvm install <version>
指令安裝官網(wǎng)上建議的版本:
$ nvm install v0.12.10
######################################################################## 100.0%
Now using node v0.12.2
使用nvm無(wú)痛切換Node.js版本
檢查當(dāng)前使用的 Node.js 版本使用命令 nvm ls
翻斟。如果輸出結(jié)果如下表示正確:
-> v0.12.10
system
default -> v0.12.10
node -> stable (-> v0.12.10) (default)
stable -> 0.12 (-> v0.12.10) (default)
iojs -> N/A (default)
第一個(gè) ->
表示當(dāng)前使用的版本抑片,default ->
表示默認(rèn)版本,必須保證這兩個(gè)杨赤,不然后面安裝hexo會(huì)提示 -bash: hexo: command not found
敞斋,不能在命令行使用截汪。
設(shè)置的方法是,先通過(guò) nvm ls
看看本地安裝了什么版本植捎,如果本地沒(méi)有衙解,則應(yīng)該使用上一步的方法先安裝,然后執(zhí)行這個(gè)命令指定版本:
$ nvm use v0.12.10
再通過(guò)這個(gè)命令指定默認(rèn)版本:
$ nvm alias default v0.12.10
2.4 安裝 Hexo
所有必備的應(yīng)用程序安裝完成后焰枢,即可使用 npm 安裝 Hexo:
$ npm install -g hexo-cli
-g 或 –global 表示全局安裝模塊蚓峦,如果沒(méi)有這個(gè)參數(shù),會(huì)安裝在當(dāng)前目錄的node_modules子目錄下济锄。
安裝 Hexo 完成后暑椰,請(qǐng)執(zhí)行下列命令,Hexo 將會(huì)在指定文件夾中新建所需要的文件荐绝。
$ hexo init <folder>
$ cd <folder>
$ npm install
$ npm install
表示安裝當(dāng)前目錄package.json文件中配置的dependencies模塊一汽。
2.5 更新 Hexo
官方發(fā)布了新版本后,可以在Hexo建立的博客目錄內(nèi)運(yùn)行:
$ npm update
用如下命令可以檢查package.json文件中配置的dependencies的版本號(hào):
$ npm ls --depth=0
2.6 部署 Hexo
Hexo 3.0版本需要單獨(dú)安裝發(fā)布器插件低滩,檢查博客目錄的node_modules中有沒(méi)有hexo-deployer-git
文件夾召夹,若沒(méi)有,執(zhí)行以下命令安裝:
$ npm install hexo-deployer-git --save
添加 -save 參數(shù)安裝的模塊的名字及其版本信息會(huì)出現(xiàn)在package.json的dependencies選項(xiàng)中恕沫。
另外监憎,從Hexo 3.0開(kāi)始配置文件_config.yml
中的部署類(lèi)型記得要填寫(xiě)成git
:
deploy:
type: git ##部署類(lèi)型,其它類(lèi)型自行g(shù)oogle之
repo: <repository url> ##git倉(cāng)庫(kù)地址
branch: [branch] ##git 頁(yè)面分支
message: [message] ##git message建議默認(rèn)字段update 可以自定義
如果要同時(shí)部署到 Github 和 GitCafe 上婶溯,可以按照下面的方式來(lái)寫(xiě)鲸阔,這時(shí)候就要用到前面創(chuàng)建 Github 項(xiàng)目時(shí)的 SSH 地址了。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:[your_username]/[your_username].github.io.git,master
gitcafe: git@gitcafe.com:[your_username]/[your_username].git,gitcafe-pages
把[your_username]
改成你的username
即可迄委,逗號(hào)后面跟著分支名褐筛,如果是master
可以省略。
2.7 運(yùn)行 Hexo
到現(xiàn)在跑筝,一個(gè) Hexo 博客已經(jīng)搭建起來(lái)了死讹,你可以在本地運(yùn)行瞒滴,也可以發(fā)布到 Git Page 服務(wù)商運(yùn)行曲梗。
執(zhí)行下面的命令就可以在本地運(yùn)行一個(gè) Hexo 博客了。
$ hexo server 或 hexo s
這個(gè)命令執(zhí)行之后 Hexo 會(huì)監(jiān)視文件變動(dòng)并自動(dòng)更新妓忍,您無(wú)須重啟服務(wù)器虏两。
按照提示打開(kāi)http://localhost:4000/即可。
當(dāng)然我們最終還是要發(fā)布到 Github 或 GitCafe 上的世剖,每次更新完博客發(fā)布需要執(zhí)行以下命令:
$ hexo clean # 清空
$ hexo generate 或 hexo g # 生成
# hexo deploy 或 hexo d # 發(fā)布
然后在瀏覽器輸入 http://[your_username].github.io/
定罢,如果是 GitCafe,則是 http://[your_username].gitcafe.io/
旁瘫,即可打開(kāi)我們的博客了祖凫,里面有一篇默認(rèn)的“Hello World”文章(果然任何程序都是從 Hello World 開(kāi)始的扒眚恰)。
有人寫(xiě)了個(gè)各種命令的總結(jié):hexo常用命令筆記
3 尾巴
搭建一個(gè) Hexo 博客還是很簡(jiǎn)單的惠况,當(dāng)然現(xiàn)在的運(yùn)行起來(lái)的只是一個(gè)博客的默認(rèn)的樣子遭庶,我們需要更多的個(gè)性化,來(lái)把她真正地變成我們的個(gè)人博客稠屠。后面會(huì)再介紹博客的優(yōu)化及個(gè)性化方法峦睡。
俗話說(shuō),“好記性不如爛筆頭”权埠,寫(xiě)這篇文字也是為了記錄自己的博客搭建過(guò)程榨了,以及中間遇到的問(wèn)題的處理和解決方法的記錄,當(dāng)然也可以當(dāng)作是一個(gè)對(duì)于新手的教程吧攘蔽。
本文首發(fā)于我的博客vinnyxiong.cn龙屉,歡迎訪問(wèn)。