Hexo + github 博客搭建指南

title: Hexo + github 博客搭建指南
date: 2018-01-14 02:18:16
tags: [hexo]
categories: 工具

用hexo + github 搭建博客

早在幾年以前用hexo 搭建過一個(gè)博客系統(tǒng)部署到github上，但是一直沒有用起來鲜滩，平時(shí)都是習(xí)慣用mac 的備忘錄記錄一些東西“楸睿現(xiàn)在離職狀態(tài)中準(zhǔn)備找下個(gè)東家了，發(fā)現(xiàn)沒個(gè)博客還是有些不妥徙硅，所以開始重新又弄了弄hexo榜聂，順便也記錄一下過程。

新建github倉庫

倉庫命名要同github賬戶名關(guān)連嗓蘑，格式如下:
倉庫名：qiansr.github.io
其中qiansr是我的github賬戶名须肆，qiansr.github.io這個(gè)倉庫名也將是你項(xiàng)目的訪問域名。注意“.github.io” 不能省略桩皿。

ssh密鑰創(chuàng)建

ls -al ~/.ssh                                  //檢查是否存在.pub
ssh-keygen -t rss -C “youremail@email.com”    //創(chuàng)建鑰匙對
3. pbcopy < id_rsa.pub                       //拷貝公鑰到剪切板:
4. 添加到gitlab或github賬戶

添加密鑰

進(jìn)入倉庫=>Settings=>Deploy keys
Title:blog
Key:粘貼密鑰
=> add key

測試添加ssh是否成功：

ssh -T git@github.com

==> 如果看到下面這句：Hi后面是你的用戶名豌汇，就說明成功了
Hi qiansr! You've successfully authenticated, but GitHub does not provide shell access.

安裝hexo

cd ～
npm install hexo -g

創(chuàng)建項(xiàng)目：

cd ./blog

vim package.json
A

修改package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.4"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}

ESC + :wq           //保存退出vim
npm install

本地運(yùn)行

hexo server
==>
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在游覽器中輸入 http://localhost:4000/就可以看到你的博客了。

配置hexo與github連接

打開_config.yml文件
修改deploy值泄隔，在最后一行

deploy:
  type: git
  repo: https://github.com/qiansr/qiansr.github.io.git
  branch: master

把qiansr替換成你的github用戶名

部署

hexo d -g

hexo 常用命令

hexo new "postName"         #新建文章
hexo new page "pageName"    #新建頁面
hexo generate               #生成靜態(tài)頁面至public目錄
hexo server                 #開啟預(yù)覽訪問端口（默認(rèn)端口4000拒贱，'ctrl + c'關(guān)閉server）
hexo deploy                 #將.deploy目錄部署到GitHub
hexo help                   #查看幫助
hexo version                #查看Hexo的版本

主題資源

https://www.zhihu.com/question/24422335

hexo 完善博客設(shè)置

Hexo博客綁定域名

參閱《hexo搭建的Github博客綁定域名》：http://www.reibang.com/p/cea41e5c9b2a

更換主題

git clone https://github.com/iissnan/hexo-theme-next themes/next
cd 根目錄
vim _config.yml
找到theme屬性，將其由landscape（默認(rèn)主題）改為next。

主題設(shè)置

這里我選用的是NexT主題
在NexT主題目錄下同樣有一個(gè)名為_config.yml文件逻澳，稱為主題配置文件闸天，在其中找到scheme屬性，
NexT主題默認(rèn)使用Muse模式斜做，你可根據(jù)自己的喜好苞氮，選擇其中一種模式。

預(yù)覽摘要

主題配置文件 auto_excerpt 屬性：
enable: true
length: 150 #想要預(yù)覽到的字?jǐn)?shù)

評論功能

目前多說以掛瓤逼，所以我們這里添加的是友言的評論系統(tǒng)
注冊友言賬號笼吟，獲取uid （后臺管理 => 用戶ID）
打開主題配置文件 找到y(tǒng)ouyan_uid屬性設(shè)置uid

打賞功能

微信收款二維碼     教程: https://jingyan.baidu.com/article/b907e627b641b646e6891c6b.html  
支付寶收款二維碼    教程: http://blog.csdn.net/china8848/article/details/53504223  

