Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官方文档请点击这里。这里我们将使用Hexo来创建一个静态博客，然后接入评论系统，并将其部署到github上。
个人站点：https://whl1207.github.io/，记录一些学习笔记，主要写点基于anylogic的仿真和web开发方面的知识点。有兴趣的同学可以探讨一下！
一、安装环境
（一）安装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
（一）发布文章
1、使用命令行发布文章
$ hexo new "My New Post"
更多信息: Writing
2、或者直接在文件夹中放入markdown文件，文件夹在\source_posts路径下。相关操作参见markdown文件的语法格式。
（二）计算静态文件
$ hexo generate
生成的静态文件位置位于hexo根目录下的/.deploy_git文件夹中。
更多信息参考: Generating
（三）部署到个人github仓库
1、安装hexo-deployer-git自动部署发布工具
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
更多信息参考：部署
三、添加图片
先执行以下代码：
npm install hexo-asset-image --save
完成安装后用hexo新建文章的时候会发现_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平台设计开发的一套响应式模板，体积只有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、创建一个开发版应用。进入创建好的应用，在"设置/安全中心/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 href="//twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
'<a href="//www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
'<a href="//service.weibo.com/share/share.php?title=' + 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('');
来更改分享按钮。
网友评论