GitPages + Hexo,從0到1搭建個(gè)人博客

本文主要從三方面來介紹：

  1. 利用GitPages+Hexo從0到1搭建個(gè)人博客的基礎(chǔ)流程；
  2. 一些博客自定義（更換Next主題、配置自定義域名）及日常使用的方法；
  3. 實(shí)現(xiàn)多終端無障礙管理博客的技巧；

一、基礎(chǔ)博客搭建流程

安裝Node和Git

要按照下面的順序一步步安裝，每安裝完一項(xiàng)，可以在cmd工具中通過查看對(duì)應(yīng)版本的方式檢測(cè)是否安裝成功：name --version，例如：node --version；只要顯示出了版本號(hào)就代表已經(jīng)安裝成功。

  1. 安裝node.js。Node.js中文官網(wǎng)（建議安裝跟筆者一樣的v4.4.4成熟穩(wěn)定版本）下載到桌面按默認(rèn)路徑安裝即可；
  2. 安裝git。Git官網(wǎng)或者百度軟件中心下載到桌面按默認(rèn)路徑安裝即可。
    安裝正確的話，在桌面或文件夾空白處鼠標(biāo)右鍵菜單會(huì)新增“Git GUI Here”和“Git Bash Here”兩個(gè)選項(xiàng)。
  3. 選裝cnpm。淘寶cnpm官網(wǎng)。由于npm國(guó)內(nèi)下載速度經(jīng)常抽風(fēng)，所以建議安裝淘寶的這個(gè)鏡像；使用方法就是在命令中把npm換成cnpm即可。
    安裝方法：在cmd工具中輸入如下命令
    npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝Hexo及其相關(guān)插件

  1. 全局安裝Hexo
    在桌面空白處單擊右鍵，打開git bash，輸入cnpm install hexo-cli -g；安裝完成后輸入hexo -v，出現(xiàn)版本信息則表示安裝成功。
  2. 在項(xiàng)目中安裝Hexo
    在桌面打開git bash，輸入mkdir hexoBlob（在桌面新建了一個(gè)名為hexoBlog的文件夾），然后輸入cd hexoBlog（進(jìn)入到這個(gè)文件夾里），再依次執(zhí)行如下操作： 
        cnpm install hexo --save    #在當(dāng)前項(xiàng)目中安裝hexo；
    hexo init       #初始化hexo；
    cnpm install        #安裝依賴包；
  3. 安裝hexo的插件 
        cnpm install hexo-server --save     #搭建本地服務(wù)器所需插件
    cnpm install hexo-deployer-git --save   #使用git方式進(jìn)行部署博客所需插件

在本地生成博客靜態(tài)頁面并預(yù)覽

以下皆為hexo的指令：

  1. 在本地生成靜態(tài)頁面
    hexo generate，會(huì)生成一個(gè)存放靜態(tài)文件的文件夾public，其簡(jiǎn)寫形式為hexo g；
  2. 啟動(dòng)本地服務(wù)器
    hexo server,其簡(jiǎn)寫形式為hexo s；
    這條指令運(yùn)行完成后可在本地啟動(dòng)服務(wù)器并預(yù)覽博客，默認(rèn)網(wǎng)址為http://localhost:4000/。
    如果以上步驟都不出意外的話，你就會(huì)看到一個(gè)Hexo博客初始化的頁面。

截止目前，已經(jīng)成功安裝好了一個(gè)初始化的Hexo博客。但是暫時(shí)還只能在自己電腦上看到，如何讓別人通過域名可以訪問到呢？接下來就要請(qǐng)出今天的另外一位主角GitHub Pages了。
另外，以上的安裝步驟也可參考Hexo官方博客，關(guān)于各命令有更詳細(xì)的解釋。

