hexo静态博客系统搭建总结-1

从事前端工作有段时间了，想停下脚步总结一下，相信对自己对团队都会有帮助。

以前搭过个人网站www.icommon.net，由于使用了数据库非常慢。这次选择静态博客系统hexo，hexo的官网是https://hexo.io/。

域名一直都续着费，空间在淘宝花了几块钱买了一个月试用一下。

下面是使用hexo的初体验，也发布了第一篇文章在个人网站上，深入的还没用到，下次再写：

 安装

先决条件是安装node.js和git。
然后安装hexo全局命令：

$ npm install -g hexo-cli

初始化站点，其中blog改成你自己的文件夹名称：

$ hexo init blog
$ cd blog

启动站点：

$ hexo server

新建文章：

$ hexo new hexo使用说明

基本信息配置

在根目录_config.yml文件中进行基本信息的配置，注意冒号后面要加一个空格，否则会报错：
title首页标题；
subtitle子标题；
language语言版本为zh-CN；
url设置为站点域名，在搜索引擎里会用到；

添加多说

去多说首页点击我要安装。
创建完后记住多说域名，如icommon.duoshuo.com。
在_config.yml中添加一个字段：

duoshuo_shortname: 刚才那个多说域名中第一部分，如icommon

修改themes\landscape\layout_partial\article.ejs模板

把：

<% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
<% } %>

 改为： 

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
<% } %>

添加百度统计

/themes/landscape/layout/_partial/文件夹下新建baidu-analytics.ejs，将百度统计的代码复制进去
找到/themes/landscape/layout/_partial/head.ejs，将<%- partial(‘google-analytics’) %>替换为<%- partial(‘baidu-analytics’) %>

其它修改

解决jquery无法访问的问题

由于google被墙，找到该文件/themes/landscape/layout/_partial/after-footer.ejs
替换//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js为//lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js

解决fontawesome-webfont.woff无法访问的问题

给web服务器添加MIME类型：
.woff：font/x-font-woff

解决atom.xml不存在的问题

$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save

部署

生成静态文件

$ hexo generate

然后把public目录下的文件上传到服务器即可。