Hexo是一個快速曼玩、簡潔且高效的博客框架狼牺。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內败匹，即可利用靚麗的主題生成靜態(tài)網頁。官方文檔請點擊這里讥巡。這里我們將使用Hexo來創(chuàng)建一個靜態(tài)博客掀亩，然后接入評論系統，并將其部署到github上欢顷。
個人站點：https://whl1207.github.io/槽棍，記錄一些學習筆記，主要寫點基于anylogic的仿真和web開發(fā)方面的知識點抬驴。有興趣的同學可以探討一下炼七！
一、安裝環(huán)境
（一）安裝git
git官方網站是https://git-scm.com/
1布持、下載安裝git豌拙，如遇到下載慢的情況請使用taobao鏡像網站
（二）安裝node.js
點擊node.js官網下載node.js。
（三）安裝hexo
1题暖、使用該命令在cmd中使用node.js下載hexo按傅。
$ npm install hexo-cli -g
2、使用cd進入需要的文件夾
$ cd blog
3胧卤、windows系統下使用如下命令初始化文件夾
$ hexo init
$ npm install
4唯绍、打開站點服務
$ hexo server
5、然后在瀏覽器輸入localhost:4000即可訪問站點
更多信息參考: Server
二枝誊、使用hexo
（一）發(fā)布文章
1推捐、使用命令行發(fā)布文章
$ hexo new "My New Post"
更多信息: Writing
2、或者直接在文件夾中放入markdown文件侧啼，文件夾在\source_posts路徑下牛柒。相關操作參見markdown文件的語法格式。
（二）計算靜態(tài)文件
$ hexo generate
生成的靜態(tài)文件位置位于hexo根目錄下的/.deploy_git文件夾中痊乾。
更多信息參考: Generating
（三）部署到個人github倉庫
1皮壁、安裝hexo-deployer-git自動部署發(fā)布工具
npm install hexo-deployer-git --save
2、配置部署信息
在hexo文件夾的_config.yml文件中配置部署信息哪审。
deploy:
type: git
repo: <repository url> #https://github.com/a/b
branch: [branch]
message: [message]
3蛾魄、最簡單的部署命令：
$ hexo deploy
如遇到問題時，請使用如下命令進行一系列操作：
$ hexo clean && hexo g && hexo d
更多信息參考：部署
三、添加圖片
先執(zhí)行以下代碼：
npm install hexo-asset-image --save
完成安裝后用hexo新建文章的時候會發(fā)現_posts目錄下面會多出一個和文章名字一樣的文件夾滴须。圖片就可以放在文件夾下面舌狗。結構如下：
本地圖片測試
├── logo.jpg
本地圖片測試.md
這樣的目錄結構（目錄名和文章名一致），只要使用
就可以插入圖片扔水。
但現在只能在本地預覽顯示出照片痛侍，若要在blog上顯示圖片還需要做一些調整。
打開\node_modules\hexo-asset-image\index.js文件進行一些修改魔市，將：
$(this).attr('src', config.root + link + src);
改為
$(this).attr('src', '.'+ config.root + src);
即可在blog中正常顯示圖片主届。
運行下面的命令來試試吧。
$ hexo clean && hexo g && hexo s
四待德、使用主題模板
這里我們使用Maupassant主題君丁。Maupassant最初是由Cho大神為Typecho平臺設計開發(fā)的一套響應式模板，體積只有20KB将宪，在各種尺寸的設備上表現出色绘闷。由于其簡潔大氣的風格受到許多用戶喜愛，目前也已經被移植到了多個平臺上较坛。
（一）主題安裝
安裝主題和渲染器：
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save
編輯Hexo目錄下的 _config.yml簸喂，將theme的值改為maupassant。
注：若npm install hexo-renderer-sass安裝時報錯燎潮，可能是國內網絡問題喻鳄，請嘗試使用代理或者切換至淘寶NPM鏡像安裝。
（二）功能配置
功能配置參見Maupassant配置确封，該頁介紹了Maupassant配置中變量的含義除呵，也可以直接在/themes/maupassant/_config.yml文件中進行修改。
四爪喘、接入評論系統
在本博客中使用valine來接入評論颜曾，具體操作辦法如下：
（一）注冊Leancloud
1、點擊進入LeanCloud官網
2秉剑、創(chuàng)建一個開發(fā)版應用泛豪。進入創(chuàng)建好的應用，在"設置/安全中心/web安全域名"中填入blog域名侦鹏。
3诡曙、在"設置/應用key"中查看App ID和App Key,
（二）配置hexo
在/themes/maupassant/_config.yml文件中進行如下配置：
valine: ## https://valine.js.org
enable: true ## 開啟評論功能.
appid: XXXXXXXXXXX ## LeanCloud中的 App ID
appkey: vuiHwI73GTkGJd6piGCGV48v ## LeanCloud中的App Key,
notify: false ## 郵件喚醒，參見https://github.com/xCss/Valine/wiki/Valine-評論系統中的郵件提醒設置
verify: false ## 校驗碼
placeholder: '說點啥呢略水？' ## 默認評論
avatar: "mm" ## Gravatar type价卤，參見https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
pageSize: 10 ## 評論分頁數
guest_info: nick ## 需要填寫的屬性
（三）提交修改
運行下面的命令來試試吧。
$ hexo clean && hexo g && hexo d
五渊涝、添加分享插件
輸出以下命令安裝分享插件
$ npm install hexo-helper-qrcode
在/themes/maupassant/_config.yml文件中進行如下配置：
修改
shareto: false
為：
shareto: true
更改分享的類型慎璧，在/themes/maupassant/source/js/share.js文件中的
var html = [
'<div id="' + id + '" class="article-share-box">',
'<input class="article-share-input" value="' + url + '">',
'<div class="article-share-links">',
'<a + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
'<a + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
'<a + title + '&url=' + encodedUrl + '&searchPic=true&style=number' + '" class="article-share-weibo" target="_blank" title="Weibo"></a>',
'<a href="' + qrcode_img + '" class="article-share-qrcode" target="_blank" title="QR code"></a>',
'<div class="qrcode"><img src=' + qrcode_img + '></div>',
'</div>',
'</div>'
].join('');
來更改分享按鈕床嫌。
