layout: "post"
title: "34/70 GithubPage+Hexo搭建博客"
category: "軟件應(yīng)用"
tags:
date: "2017-04-02 19:01"

個人博客是使用 githubpage+jekyll 搭建的，且博客已經(jīng)工作有半年了，但由于期初的模板沒有找好，加上一些其他的問題，導(dǎo)致博客看起來比較凌亂，這邊給出另外一個 GithubPage+Hexo 的博客搭建方法供大家參考，本文操作系統(tǒng)主要使用的是 ubuntu 16.04，使用其他 linux 發(fā)行版的用戶，可以參考本文。附上最終效果圖如下：

安裝步驟

安裝 node.js

Node.js 是一個開放源代碼、跨平臺的、可用于服務(wù)器端和網(wǎng)絡(luò)應(yīng)用的運(yùn)行環(huán)境，該應(yīng)用由 C++ 語言寫成，在 Node.js 運(yùn)行時運(yùn)行。Node.js 提供事件驅(qū)動和非阻塞 I/O API，可優(yōu)化應(yīng)用程序的吞吐量和規(guī)模。這些技術(shù)通常被用于實(shí)時應(yīng)用程序。并且它是采用 Google 的 V8 引擎來執(zhí)行代碼，它的大部分基本模塊都是用 JavaScript 寫成的，包含有一系列內(nèi)置模塊，使得程序可以作為獨(dú)立服務(wù)器運(yùn)行，從而脫離 Apache HTTP Server 或 IIS 運(yùn)行。npm 也即 Node包管理器（Node Package Manager），它是一個以 Javascript 編寫的軟件包管理系統(tǒng)，默認(rèn)環(huán)境為 Node.js 。

• 安裝 nodejs ： sudo apt-get install nodejs , 注意 ubuntu 16.04 使用：sudo apt install nodejs
• 安裝 npm ： sudo apt-get install npm ， 注意 ubuntu 16.04 使用：sudo apt install npm

需要安裝 nrm ， nrm 是 npm 的資源管理器，借助各個工具可以方便快捷地對 npm 的源進(jìn)行管理。另外，由于國內(nèi)網(wǎng)絡(luò)環(huán)境原因在使用 npm 默認(rèn)下載源的時候不僅速度非常慢而且常常會超時，因此這里還手動指定了從淘寶源下載。sudo npm install nrm -g --registry https://registry.npm.taobao.org，nrm use taobao（如果出現(xiàn)無法找到 node 則執(zhí)行： sudo ln -s /usr/bin/nodejs /usr/bin/node ）

安裝 git

這邊步驟在多篇博文中都有詳細(xì)描述，這邊就不再累述了，可以直接搜索引擎搜索，或者在本博客的其他文章中找到。

安裝 Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。接下來我們開始使用 Hexo 搭建博客。

• sudo npm install hexo-cli -g 或者 sudo npm install -g hexo
• 如果以上命令遇到錯誤或者警告，則更新 npm 版本，sudo npm i npm -g
• 創(chuàng)建并進(jìn)入目錄 Hexo ：mkdir Hexo && cd Hexo
• 使用 hexo 生成博客框架。依次執(zhí)行如下命令(hexo init blog 過程可能會比較慢，需要耐心等待。)：

$ hexo init blog
$ cd blog
$ npm install
$ hexo generate (hexo generate 為我們生成了靜態(tài)文件存儲于 public 文件夾之下，并且在一開始默認(rèn)情況下執(zhí)行這句將會為我們生成一個 Hello World 的頁面。)
$ hexo server (通過 hexo server 運(yùn)行起 hexo 內(nèi)置的服務(wù)器。這時候就可以開始在本地訪問了，默認(rèn)地址為 localhost:4000 。)

注意：hexo 中的 generate, server, dpoly 等操作都可以簡寫為首字母，所以 hexo generate 等同于 hexo g ，hexo server 等同于 hexo s，。

