Hexo之旅(二):Hexo博客搭建(在 Mac OS 平臺)

1 Git Pages 服務準備

工欲善其事,必先利其器。

在配置本地環(huán)境之前,先介紹Pages服務,是因為這是一切靜態(tài)博客的基礎。我們之所以能夠使用Github、GitCafe等代碼托管站來托管我們的博客,是因為他們提供了Pages服務。來看GitCafe上的介紹。

Pages服務
GitCafe Pages 是一項公眾網(wǎng)頁托管和發(fā)布服務。你可以使用 GitCafe Pages 托管博客、項目官網(wǎng)一類的靜態(tài)網(wǎng)頁,支持綁定自定義域名。
GitCafe Pages 支持用戶 Pages 服務和項目 Pages 服務。用戶 Pages 可以通過 user_name.gitcafe.io 形式的 URL 直接訪問,適合用作個人或組織的靜態(tài)博客或網(wǎng)站;項目 Pages 需通過user_name.gitcafe.io/project_name形式的 URL 訪問,更適合托管項目的官網(wǎng)或博客。

1.1 創(chuàng)建Github項目

這里只以Github為例,GitCafe是類似的。
如果還沒有Github賬號,先去注冊一個吧https://github.com/
用剛剛注冊的 Github 賬號登錄,然后在點擊頁面右上角的加號,在彈出菜單中點擊New Repository,如圖所示
{% img /images/blog_post_images/2016-03/2016-03-01-Hexo之旅-二-:Hexo博客搭建1.jpg %}
然后會跳轉(zhuǎn)到一個新建庫(Create new repository)的頁面,在Repository name一欄填[your_username].github.io[your_username]是你 Github 上的用戶名,請務必按照此格式填寫,否則無法在 Github 上部署博客。然后點擊 Create repository 按鈕提交。
如果一切順利會出現(xiàn)一個頁面,有一個 SSH 地址,形如git@github.com:[your_username]/[your_username].github.io.git,下一步會用到。(這里會有兩種形式的地址,一種是HTTPS的,一種是SSH的,我們用SSH形式的)。

1.2 添加 SSH 公鑰

為了保證安全,以及不用每次輸入git密碼,我們可以在Github上添加 SSH 公鑰。
SSH 密鑰的創(chuàng)建需要在終端(命令行)環(huán)境下進行,我們首先進入命令行環(huán)境。通常在 Mac OS X 和 Linux 平臺下我們使用終端工具(Terminal),在 Windows 平臺中,可以使用 Git Bash 工具。
在 GitCafe 的官網(wǎng)上有很詳細的添加 SSH 公鑰的方法的介紹。
點擊查看“添加 SSH 公鑰”的方法
注意:如果是同一個Email注冊的Github和GitCafe,在本地只需要生成一次公鑰密鑰,然后分別添加到Github和GitCafe上。
添加到Github上的方法與GitCafe是類似的,點擊右上角的頭像打開setting,點擊SSH Keys,點擊右上角的New SSH key,將公鑰復制進去創(chuàng)建即可。

2016-03-01-Hexo之旅-二-:Hexo博客搭建2.jpg

做完上面這兩個步驟,我們的 Pages 服務就準備好了,下面開始搭建本地環(huán)境。

2 本地環(huán)境準備

既然是為黑客設計的博客框架,安裝起來肯定沒有像普通應用程序那么簡單,需要一些準備工作,但請相信我,并不復雜。

  1. Hexo 是基于 Node.js 的,而且我們需要使用 git 來管理代碼,所以總體上來說我們需要安裝 Node.js 和 Git。
  2. 安裝 Node.js 和 Git 可以通過 HomeBrew 安裝。

2.1 安裝 HomeBrew

HomeBrew 是一個非常有用的軟件包管理系統(tǒng),你可以把它想象成一個稍微抽象一點的 Mac App Store。正如我們用 Mac App Store 來安裝其他軟件一樣,我們這一步安裝 HomeBrew 的目的是為了安裝別的軟件(Node.js 和 Git)。當然 Mac App Store 和 HomeBrew 本身也是軟件。
安裝 HomeBrew 非常簡單,打開終端 (Terminal),執(zhí)行以下命令(所謂「執(zhí)行」即「輸入+回車」,下同):

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果在執(zhí)行上如命令的時候彈出需要安裝 Xcode Command Line Tool 的提示,直接點擊安裝即可。
安裝好之后最好先執(zhí)行以下命令:

$ brew doctor

此條命令用來診斷安裝中出現(xiàn)的問題并提示修復方法,如果沒有問題則會顯示:

$ Your system is ready to brew.

如遇問題,則按照提示處理,如果不懂如何處理可以先試著執(zhí)行后面的步驟,如果能成功,則沒有太大問題,畢竟我們只是想寫博客而已。當然,做任何事情之前,備份是必須的。

2.2 安裝 Git

安裝 Git 非常簡單,執(zhí)行以下命令即可:

$ brew install git

2.3 安裝 Node.js

Hexo官網(wǎng)上說安裝Node.js 的最佳方式是使用nvm。因此推薦的安裝流程如下:

  1. 使用Homebrew安裝nvm
  2. 使用nvm安裝Node.js
  3. 使用nvm無痛切換Node.js版本

使用Homebrew安裝nvm

$ brew install nvm

安裝過程看到如下提示:

==> 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來讓設定生效:

$ . ~/.bash_profile

最后用 nvm help 來驗證nvm是否正確安裝

以上步驟一定要執(zhí)行,不然無法在命令行使用nvm。有時候你明明記得已經(jīng)安裝了nvm,但是提示找不到nvm命令,則可以重復執(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無痛切換Node.js版本

檢查當前使用的 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)

第一個 -> 表示當前使用的版本,default -> 表示默認版本,必須保證這兩個,不然后面安裝hexo會提示 -bash: hexo: command not found ,不能在命令行使用。
設置的方法是,先通過 nvm ls 看看本地安裝了什么版本,如果本地沒有,則應該使用上一步的方法先安裝,然后執(zhí)行這個命令指定版本:

$ nvm use v0.12.10

再通過這個命令指定默認版本:

$ nvm alias default v0.12.10

2.4 安裝 Hexo

所有必備的應用程序安裝完成后,即可使用 npm 安裝 Hexo:

$ npm install -g hexo-cli

-g 或 –global 表示全局安裝模塊,如果沒有這個參數(shù),會安裝在當前目錄的node_modules子目錄下。
安裝 Hexo 完成后,請執(zhí)行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

$ npm install 表示安裝當前目錄package.json文件中配置的dependencies模塊。

2.5 更新 Hexo

官方發(fā)布了新版本后,可以在Hexo建立的博客目錄內(nèi)運行:

$ npm update

用如下命令可以檢查package.json文件中配置的dependencies的版本號:

$ npm ls --depth=0

2.6 部署 Hexo

Hexo 3.0版本需要單獨安裝發(fā)布器插件,檢查博客目錄的node_modules中有沒有hexo-deployer-git文件夾,若沒有,執(zhí)行以下命令安裝:

$ npm install hexo-deployer-git --save

添加 -save 參數(shù)安裝的模塊的名字及其版本信息會出現(xiàn)在package.json的dependencies選項中。

另外,從Hexo 3.0開始配置文件_config.yml中的部署類型記得要填寫成git:

deploy:
  type: git ##部署類型,其它類型自行g(shù)oogle之
  repo: <repository url> ##git倉庫地址
  branch: [branch] ##git 頁面分支
  message: [message] ##git message建議默認字段update 可以自定義

如果要同時部署到 Github 和 GitCafe 上,可以按照下面的方式來寫,這時候就要用到前面創(chuàng)建 Github 項目時的 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即可,逗號后面跟著分支名,如果是master可以省略。

2.7 運行 Hexo

到現(xiàn)在,一個 Hexo 博客已經(jīng)搭建起來了,你可以在本地運行,也可以發(fā)布到 Git Page 服務商運行。
執(zhí)行下面的命令就可以在本地運行一個 Hexo 博客了。

$ hexo server 或 hexo s

這個命令執(zhí)行之后 Hexo 會監(jiān)視文件變動并自動更新,您無須重啟服務器。
按照提示打開http://localhost:4000/即可。

當然我們最終還是要發(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/,即可打開我們的博客了,里面有一篇默認的“Hello World”文章(果然任何程序都是從 Hello World 開始的啊)。

有人寫了個各種命令的總結(jié):hexo常用命令筆記

3 尾巴

搭建一個 Hexo 博客還是很簡單的,當然現(xiàn)在的運行起來的只是一個博客的默認的樣子,我們需要更多的個性化,來把她真正地變成我們的個人博客。后面會再介紹博客的優(yōu)化及個性化方法。

俗話說,“好記性不如爛筆頭”,寫這篇文字也是為了記錄自己的博客搭建過程,以及中間遇到的問題的處理和解決方法的記錄,當然也可以當作是一個對于新手的教程吧。

本文首發(fā)于我的博客vinnyxiong.cn,歡迎訪問。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容