二維碼圖片放到NexT根目錄`/source/images/`文件夾下  
開啟打賞功能主題配置文件，在其最后添加打賞的配置信息:

reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享霸旗，您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作赞厕！  
wechatpay: 圖片鏈接或圖片相對路徑  
alipay: 圖片鏈接或圖片相對路徑

側(cè)邊欄

主題配置文件 sidebar的display屬性，display屬性有四種顯示模式：
post // 默認(rèn)顯示方式
always // 一直顯示
hide // 初始隱藏
remove // 移除側(cè)邊欄

添加菜單選項(xiàng)（菜單欄標(biāo)簽頁）

默認(rèn)菜單只有首頁定硝、歸檔皿桑、關(guān)于三個(gè)選項(xiàng)，主題配置文件找到menu屬性蔬啡，通過去掉categories诲侮、 tags、about的的注釋新增標(biāo)簽頁：

// 命令行執(zhí)行下列命令來添加分類頁面
hexo new page "categories"
hexo new page “tags”
hexo new page "about"

會在source 目錄下創(chuàng)建的三個(gè)目錄和各自的index.md文件
打開index.md中在頭部分別添加

type: “categories”
type: "tags"

當(dāng)要為某一篇文章添加標(biāo)簽箱蟆，在tags中添加沟绪，添加分類在categories中添加。

搜索功能

搜索的功能源于第三方服務(wù)——Algolia空猜，接下來看看配置的步驟：注冊Algolia官網(wǎng)绽慈，創(chuàng)建一個(gè)Index。
安裝Hexo Algolia

npm install --save hexo-algolia

如果安裝失敗辈毯，找到package.json文件坝疼，修改其中的hexo-algolia屬性值為^0.2.0，然后再重新安裝
獲取Key谆沃，修改站點(diǎn)配置Algolia官網(wǎng)的Dashboard => API Keys
編輯站點(diǎn)配置文件钝凶，在文件內(nèi)容最后添加如下信息，

ApplicationID: ‘’
Search-Only API Key: 
Admin API Key: 
indexName: 
#其中apiKey就是Search-Only API Key：

更新Index配置好Key后唁影，在Hexo根目錄執(zhí)行hexo algolia來更新Index
啟用配置搜索功能修改主題配置文件耕陷，在其中找到algolia_search屬性，將其enable子屬性改為true据沈，然后再看其labels子屬性哟沫，修改相應(yīng)的提示文本，使之更加適合自己的風(fēng)格

<div color:red>（本人博客配置完了锌介，發(fā)現(xiàn)搜索不到任何內(nèi)容嗜诀，目前不想再搗鼓了，有人遇到類似問題如果解決了麻煩貼一下解決辦法）</div>

閱讀次數(shù)

閱讀次數(shù)統(tǒng)計(jì)是基于第三方服務(wù)——LeanCloud實(shí)現(xiàn)的，其配置詳情如下：
創(chuàng)建LeanCloud賬號進(jìn)入LeanCloud官網(wǎng)完成注冊:創(chuàng)建應(yīng)用選擇開發(fā)版 => 存儲 =>
創(chuàng)建Class名稱為Counter => 選擇無限制選項(xiàng)
配置Key:單擊應(yīng)用Key裹虫，可以看到應(yīng)用的App ID和App Key肿嘲。主題配置文件中融击，在文件中找到leancloud_visitors屬性筑公，將enable設(shè)置為true，然后將之前復(fù)制的ID和Key粘貼到相應(yīng)的屬性中尊浪。

社交鏈接

在主題配置文件中找到social屬性匣屡，在其下方添加社交鏈接，其格式為：

github：鏈接

添加鏈接圖標(biāo)
主題配置文件中找到social_icons拇涤，修改其狀態(tài)值為true捣作，然后配置對應(yīng)鏈接的圖標(biāo)，其格式為：

github: Font Awesome中的圖標(biāo)的名字（區(qū)分大小寫）
Font Awesome平臺沒有的圖標(biāo)鹅士，會顯示默認(rèn)券躁。