模塊簡介

通過 tree | less 可以查看以下 blog 的目錄結(jié)構(gòu)，主要的幾個文件和目錄的作用分別如下：

• _config.yml ：配置文件，可以修改網(wǎng)站的主題、標(biāo)題、作者等信息。
• public ：由 hexo 根據(jù) source 文件夾中的資源進(jìn)行渲染生成的文件夾，里邊存儲著最終的靜態(tài)網(wǎng)頁文件。
• scaffolds/ ：模板文件，當(dāng)要給博客添加新文章的時候，將根據(jù)對應(yīng)的模板進(jìn)行創(chuàng)建。
• source/ ：用于存儲用戶資源，比如文章與新頁面等。其中以 _ 開頭的文件夾中除了 _posts 文件夾中的 markdown 或 HTML 文件會在執(zhí)行 generate 操作的時候被渲染添加到 public 文件夾中之外，其他均被忽略。而且在初始化博客的過程中 _posts 目錄底會自帶一個 hello-world.md 的文件。
• themes/ ：主題文件，自帶默認(rèn)主題 landscape 。

操作指導(dǎo)

文章創(chuàng)建

hexo new [layout] <filename> 其中 layout 為可選參數(shù)，指定了新創(chuàng)建的文件布局，默認(rèn)為 post 文件。 filename 為必填參數(shù)，指定了文件名，如果文件名中有空格則需要把文件名用引號"" 包裹起來。例如： 終端輸入： hexo new "我的第一篇文章" ，這時候我們發(fā)現(xiàn) hexo 在 source/_post 目錄之下創(chuàng)建了一個 我的第一篇文章.md 的文件。打開該文件進(jìn)行編輯。我們也可以通過 atom 等常用的 markdown 編輯工具直接在 source/_post 目錄下創(chuàng)建文章進(jìn)行編輯即可。刷新瀏覽器就可以看到我們博客更新的內(nèi)容了。

至此我們基本配置好了本地 hexo 服務(wù)，能夠自己寫點(diǎn)內(nèi)容了。

插入圖片

• 在 hexo/source 目錄下新建一個img文件夾，將圖片放入該文件夾下，插入圖片時鏈接即為https://raw.githubusercontent.com/noparkinghere/noparkinghere.github.io/master/img/ 圖片名稱。 注意目錄必須為 hexo/source，且圖片文件夾為 img ，否則通過 hexo generate 可能無法生成目標(biāo)圖片。
• 也可以使用圖床外鏈來存儲圖片。

部署到 github page

訪問 github，創(chuàng)建庫 git賬戶名.github.io ， 這一這個名字是固定的，一般的庫沒法修改跳轉(zhuǎn)地址，只能顯示為 github page 。

將遠(yuǎn)程庫同步到本地，git clone [你的倉庫的 url]，本地會多出一個 git賬戶名.github.io 的文件夾，然后把 public 文件目錄下的博客文件都復(fù)制到你的本地倉庫中，并將本地倉庫 push 到 github 倉庫上。這樣當(dāng)其他人訪問你的博客鏈接的時候 github 將會自動將該倉庫中的相應(yīng)文件展示出來。

方法1

由于訪問網(wǎng)頁最終都是訪問的 html 文件，因此這邊需要通過本地 hexo generate 工具生成所需的 html 頁面代碼，然后每次將你的 html 頁面覆蓋到 github 的項(xiàng)目中去。