創(chuàng)建GitHub Pages并配置ssh

  1. 創(chuàng)建博客倉庫。
    注冊(cè)并登陸到GitHub官網(wǎng)，假如你注冊(cè)的用戶名是LiLei，那么新建一個(gè)名為LeLei.github.io的倉庫，注意倉庫的用戶名一定要是用戶名+github.io的形式！
  2. 本地生成ssh密鑰。
    git bash下輸入ssh-keygen -t rsa -C ‘你的郵箱地址’
  3. 上傳本地的公鑰串，使當(dāng)前電腦與GitHub賬戶建立聯(lián)系。
    在你的電腦C：\ Users\你的計(jì)算機(jī)用戶名.ssh目錄下打開剛剛生成的id_rsa.pub，復(fù)制里面的內(nèi)容。然后點(diǎn)擊你GitHub賬戶右上角的頭像，選擇settings，找到SSH and GPG keys，點(diǎn)擊進(jìn)入之后再點(diǎn)擊New SSH key，title隨便寫，把公鑰串粘貼到文本框，保存即可。

由于篇幅有限，關(guān)于ssh的內(nèi)容就不詳細(xì)展開，對(duì)于想深究的同學(xué)，給你們送上兩個(gè)傳送門：
SSH的理解
GitHub設(shè)置添加SSH

本地博客同步到GitHub上

這一步其實(shí)就是把本地生成的博客內(nèi)容（靜態(tài)頁面）放到GitHub新建成的倉庫LiLei.github.io中。

  1. 編輯博客配置文件: _config.yml
    在hexo根目錄（也就是hexoBlog文件夾）下找到_config.yml文件，把其中的deploy參數(shù)（沒有的話就按如下格式新建，注意冒號(hào)后面一定要有一個(gè)空格），修改為：

    deploy: 
    type: git 
    repo: git@github.com:LiLei/LiLei.github.io.git          
    branch: master

  2. 重新部署
    在博客根目錄下打開Git Bash，依次執(zhí)行如下Hexo命令：

    hexo clean    #會(huì)清除緩存文件db.json及之前生成的靜態(tài)文件夾public；
hexo g     #會(huì)重新生成靜態(tài)文件夾public；
hexo deploy    #因?yàn)橹耙呀?jīng)安裝了插件并且在博客配置文件中也配置好了，所以這個(gè)命令會(huì)在博客根目錄下生成一個(gè).deploy_git的文件夾，并 把本地生成的靜態(tài)文件部署到LiLei.github.io這個(gè)倉庫中的master分支上；簡(jiǎn)寫形式為hexo d；

    hexo g 和 hexo d可以合并在一起寫：hexo g -d

  3. 在瀏覽器中訪問博客
    在瀏覽器中輸入LiLei.github.io（可能你已經(jīng)發(fā)現(xiàn)了，這個(gè)就是之前新建倉庫的名字，同時(shí)也是你博客的域名），沒毛病的話，你應(yīng)該可以再次看到那個(gè)熟悉又親切的博客頁面了。

至此，我們已經(jīng)通過Hexo創(chuàng)建了一個(gè)最原始的博客，并且通過把博客靜態(tài)文件放到GitHub的倉庫中，實(shí)現(xiàn)了從網(wǎng)上以GitHub的默認(rèn)域名訪問這個(gè)博客。接下來要做的就是要錦上添花了：換個(gè)好看的主題；自定義博客的域名；操作及優(yōu)化博客。

二、錦上添花&博客操作

錦上添花之更換主題

更換主題主要是兩步，先下載主題然后放到博客中的themes文件夾（專門用來存放主題）下，再修改主題的配置文件_config.yml中相關(guān)參數(shù)，啟用themes文件夾下新增的主題。這里用Next主題做示例。

  1. 下載Next主題。
    進(jìn)入 hexoBlog/themes 文件夾中，打開Git Bash面板，輸入：
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    把主題包克隆到themes文件夾中即可。
  2. 啟用主題
    與所有 Hexo 主題啟用的模式一樣。 當(dāng) 克隆/下載 完成后，打開themes下的主題配置文件_config.yml， 找到 theme 字段，并將其值更改為 next（注意冒號(hào)后面要留一個(gè) 空格）。
  3. 驗(yàn)證主題
    清除并重新生成hexo靜態(tài)文件，啟動(dòng)本地服務(wù)器，然后通過http://localhost:4000/預(yù)覽博客： 
    hexo clean      #清除靜態(tài)文件
