Hexo在github上构建免费的web应用

Hexo在github上构建免费的web应用

本文简单记录在github上构建web应用，包括Hexo安装、Hexo的一些基本命令、Hexo的一些问题、为web网站添加评论和微博秀。

hexo安装

参考：Hexo在github上构建免费的Web应用
1. 下载nodejs，安装以后，会自动将node的一些命令添加到环境变量，包括npm这个安装工具。
2. 在命令行中输入”npm install -g hexo”，就安装完毕，然后运行”hexo version”，有显示就行。

hexo基本命令

可以从我的github上fork我的文件（忽略第一个步骤），或者自己构建。
1. 新建文件夹，然后在命令行中进入相应目录（假如名字为hexo-blog-source)，执行命令npm init或者之前没有新建文件夹，然后执行命令hexo init hexo-blog-source，hexo会自动创建一个文件夹，名字为”hexo-blog-source”。
2. 修改根目录下的”_config.yml”文件，修改参考我的源代码。
2. 进入”hexo-blog-source”,运行命令npm install,原因是在git的时候，忽略了”node_modules”这一个文件夹，如果不运行这个命令，会出现”hexo 没有在本地”什么的错误提示。运行这个命令以后，就能在根目录下生成一个叫”node_modules”的文件夹，这样就能接着往下跑了。
3. 运行命令hexo g[erate] -p 端口号（默认4000）,会在_config.yml中public_dir对应的目录产生静态文件。(运行命令hexo g -d可以直接完成部署，只是我的总是报错，暂未解决，部署的话后面会有介绍)
4. 运行命令hexo s[erver]，会启动hexo自带的服务器，然后你就能在http://localhost:4000看到自己的网站雏形了。
5. 运行命令hexo new "xxx"，会在source/_posts/文件夹下生成一个md文件，编辑即可。

hexo部署

这个不想多讲，因为我的运行有错误，

Error: spawn git ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

我参考了leyar的日志，虽然我的是用的github报错了，但还是没有解决。然后我就手工上载到我的github空间。推荐几个网站:hexo官方部署文档,还可以参考leyar的hexo部署日志,尽管他的是在Linux下的，windows下也一样。

hexo问题

主要是中文乱码问题：我使用汉语修改了皮肤和配置文件里面的一些东西以后，出现乱码。主要是文件编码是ANSI，然后转换成utf8就行。

设置hexo皮肤

我使用的是A-limon的pacman皮肤。他使用的markdown样式表为chjj的marked,对于GFM好像支持，但是有些支持的不是很好，待修正。你也可以选则别的皮肤。
1. 将中意的theme下载到/themes/文件夹下，比如我的是pacman，那么就对应/themes/pacman。
2. 编辑项目根目录文件下的_config.yml,找到theme一行，改成theme:pacman即可。
3. 此时再跑，奇迹发生了吧。

添加about、评论、分享、微博秀等插件

首先，我使用的pacman文件目录下有个_config.yml，设置对应项的值就可以改变。

#### Comment
duoshuo: 
  enable: true  ## duoshuo.com
  short_name: wutongjie23hao   ## duoshuo short name.

#### Share button
jiathis:
  enable: true ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id: 2033935 ## e.g. 1501277 your jiathis ID. 
  tsina: 1745728450 ## e.g. 1664838973 Your weibo id,It will be used in share button.

其中评论用的是多说，分享用的是jiathis,已经做了本土化处理。
当然，如果是别的皮肤的话，要自己设置，设置多说评论、百度分享、微博秀参考zippera’s blog,然后，设置disqus评论，参考粉丝日志,不过很慢。皮肤默认的分享也是twitter、google+等登不上的东东。
* 备注 *：多说中，

data-thread-key="<%- page.path %>"
data-title="<%- page.title %>"
data-url="<%- page.permalink %>"

显示数学公式

参考粉丝日志。
* themes/**/layout/_partial/ 文件夹下添加mathjax.ejs.代码为：

<!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

• 在themes/pacman/layout/_partial/after_footer.ejs里添加对mathjax.ejs的引用。看源码。

其它

• 从零开始nodejs系列文章
• 添加RSS、sitemap、百度统计或google analytics、fork me on github(pacman上有选项，我还没做)
• hexo博客的配置和使用
• 托管博客到STDYUN
• 工具:制作ico、Image to data URI
• 整合google自定义搜索CSE,我登不上谷歌，所以没有试一下