友情鏈接
主題配置文件中找到links屬性，修改links_title屬性的值為“友情鏈接”掉盅，然后添加上好友的友鏈名稱和地址也拜，其格式如下：

名稱: 鏈接

語言設(shè)定

在站點(diǎn)根目錄下修改配置文件_cofig.yml中的language為zh-Hans（簡體中文）

增改菜選項(xiàng)

修改在主題目錄下配置文件_cofig.yml中的menu，增添一個(gè)something
修改主題目錄下的languages文件中對應(yīng)的zh-hans.yml文檔
設(shè)置菜單項(xiàng)圖標(biāo)趾痘，對應(yīng)的字段是menu_icons慢哈。格式為item name：icon name，其中item name與所配置的菜單名字對應(yīng)永票，icon name是Font Awesome圖標(biāo)的名字卵贱。

設(shè)置側(cè)欄位置

修改主題目錄下sidebar的position值

設(shè)置頭像

在站點(diǎn)根目錄下載配置文件中新增avatar，值設(shè)置為頭像的鏈接地址侣集。地址可以是網(wǎng)絡(luò)地址键俱，也可以是本地地址（放置在source/images/ 目錄下）

設(shè)置文章代碼主題

在主題目錄下修改配置文件highlight_theme，默認(rèn)值為nomal世分》窖可以設(shè)置為night

NexT主題官方文檔的鏈接

使用 GitHub Issues 搭建評論系統(tǒng)

基礎(chǔ)使用

注冊 OAuth Application
點(diǎn)擊此處 來注冊一個(gè)新的 OAuth Application。其他內(nèi)容可以隨意填寫罚攀，但要確保填入正確的 callback URL（一般是評論頁面對應(yīng)的域名）党觅。
你會得到一個(gè) client ID 和一個(gè) client secret，這個(gè)將被用于之后的用戶登錄斋泄。
引入 Gitment
將下面的代碼添加到你的頁面：

<div id="container"></div>
<link rel="stylesheet" >
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '頁面 ID', // 可選杯瞻。默認(rèn)為 location.href
  owner: '你的 GitHub ID',
  repo: '存儲評論的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

注意，上述代碼引用的 Gitment
將會隨著開發(fā)變動(dòng)炫掐。如果你希望始終使用最新的界面與特性即可引入上述代碼魁莉。
如果你希望引用確定版本的 Gitment，則應(yīng)該使用 npm 進(jìn)行安裝。

npm install --save gitment

關(guān)于構(gòu)造函數(shù)中的更多可用參數(shù)請查看 Gitment Options

初始化評論
頁面發(fā)布后旗唁，你需要訪問頁面并使用你的 GitHub 賬號登錄（請確保你的賬號是第二步所填 repo 的 owner）棕孙，點(diǎn)擊初始化按鈕。之后其他用戶即可在該頁面發(fā)表評論能庆。

自定義
Gitment 很容易進(jìn)行自定義鸵贬，你可以寫一份自定義的 CSS 或者使用一個(gè)新的主題。（主題可以改變 DOM 結(jié)構(gòu)而自定義 CSS 不能）
比如你可以通過自定義主題將評論框放在評論列表前面：

const myTheme = {
  render(state, instance) {
    const container = document.createElement('div')
    container.lang = "en-US"
    container.className = 'gitment-container gitment-root-container'
    container.appendChild(instance.renderHeader(state, instance))
    container.appendChild(instance.renderEditor(state, instance))
    container.appendChild(instance.renderComments(state, instance))
    container.appendChild(instance.renderFooter(state, instance))
    return container
  },
}

const gitment = new Gitment({
  // ...
  theme: myTheme,
})

gitment.render('container')

更多自定義內(nèi)容請查看文檔屎媳。

其他問題

語言問題
考慮到 GitHub 本身使用英文夺溢，而本項(xiàng)目面向用戶均為 GitHub 用戶，所以作者沒有提供中文支持的打算烛谊。實(shí)在有需求的可以通過自定義主題支持中文风响。

Q&A