hexo g          #重新生成靜態(tài)文件
hexo s      #啟動(dòng)服務(wù)器

    如果網(wǎng)絡(luò)沒問題，通過域名訪問你的博客也可以看到剛換的新主題了。
    關(guān)于更換Next主題的詳細(xì)介紹，也可訪問Next中文官網(wǎng)

錦上添花之配置自定義域名

域名注冊(cè)商可選擇godaddy、萬網(wǎng)等，推薦使用萬網(wǎng)，速度快，后臺(tái)介紹簡(jiǎn)潔明了易上手，大家自行注冊(cè)。下面以萬網(wǎng)注冊(cè)的域名為例說下如何為博客更換自定義域名。

  1. 后臺(tái)域名解析設(shè)置
    進(jìn)入對(duì)應(yīng)域名的解析后臺(tái)，添加如下兩條解析記錄：


    域名解析設(shè)置
  2. 在博客目錄的source文件夾下（hexoBlog/source）創(chuàng)建一個(gè)名為CNAME的文件，內(nèi)容為你注冊(cè)域名。

    CNAME是不帶任何后綴的。

上面操作完畢后，大概過幾分鐘就可以通過自定義的新域名訪問博客了。如果不行，就依次執(zhí)行hexo clean hexo g hexo d再試下。

博客操作

  1. 新建文章
    hexo new post 背影
    在Git Bash中執(zhí)行上面命令會(huì)新建一篇名為‘背影’的文章，源文件會(huì)自動(dòng)生成到hexoBlog/source/_post 路徑下，后綴為.md，直接打開編輯就可以了。編輯完保存，然后再依次執(zhí)行hexo clean hexo g hexo d在博客就可以看到你的文章了（有時(shí)候網(wǎng)絡(luò)問題生成會(huì)比較慢，需要等幾分鐘才可以看到）。

  2. 新建頁面
    新建標(biāo)簽、分類、關(guān)于我等各種頁面，并在博客的菜單欄中顯示。這里以新建‘標(biāo)簽’頁面來做示范。

    • 創(chuàng)建頁面。
      在Git Bah中執(zhí)行hexo new page 'tags'，會(huì)在hexoBlog/source路徑下自動(dòng)生成一個(gè)名為tags的文件夾，里面包含一個(gè)index.md的文件，在這個(gè)文件中添加對(duì)應(yīng)的頁面類型type: tags：

          ---
    title: Tagcloud
    date: 2017-01-01 15:24:23
    type: 'tags'   #聲明頁面類型
    ---

    • 把頁面路徑添加到菜單中。
      編輯主題配置文件（themes/_config.yml）,找到munu字段，添加tag: /tags（格式為item_name: link），如下：

      menu:
    home: /
    tag: /tags    #‘標(biāo)簽’’頁面的路徑

    • 設(shè)置博客中‘標(biāo)簽’這個(gè)菜單項(xiàng)的顯示圖標(biāo)。
      同樣是在主題配置文件中，找到nenu_icons字段，添加tags tags（格式為item_name: icon_name ），如下：

      menu_icons:
    enable: true     #顯示圖標(biāo)
    home: home
    tag: tags     #tag標(biāo)簽的icons是‘tags’

    • 設(shè)置博客中‘標(biāo)簽’這個(gè)菜單項(xiàng)的顯示文本。
      上面的item_name并不會(huì)直接用于博客界面的顯示，只是用來匹配圖標(biāo)和顯示在頁面上的文字，可以理解為一個(gè)橋梁。那么到底在哪里設(shè)置呢？
      首先，在博客配置文件中（hexoBlog下的_config.yml文件）找到language字段，設(shè)置為zh-Hans；
      然后， 在themes/next/languages路徑下找到zh-Hans.yml文件，在menu字段下添加tag: 標(biāo)簽云（格式為item_name: show_name），如下：

      menu:
    home: 首頁
    tag: 標(biāo)簽云    #博客頁面就會(huì)顯示‘標(biāo)簽云’

