layout: "post"
title: "34/70 GithubPage+Hexo搭建博客"
category: "軟件應(yīng)用"
tags:
date: "2017-04-02 19:01"
個(gè)人博客是使用 githubpage+jekyll 搭建的稻励，且博客已經(jīng)工作有半年了熄捍，但由于期初的模板沒有找好朝捆，加上一些其他的問題，導(dǎo)致博客看起來比較凌亂，這邊給出另外一個(gè) GithubPage+Hexo 的博客搭建方法供大家參考，本文操作系統(tǒng)主要使用的是 ubuntu 16.04，使用其他 linux 發(fā)行版的用戶芍碧，可以參考本文。附上最終效果圖如下：
安裝步驟
安裝 node.js
Node.js 是一個(gè)開放源代碼号俐、跨平臺(tái)的泌豆、可用于服務(wù)器端和網(wǎng)絡(luò)應(yīng)用的運(yùn)行環(huán)境，該應(yīng)用由 C++ 語(yǔ)言寫成吏饿，在 Node.js 運(yùn)行時(shí)運(yùn)行踪危。Node.js 提供事件驅(qū)動(dòng)和非阻塞 I/O API，可優(yōu)化應(yīng)用程序的吞吐量和規(guī)模猪落。這些技術(shù)通常被用于實(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）袱结，它是一個(gè)以 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 的資源管理器颖榜，借助各個(gè)工具可以方便快捷地對(duì) npm 的源進(jìn)行管理棚饵。另外煤裙，由于國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境原因在使用 npm 默認(rèn)下載源的時(shí)候不僅速度非常慢而且常常會(huì)超時(shí)掩完，因此這里還手動(dòng)指定了從淘寶源下載噪漾。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 是一個(gè)快速诈胜、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章冯事，在幾秒內(nèi)焦匈，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)。接下來我們開始使用 Hexo 搭建博客昵仅。
- sudo npm install hexo-cli -g 或者 sudo npm install -g hexo
- 如果以上命令遇到錯(cuò)誤或者警告缓熟，則更新 npm 版本，
sudo npm i npm -g - 創(chuàng)建并進(jìn)入目錄 Hexo ：
mkdir Hexo && cd Hexo - 使用 hexo 生成博客框架摔笤。依次執(zhí)行如下命令(hexo init blog 過程可能會(huì)比較慢够滑，需要耐心等待。)：
$ hexo init blog
$ cd blog
$ npm install
$ hexo generate (hexo generate 為我們生成了靜態(tài)文件存儲(chǔ)于 public 文件夾之下吕世，并且在一開始默認(rèn)情況下執(zhí)行這句將會(huì)為我們生成一個(gè) Hello World 的頁(yè)面彰触。)
$ hexo server (通過 hexo server 運(yùn)行起 hexo 內(nèi)置的服務(wù)器。這時(shí)候就可以開始在本地訪問了命辖，默認(rèn)地址為 localhost:4000 况毅。)
注意：hexo 中的 generate, server, dpoly 等操作都可以簡(jiǎn)寫為首字母，所以 hexo generate 等同于 hexo g 尔艇，hexo server 等同于 hexo s尔许，。
模塊簡(jiǎn)介
通過 tree | less 可以查看以下 blog 的目錄結(jié)構(gòu)漓帚，主要的幾個(gè)文件和目錄的作用分別如下：
-
_config.yml：配置文件母债，可以修改網(wǎng)站的主題、標(biāo)題尝抖、作者等信息毡们。 -
public：由 hexo 根據(jù) source 文件夾中的資源進(jìn)行渲染生成的文件夾，里邊存儲(chǔ)著最終的靜態(tài)網(wǎng)頁(yè)文件昧辽。 -
scaffolds/：模板文件衙熔，當(dāng)要給博客添加新文章的時(shí)候，將根據(jù)對(duì)應(yīng)的模板進(jìn)行創(chuàng)建搅荞。 -
source/：用于存儲(chǔ)用戶資源红氯，比如文章與新頁(yè)面等框咙。其中以 _ 開頭的文件夾中除了_posts文件夾中的 markdown 或 HTML 文件會(huì)在執(zhí)行 generate 操作的時(shí)候被渲染添加到 public 文件夾中之外，其他均被忽略痢甘。而且在初始化博客的過程中_posts目錄底會(huì)自帶一個(gè) hello-world.md 的文件喇嘱。 -
themes/：主題文件，自帶默認(rèn)主題 landscape 塞栅。
操作指導(dǎo)
文章創(chuàng)建
hexo new [layout] <filename> 其中 layout 為可選參數(shù)者铜，指定了新創(chuàng)建的文件布局，默認(rèn)為 post 文件放椰。 filename 為必填參數(shù)作烟，指定了文件名，如果文件名中有空格則需要把文件名用引號(hào)"" 包裹起來砾医。例如： 終端輸入： hexo new "我的第一篇文章" 拿撩，這時(shí)候我們發(fā)現(xiàn) hexo 在 source/_post 目錄之下創(chuàng)建了一個(gè) 我的第一篇文章.md 的文件。打開該文件進(jìn)行編輯如蚜。我們也可以通過 atom 等常用的 markdown 編輯工具直接在 source/_post 目錄下創(chuàng)建文章進(jìn)行編輯即可压恒。刷新瀏覽器就可以看到我們博客更新的內(nèi)容了。
至此我們基本配置好了本地 hexo 服務(wù)怖亭，能夠自己寫點(diǎn)內(nèi)容了涎显。
插入圖片
- 在 hexo/source 目錄下新建一個(gè)img文件夾，將圖片放入該文件夾下兴猩，插入圖片時(shí)鏈接即為
https://raw.githubusercontent.com/noparkinghere/noparkinghere.github.io/master/img/圖片名稱期吓。 注意目錄必須為hexo/source，且圖片文件夾為 img 倾芝，否則通過 hexo generate 可能無法生成目標(biāo)圖片讨勤。 - 也可以使用圖床外鏈來存儲(chǔ)圖片。
部署到 github page
訪問 github晨另，創(chuàng)建庫(kù) git賬戶名.github.io 潭千， 這一這個(gè)名字是固定的，一般的庫(kù)沒法修改跳轉(zhuǎn)地址借尿，只能顯示為 github page 刨晴。
將遠(yuǎn)程庫(kù)同步到本地，git clone [你的倉(cāng)庫(kù)的 url]路翻，本地會(huì)多出一個(gè) git賬戶名.github.io 的文件夾狈癞，然后把 public 文件目錄下的博客文件都復(fù)制到你的本地倉(cāng)庫(kù)中，并將本地倉(cāng)庫(kù) push 到 github 倉(cāng)庫(kù)上茂契。這樣當(dāng)其他人訪問你的博客鏈接的時(shí)候 github 將會(huì)自動(dòng)將該倉(cāng)庫(kù)中的相應(yīng)文件展示出來蝶桶。
方法1
由于訪問網(wǎng)頁(yè)最終都是訪問的 html 文件，因此這邊需要通過本地 hexo generate 工具生成所需的 html 頁(yè)面代碼掉冶，然后每次將你的 html 頁(yè)面覆蓋到 github 的項(xiàng)目中去真竖。
執(zhí)行如下命令：
hexo g
cp -R public/* [你的倉(cāng)庫(kù)名]
cd [你的倉(cāng)庫(kù)名]
git add .
git commit -m 'update blog'
git push
方法2
注意脐雪，實(shí)際上 github page 是可以自己按照 jekyll 的方式將源碼生成 html 文件的，但是 對(duì)于 hexo 等其他源碼恢共，如果需要展示出來战秋，則必須本地生成 html 代碼，然后把生成的代碼部署到服務(wù)器上面才行旁振，這邊我們可以使用如上面的方式（將 public 目錄下面生成的 html 文件直接復(fù)制到服務(wù)器的根目錄下）获询， hexo 提供了更加人性化的方式涨岁，通過 hexo deploy 可以一鍵完成部署（無需在通過 push 手動(dòng)推送了）拐袜，每次部署的步驟，可按以下兩步：
- 修改 該配置文件：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í)行以下命令無需手動(dòng)將代碼 push 上去
hexo clean
hexo generate
hexo deploy
以上步驟雖然看起來貌似繁瑣，但實(shí)際可以寫成 bash 腳本琐馆，這樣每次就會(huì)自動(dòng)生成 public 自動(dòng)復(fù)制以及上傳了规阀。
CNAME 配置
github page 可以使用上面提供的網(wǎng)址也可以讓每次訪問時(shí)跳轉(zhuǎn)自己的域名地址，一般 github page 需要在根目錄下新建一個(gè) CNAME 文件瘦麸，其中寫下你的域名地址如：www.google.com谁撼。
因?yàn)?hexo 每次需要生成好文件再上傳，這邊將 CNAME 文件放入 source 目錄下滋饲，每次 hexo g && hexo generate 后則會(huì)上傳 CNAME 到 github page了厉碟。
擴(kuò)展補(bǔ)充
上述雖然配置完成了 hexo 博客，但博客功能過于簡(jiǎn)單屠缭，使用起來不方便箍鼓，可以添加圖片，摘要呵曹，標(biāo)簽頁(yè)與分類頁(yè)等內(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)容就可以更改主題了奄喂。這會(huì)博客就套上了我們的新模板了铐殃。但是我們發(fā)現(xiàn)博客菜單上的文字是英文的于是我們還要重新配置以下，讓主題以中文的方式顯示砍聊。再次編輯 _config.yml 文件背稼，將 language 項(xiàng)設(shè)置為 zh-Hans 。
注意更改主題后每次需要重啟 hexo server 服務(wù)才可以刷新網(wǎng)頁(yè)玻蝌。
到 github 上面搜索蟹肘，可以找到更多出色的主題词疼，這兒給出一個(gè)主題匯總。
hexo 小結(jié)
hexo 比 jekyll 布局更簡(jiǎn)單帘腹，更加容易操作贰盗，但每次需要本地生成 html 然后上傳同步，雖然這不是問題阳欲，可以用腳本實(shí)現(xiàn)舵盈，但對(duì)于圖片等內(nèi)容，需要依賴第三方圖床就顯得很是無奈了球化。
問題
使用 Hexo 部署了數(shù)月秽晚，今天出現(xiàn)了新問題，今天又出現(xiàn)了新問題筒愚，hexo 部署無法推送到 github 上赴蝇，疑似該問題出現(xiàn)了有一段時(shí)間了，npm install hexo-deployer-git --save 的插件讀取了 _config.yml 文件的內(nèi)容巢掺，但是上傳到 github 時(shí)句伶，出現(xiàn)錯(cuò)誤，本來應(yīng)該上傳 public 內(nèi)容陆淀，但是這邊會(huì)上傳文件夾中的全部?jī)?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.reibang.com/p/1d427e888dda
http://www.reibang.com/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.reibang.com/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/
