博客

Hexo建站并自定义步骤

前段时间稍微折腾了一下 Octopress，被其自由、强大的功能能所吸引，毅然决然地将博客搬到了 Octopress+Github 上。但随着博客数量的增多，其速度慢的弊端逐渐显现，这时候，基于nodejs 的hexo闪电般地出现了，其速度简直是 blazingly fast。于是，不出所料地，又搬到了 hexo 上。

搭建 hexo 的博客也很简单，从 Octopress 的内容迁移也只需把当时 post 下面的 .md 文件移到 source/_post 下面即可。但功能上的完善还是需要一定的技巧的。

  • 安装 hexo

    首先，要有 node。Mac 可以 brew install node，Linux 则可以方便地 apt-get。安装好 node 以后，npm install hexo -g，搞定！

  • 创建并配置 hexo

    运行 hexo init myblog，然后修改其下的_config.yml 文件，自定义博客名等内容。

  • 启用 MathJax 支持数学公式编写

    1. 首先安装 hexo-math 插件
      npm install hexo-math --save
    2. 然后初始化
      hexo math install
    3. 编辑_config.yml:
1
2
plugins:
- hexo-math

  • 启用本地图片支持

    npm install hexo-local-image --save，然后添加到_config.yml。

  • 使用 Vim 高亮代码

    npm install vim-tag-vimhighlight，并添加到_config.yml。然后在代码前后加上前缀<hexoescape>0</hexoescape>. 效果如下：

;*****************************************************
load "$NCARG_ROOT/lib/ncarg/nclscripts/csm/gsn_code.ncl"
load "$NCARG_ROOT/lib/ncarg/nclscripts/csm/gsn_csm.ncl"
;*****************************************************
begin
  gsn_define_colormap(wks,"rainbow")
  gsn_reverse_colormap(wks)
  type                      = "eps"
  type@wkColorModel         ="cmyk"
  wks                       = gsn_open_wks(type,"NPP")

  res@cnLevelSelectionMode  = "ExplicitLevels"
  res@cnLevelSelectionMode  = "ManualLevels"
  res@cnMinLevelValF        = 0.0001
  
  startd = 20110101
  ssdate = yyyymmdd_to_yyyyddd(startd)
  do idate = 0,180
    date = yyyyddd_to_yyyymmdd(ssdate+idate)
    print("Now idate and date:  "+ idate +" ; "+ date )
     do hr = 0,23
       shr = sprinti("%0.2i",hr)
       filename = date+shr+".nc"
       ... ...

  • 支持 RSS
    npm install hexo-generator-feed --save
    _config.yml plugins

  • 支持 SiteMap
    npm install hexo-generator-sitemap --save
    _config.yml plugins

  • 去掉 tag，只保留 tagcloud
    拷贝默认的 landscape 为 myls，编辑 themes/myls/_config.yml 去掉 其中的 tag，保留 tagcloud.

  • 修改默认模板，加入 categories
    为了生成 post 时默认生成 categories 配置项. 在 scaffolds/post.md 中，添加一行 categories:。并可在内容中添加任何想加入到模板中的内容，如{vimhl} 和{!--more--}，同理可应用在 page.md 和 photo.md。

  • 修改模板图片 自行修改 themes/myls/source/css/images/banner.jpg，使题图和主题配合更好；同时可对应修改themes/myls/source/css/_variables.styl 中banner-height，以更好地匹配。

  • 添加 icon 小图标 在themes/myls/layout/_partial/head.ejs里将 <link href="<%- config.root %>favicon.png" rel="icon">替换为<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">。将 favicon.ico 图标文件放在 source 目录下。

  • 添加微博秀 到新浪微博开放平台 生成微博秀代码，将生成的代码保存为 weibo.ejs 到 themes/myls/layout/_widget 目录中，并在 themes/myls 目录下的_config.yml 中的 widget 栏添加 - weibo 即可。

  • 添加百度 share
    添加“百度分享”到百度分享获得代码，在 themes/myls/layout/_partial/article.ejs 中，将 &lt;%-partial(&#39;post/share&#39;)%&gt; 删掉，替换为 百度分享的代码。

  • 添加多说和 disqus
    Disqus 和多说在国内外各有用处，因此最好都加上。修改 themes/myls/layout/_partial/article.ejs ，添加 一部分代码 即可

  • 安装百度统计

    1. 去 百度统计 获取统计代码

    2. 配置.

    vim themes/myls/layout/_partial/baidu_analytics.ejs
    <% if (theme.baidu_analytics){%>
    <script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F05f071cca0ab1e718d2fa8a39d743f89' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <% } %>
    view raw baidu_analytics.ejs hosted with ❤ by GitHub 
3.  add configuration. 

vim themes/myls/_config.yml
baidu_analytics: true