配置Hexo的历程和一些bug解决方案

2020-01-28

字数统计: 995字 | 阅读时长≈ 4分钟

这篇主要来讲讲我怎么入手搭建自己的Hexo博客。我主要是按照这篇教程Hexo+Github博客搭建完全教程来做的，感谢洪卫，他已经写的非常详细了。请大家按照这个教程先做下去！有遇到其他问题可以来看看我的回答，也许能帮到你哦。我主要会补充一些这篇文章中没有提到的问题和解决方案。

1. 安装hexo报错bash: hexo: command not found

在验证npm和node安装正确的情况下,输入npm install -g hexo-cli这条语句后，会经过漫长等待并出现很多error，再输入hexo -v报错bash: hexo: command not found说没有安装成功。这是国内镜像源的问题，使用淘宝镜像安装。先输入npm config set registry "https://registry.npm.taobao.org"，再输入npm install hexo-cli g。就会加快安装并且成功啦。

2. hexo init 超级慢

使用淘宝镜像初始化，在hexo init MyBlog之前，先输入npm --registry https://registry.npm.taobao.org info underscore，然后再输入hexo init MyBlog，接着就可以照着洪卫的博客继续做下去啦。

3. ssh-key 配置

当输入完ssh-keygen -t rsa -C "youremail"之后，系统会让你输入一个文件夹路径来保存id_rsa.pub和id_rsa文件，建议你输入你的博客的完整根目录。比如我的就是D:\software\web storm project\EvaBlog。在github上传公钥的时候，就可以找到这个文件id_rsa.pub将内容复制过去。也许你会收到报错Permission denied (publickey)，很大概率是因为网速，你过一会儿再试一遍ssh -T git@gitee.com，就能看到对你say Hi和告知successfully了！

4. 免去每次提交时输入Github用户名和密码的方法

更改_config.yml文件最后deploy属性：

deploy:
  type: git
  repository: git@github.com:你的用户名/你的用户名.github.io.git
  branch: master

5. 用markdown语法`![](/img.png)`本地图片显示不出来

更新

hexo5之后参考这个方法进行配置hexo博客如何插入图片，仍然使用![](img.png)方法。

旧解决方案

参考链接:

hexo官方资源文件夹设置

hexo引用本地图片无法显示

这是hexo的问题。首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image。

安装：npm install https://github.com/CodeFalling/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;
}

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();
    }

  }
});

然后将所引用的图片放在_posts下与文章同名文件夹下

用hexo语法，如我的示例引用：

 {% asset_img 文件路径示例截图.PNG %}

请注意你的图片命名不要有空格，不然也会不显示。
之后你的博客文章引用的图片在主页和归档等子页面都可以正常显示了。

打赏