【博客搭建】Hexo builds blogs

Hexo搭建博客

准备工具：

Github用户名、密码；

Node.js:https://nodejs.org/zh-cn

Git:https://git-scm.com/downloads

一路默认安装,cmd显示相应版本即为成功：

本地git连接Github：

git config --global user.name "username"

git config --global user.email "email"

接着创建SSH密钥：

ssh-keygen -t rsa -C "email"

之后默认回车即可

接着Github添加密钥：

C:\\Users\\username\\.ssh  打开id_rsa.pub文件全选内容复制

接着登录Github网站，个人Setting设置里面，选择SSH and GPG keys，点击 New SSH key，

Title字段随意，例如hexo，粘贴复制的 id_rsa.pub内容到Key中，点击 Add SSH key完成添加：

对连接进行验证：ssh -T git@github.com

输入yes之后回车，若显示 “Hi xxx! You’ve successfully……” 即连接成功。

创建Github仓库，命名同自己的账户，例如账户名称为test，仓库名称为test.github.io

本地安装Hexo：

npm config set proxy null

npm config set https-proxy null

npm config set registry <http://registry.npmjs.org/>    #这三步是设置npm的默认仓库源

npm install -g hexo-cli

hexo init      # 初始化,必须创建一个空的文件夹，作为hexo根目录

npm install    # 安装组件

安装完成后，在hexo根目录依次输入命令：hexo g ； hexo s即可启动hexo服务，默认开启在http://localhost:4000

最后就是部署hexo到GithubPages：

安装hexo-deployer-git：npm install hexo-deployer-git --save

然后修改 hexo根目录_config.yml文件末尾的 Deployment 部分，修改成如下：

deploy:  
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

保存退出，根目录运行hexo d即可部署到GithubPages

此时访问博客地址：https://username.github.io/即可访问到博客。

为方便上传图片，安装图片插件：

npm install https://github.com/CodeFalling/hexo-asset-image --save

修改config.yaml文件中post_asset_folder字段，将默认的false改变为true，此时每次运行hexo new “title”的时候，会自动在sourse/_post目录同步创建md文件和同名文件夹，将图片放入文件夹使用md格式链接图片地址即可。

还有一种安装插件的方法：

npm install hexo-asset-image --save

同样修改config.yaml文件中post_asset_folder字段，将默认的false改变为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;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       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(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\\' to '/'.
            var src = $(this).attr('src').replace('\\\\', '/');
            if(!/http[s]*.*|\\/\\/.*/.test(src) &&
               !/^\\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 != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

这种方式和第一种效果一样，但是实测的时候可能无法正常显示图片。