第一篇博客

2014-09-15

终于用『Hexo』搭建完博客，感谢Litten提供的Yilia主题，真是爱不释手。以后，这里就是我的小窝啦。

先把整个流程梳理一遍，算是个hello world吧。

一、Hexo

安装

如果提示npm没安装，可以参考『Mac环境』。

$ npm install hexo-cli -g #全局安装hexo
$ hexo init blog #hexo初始化，blog为新建文件夹名
$ cd blog
$ npm install #安装三方包
$ hexo s #同hexo server，启动本地服务

$ hexo help #命令帮助
$ hexo new "NewPost" #添加文章
$ hexo clean #清空打包文件
$ hexo g #同hexo generate，静态文件打包生成，在public目录

启动完成后，会提示您访问的地址为http://localhost:4000/，你就可以在浏览器上访问啦。

主题更换

说实话，hexo默认给的主题，只能是凑活。如果要逼格高一点，那就得自己动手了。hexo官网有推荐一些『Theme』，可以链接到github上下载，现在使用的『Yilia主题』的资源可以点击查看。把他clone到本地，保存在目录/themes下即可。下图是我自己目前保存的一些主题。

那怎么实施主题的切换呢？可打开根目录的_config.yml配置文件，找到”theme: “这一行，修改成/themes的对应主题名称即可。例如”theme: yilia”。

在yilia文件夹下同样有个_config.yml，可进行该主题下的相关配置，例如头像、链接等

tag功能需要安装模块

1	$ npm install hexo-generator-json-content --save

# 在根目录_config.yml里添加配置
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

支持图片资源

刚写两篇，发现处理图片、数学公式等资源好麻烦，我在macdown上进行编辑时预览插入图片，hexo g自动生成后，发现图片没有到/public里面去，当然在发布时还需要手动挪动图片，真是鱼和熊掌不可兼得嘛？

看了下官方文档的『asset-folders』，原来提供了一种方便的方式。

安装插件

1 2	$ npm install hexo-asset-image --save #安装图片插件 # 然后在_config.yml配置文件中设置支持post_asset_folder为true

打开/node_modules/hexo-asset-image/index.js，替换为如下：

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
	var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		// For windows style path, we replace '\' to '/'.
        var src = $(this).attr('src').replace('\\', '/');
        if(!/http[s]*.*|\/\/.*/.test(src)){
		  // For "about" page, the first part of "src" can't be removed.
		  // In addition, to support multi-level local directory.
		  var linkArray = link.split('/').filter(function(elem){
		    return elem != '';
		  });
		  var srcArray = src.split('/').filter(function(elem){
		    return elem != '';
		  });
		  if(linkArray[linkArray.length - 1] == srcArray[0])
		    srcArray.shift();
          src = srcArray.join('/');
          $(this).attr('src', '/' + link + src);
        }
      });
      data[key] = $.html();
    }
  }
});

直接使用hexo new “xxx”，即可同时生成md文件和同名文件夹，将这篇博文所有的需要用到的图片放入，引用图片时，链接的路径为“(文件夹名/***.jpg)”，满足本地写作时预览的需要。当发布时，hexo g命令生成后，会发现会自动将图片放到发布的静态文件夹，且图片路径有了完美的生成。

支持数学公式

由于hexo不直接支持lateX，因此使用katex代替，推荐使用hexo-tag-katex

1	$ npm install hexo-tag-katex --save #安装数学公式插件

打开/node_modules/hexo-tag-katex/index.js，更换katex的静态资源国内cnd地址，例如替换为如下

hexo.extend.filter.register('after_post_render', function(data){
	data.content = util.htmlTag('link',{
		rel: 'stylesheet',
		type: 'text/css',
		href: 'https://iherr.cn/npm/katex@0.6.0/dist/katex.min.css'
	}) + data.content;

	return data;
});

使用方式：

{% katex [displayMode] %}

a^{b^{\sqrt{c}}}

{% endkatex %}

katex语法，和lateX有些区别，可参考官方文档『传送门』。

二、Markdown

Markdown使用场景

以前只在github上接触了下md文件，遇到倒是简单，也通用。如今自己搭建博客，便得系统的了解下Markdown了。

说到使用场景，基本有以下几种：

需维护型文档：文档需要在多平台使用，如邮件、wiki平台、同事传阅、网站发布等。一般文档常用Word来写，但是如果文档一需要在网上发布就麻烦了，格式没有跟过来。如果一开始就是markdown语法，可以通用解决。
项目文档：项目文档一般都是用md来写的，github的项目的Readme.md就是markdown文档。
创意简历、博客：还有一种装逼手段就是用markdown来编写博客和简历，那绝对是创意来着的，适合程序员。

Markdown语法

语法这玩意，我也是现学，找到一篇Markdown的文章，可以参考『Markdown 语法说明』

表格

大项	说明
1	111
2	222
3	333

[x]张三
[x]李四
[ ]王五

如需要使用html的table标签，hexo有多个空行的bug，需要删除table元素的所有换行符，或者使用

1
2
3

{% raw %}
table content
{% endraw %}

Markdown工具

在线工具，作为一名简书控，平常写文章时，便使用的简书在线的Markdown编辑器了。
微软的VSCode
Typera
Mac下推荐『MacDown』，试了下对照预览、插入链接(Command+Shift+K)、图片(Command+Shift+I)，都还算方便。

好啦，这玩意够用就好。不需要太精通。

三、部署相关

静态页面托管到GitHub Pages

以上，您只能在本地浏览自己的博客，那如果需要放到网上供他人浏览呢？其实这里的方法有很多，比如自己弄台VPS云服务器等，但这不是有成本嘛。像阿里云最低配的基本也是需要100RMB/月，放博客不划算。

其实大家一般都推荐使用『GitHub Pages』来进行托管，无非是把“生成静态文件”步骤的文件上传到github上。具体的流程可以参考官网。唯一需要注意的是，托管的项目名称，必须以你的github的用户名起，例如我的github用户名是nisoch，那么我简历的项目名就是nisoch.github.io，后续上传后访问的地址也是https://nisoch.github.io/。

好啦，可以把这个地址发给小伙伴，或者自己访问了。

域名跳转

看到其他大神的博客，都是有自己的域名，叫人好生羡慕。那么，从哪里才能弄到呢？
这里不是做广告，而是我自己的域名是从『阿里云的万网』买的，购买域名的途径也很多其他途径，其实有一些很好的国际域名，例如『Godaddy』。

域名也买到了，开始做跳转指向了。无非是把刚买的宝贝域名，链接到GitHub Pages的域名上。

还是以万网举例，对CNAME类型，将www和@都指向自己的GitHub Pages的域名。如下图所示。

另外，为了保证GitHub Pages上能够识别，还需要一个CNAME文件，没有后缀，里面的内容为我们购买的域名地址，例如我的就是iherr.cn。

好啦，打完收工，可以使用自己的个性域名来访问了，快来试试吧。

添加百度统计

真是拿做商业网站的规则来写博客呀，还是加个百度统计吧，虽然也没多少人看，也不需要分析。

编辑文件 themes/yilia/_config.yml,添加一行配置，可以删除原来的google analytics

1	baidu_tongji: true

新建themes/yilia/layout/_partial/baidu_tongji.ejs，内容如下：

<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申请的百度统计代码
</script>
<% } %>

编辑themes/yilia/layout/_partial/head.ejs，在head尾部标签前添加

1	<%- partial("baidu_tongji") %>

部署

1	$ npm install --save hexo-deployer-git