執(zhí)行如下命令：

    hexo g
    cp -R public/* [你的倉庫名]
    cd [你的倉庫名]
    git add .
    git commit -m 'update blog'
    git push

方法2

注意，實(shí)際上 github page 是可以自己按照 jekyll 的方式將源碼生成 html 文件的，但是 對于 hexo 等其他源碼，如果需要展示出來，則必須本地生成 html 代碼，然后把生成的代碼部署到服務(wù)器上面才行，這邊我們可以使用如上面的方式（將 public 目錄下面生成的 html 文件直接復(fù)制到服務(wù)器的根目錄下）， hexo 提供了更加人性化的方式，通過 hexo deploy 可以一鍵完成部署（無需在通過 push 手動推送了），每次部署的步驟，可按以下兩步：

• 修改 該配置文件：vim _config.yml，執(zhí)行如下命令才能使用 git 部署 npm install hexo-deployer-git --save:

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

注：type: git 老版本可能是 github，repository 后也可以采用 ssh 的地址，https 每次需要輸入密碼，而 ssh 需要配置好公鑰私鑰免密碼。

• 執(zhí)行以下命令無需手動將代碼 push 上去

hexo clean
hexo generate
hexo deploy

以上步驟雖然看起來貌似繁瑣，但實(shí)際可以寫成 bash 腳本，這樣每次就會自動生成 public 自動復(fù)制以及上傳了。

CNAME 配置

github page 可以使用上面提供的網(wǎng)址也可以讓每次訪問時跳轉(zhuǎn)自己的域名地址，一般 github page 需要在根目錄下新建一個 CNAME 文件，其中寫下你的域名地址如：www.google.com。

因?yàn)?hexo 每次需要生成好文件再上傳，這邊將 CNAME 文件放入 source 目錄下，每次 hexo g && hexo generate 后則會上傳 CNAME 到 github page了。

擴(kuò)展補(bǔ)充

上述雖然配置完成了 hexo 博客，但博客功能過于簡單，使用起來不方便，可以添加圖片，摘要，標(biāo)簽頁與分類頁等內(nèi)容。

主題配置

下載并解壓縮 NexT 主題

wget http://labfile.oss.aliyuncs.com/courses/700/next.zip && unzip next.zip

需要將主題文件放入 Hexo/blog/themes 下，打開 ../blog/_config.yml 修改 theme 后的內(nèi)容就可以更改主題了。這會博客就套上了我們的新模板了。但是我們發(fā)現(xiàn)博客菜單上的文字是英文的于是我們還要重新配置以下，讓主題以中文的方式顯示。再次編輯 _config.yml 文件，將 language 項(xiàng)設(shè)置為 zh-Hans 。

注意更改主題后每次需要重啟 hexo server 服務(wù)才可以刷新網(wǎng)頁。

到 github 上面搜索，可以找到更多出色的主題，這兒給出一個主題匯總。

hexo 小結(jié)

hexo 比 jekyll 布局更簡單，更加容易操作，但每次需要本地生成 html 然后上傳同步，雖然這不是問題，可以用腳本實(shí)現(xiàn)，但對于圖片等內(nèi)容，需要依賴第三方圖床就顯得很是無奈了。

問題

使用 Hexo 部署了數(shù)月，今天出現(xiàn)了新問題，今天又出現(xiàn)了新問題，hexo 部署無法推送到 github 上，疑似該問題出現(xiàn)了有一段時間了，npm install hexo-deployer-git --save 的插件讀取了 _config.yml 文件的內(nèi)容，但是上傳到 github 時，出現(xiàn)錯誤，本來應(yīng)該上傳 public 內(nèi)容，但是這邊會上傳文件夾中的全部內(nèi)容。

參考鏈接：
http://behappyli.cn/2015/12/05/hexo%E6%95%99%E7%A8%8B/
http://www.runoob.com/w3cnote/git-guide.html
http://baixin.io/2015/08/HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
http://blog.csdn.net/u012307002/article/details/51298705
https://www.zhihu.com/question/24422335
http://www.itdecent.cn/p/1d427e888dda
http://www.itdecent.cn/p/f4dce0e76886
http://baixin.io/2015/08/HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
http://www.itdecent.cn/p/2b9f202c13fd
http://c4fun.cn/blog/2014/03/03/use-hexo-blog/
http://www.cnfeat.com/blog/2014/05/10/how-to-build-a-blog/