問：本地部署成功了，也能預(yù)覽效果丹禀，但執(zhí)行hexo d -g后状勤，使用 username.github.io 訪問，無效果
答：首先確認(rèn) hexo d 命令執(zhí)行是否報(bào)錯(cuò)双泪，如果沒有報(bào)錯(cuò)持搜，再查看一下你的 github 的 username.github.io 倉庫，你的博客是否已經(jīng)成功提交了攒读。如果沒有成功朵诫，則查看你的本地git倉庫的用戶名和郵箱l設(shè)置是否和github賬號郵箱一致。

git config user.emial
git config user.name

如果不一致要改為一致才行

git config user.emial github郵箱
git config user.name github賬戶名

重新執(zhí)行：

hexo d -g

再檢查是否成功薄扁。

問：多設(shè)備維護(hù)剪返？

新建hexo分支  
git remote add origin https://github.com/用戶名/倉庫名.git
git checkout -b 分支名
git add .
git commit -m ""
git push origin hexo

#其他設(shè)備上clone下Github上新建的分支的文件到本地  
#在另一臺設(shè)備上使用git指令下載Github新建分支上的文件:  

git clone -b 分支名 https://github.com/用戶名/倉庫名.git
npm install  
同步項(xiàng)目源文件到Github
git add .
git commit -m ""
// 先拉原來Github分支上的源文件到本地，進(jìn)行合并
git pull origin 分支名
// 比較解決前后版本沖突后邓梅，push源文件到Github的分支
git push origin 分支名

運(yùn)行hexo g報(bào)錯(cuò)?

FATAL Something's wrong...

這個(gè)問題我出現(xiàn)多次脱盲，是由于你寫的markdowan語法有問題。檢查對比語法看看是否正確日缨，例如使用了代碼中的符合
https://segmentfault.com/q/1010000003987383

替換markdown 默認(rèn)渲染引擎
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

推薦資源
https://www.0101tx.com/categories/Hexo/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末钱反，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子匣距，更是在濱河造成了極大的恐慌面哥，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,591評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件毅待，死亡現(xiàn)場離奇詭異尚卫，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)尸红，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門吱涉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來刹泄，“玉大人，你說我怎么就攤上這事怎爵√厥” “怎么了？”我有些...
    開封第一講書人閱讀 162,823評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵鳖链，是天一觀的道長姆蘸。 經(jīng)常有香客問我，道長撒轮，這世上最難降的妖魔是什么乞旦？ 我笑而不...
    開封第一講書人閱讀 58,204評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任贼穆，我火速辦了婚禮题山，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘故痊。我一直安慰自己顶瞳，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布愕秫。 她就那樣靜靜地躺著慨菱，像睡著了一般。 火紅的嫁衣襯著肌膚如雪戴甩。 梳的紋絲不亂的頭發(fā)上符喝，一...
    開封第一講書人閱讀 51,190評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音甜孤，去河邊找鬼协饲。 笑死，一個(gè)胖子當(dāng)著我的面吹牛缴川，可吹牛的內(nèi)容都是我干的茉稠。 我是一名探鬼主播，決...
    沈念sama閱讀 40,078評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼把夸，長吁一口氣：“原來是場噩夢啊……” “哼而线！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起恋日，我...
    開封第一講書人閱讀 38,923評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤膀篮，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后岂膳，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體誓竿，經(jīng)...
    沈念sama閱讀 45,334評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年闷营，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了烤黍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片知市。...
    茶點(diǎn)故事閱讀 39,727評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖速蕊，靈堂內(nèi)的尸體忽然破棺而出嫂丙，到底是詐尸還是另有隱情，我是刑警寧澤规哲，帶...
    沈念sama閱讀 35,428評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布跟啤，位于F島的核電站，受9級特大地震影響唉锌，放射性物質(zhì)發(fā)生泄漏隅肥。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一袄简、第九天 我趴在偏房一處隱蔽的房頂上張望腥放。 院中可真熱鬧，春花似錦绿语、人聲如沸秃症。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0贊 22
  • 一樁弒父案吕粹，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽种柑。三九已至，卻和暖如春匹耕，著一層夾襖步出監(jiān)牢的瞬間聚请，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工稳其， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留驶赏，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,734評論 2贊 368
  • 代替公主和親
    正文 我出身青樓欢际，卻偏偏與公主長得像母市，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子损趋，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評論 2贊 354