菜單這塊的設(shè)置會(huì)比較繞，其實(shí)主要也就幾步，先創(chuàng)建文件夾，再添加路徑，然后設(shè)置需要顯示的圖標(biāo)和文本，只不過文本的設(shè)置要到zh-Hans.yml這個(gè)文件中操作。更詳細(xì)的步驟請(qǐng)移步官網(wǎng)關(guān)于菜單設(shè)置的介紹。

三、多終端同步管理技巧

如果你使用過云盤或者有Git操作的基礎(chǔ)，下面的內(nèi)容會(huì)非常好理解。
思路：
需要發(fā)布到GitHub倉庫的靜態(tài)內(nèi)容（也就是執(zhí)行hexo g -d之后生成的public和.deploy_git文件夾）放在master上，而博客所有其他源文件（除了public和.deploy_git）存放到另外一個(gè)新建的hexo分支（這個(gè)分支的名字可以隨意取），并且在GitHub上將其設(shè)為默認(rèn)分支。
以后所有的操作都會(huì)在hexo這個(gè)分支上進(jìn)行，操作完之后依次執(zhí)行git add . git commit -m 'commets' git push把所有源文件推到遠(yuǎn)程倉庫的hexo分支上（這里遠(yuǎn)程倉庫其實(shí)扮演了一個(gè)云盤的角色）；即使換了電腦，你可以直接clone遠(yuǎn)程倉庫的hexo分支到本地或者執(zhí)行git pull下拉更新到本地覆蓋現(xiàn)有源文件，就在本地還原了最新的博客內(nèi)容了。
操作流程
假設(shè)你最早是在家里的A電腦上搭建了博客，那么A電腦的準(zhǔn)備工作：把源文件push到GitHub。

  1. 初始化倉庫
    博客根目錄下依次執(zhí)行：
    git init
    git remote add origin <server>

  2. 新建并切換到hexo分支
    git checkout -b hexo

  3. 找到.gitignore文件（沒有的話就在根目錄下新建一個(gè)）,在最后增加兩行內(nèi)容：
    /.deploy_git 和 /public

    目的是讓git不跟蹤這兩個(gè)文件的更新，也就是push到hexo分支的內(nèi)容里不會(huì)有這兩個(gè)文件。

  4. 把本地新建的分支push到遠(yuǎn)程分支：
    git add .
    git commit -m 'commets'
    git push -u origin hexo:hexo
    然后再去GitHub上把新建的hexo分支設(shè)置為默認(rèn)分支。

畫面一轉(zhuǎn)，我們到了公司。此時(shí)公司B電腦上空空如也，那么執(zhí)行如下操作：

  1. 在桌面（或任意地址）執(zhí)行
    git clone <server> -b <branch>
    這里的<server>是你遠(yuǎn)程倉庫的clone地址，<server>就是之前新創(chuàng)建的hexo分支，這句話的作用是把遠(yuǎn)程<server>倉庫中的<branch>分支克隆到本地當(dāng)前目錄。
  2. 有了源文件就可以任性修改博客了。修改完之后先生成靜態(tài)文件發(fā)布到博客中：
    hexo clean
    hexo g -d
    再把最終保存的源文件push到GitHub，保證多終端可以同步：
    git add .
    git commit -m 'comment'
    git push

最后畫面再切換會(huì)家中的A電腦，因?yàn)榇藭r(shí)遠(yuǎn)程倉庫中的博客源文件已經(jīng)做了更新，而我們A電腦上也有之前的源文件，那么只需要下來更新覆蓋到本地就可以啦，進(jìn)入到博客根目錄，執(zhí)行：
git pull

終于可以暫告一段落了，簡(jiǎn)直完美：）

四、總結(jié)

  • 每次寫完博客發(fā)布都需要用到的命令
    hexo clean
    hexo g -d
  • 發(fā)布之前，在本地預(yù)覽博客用到的命令：
    hexo s
  • 同步博客需要用到的命令：
    git add .
    git commit -m 'comment'
    git push
    git clone <server> -b <branch>
    git pull

五、參考資料

原文發(fā)自 http://www.lipengcheng.xyz ，如需轉(zhuǎn)載請(qǐng)注明出處，謝謝。

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

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