基于 Hexo 搭建个人博客

博客 评论

1、安装前提环境

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

2、安装 Hexo

1
npm install -g hexo-cli

hexo-cli 会安装 hexo 本身以及相关依赖

3、初始化博客

1
hexo init [folder-name]

此命令会在当前路劲，创建一个以 folder-name 的文件夹，文件夹内的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

  • _config.yml : hexo 的配置参数，关于参数的具体意义，请参考官方文档 hexo-配置
  • package.json : 维护的是博客所依赖的 node.js 的依赖包
  • scaffolds : 三种编辑模式 post、draft、page 的模板，所有的文档在生成静态网页的时候，都会根据自身的模式去继承指定的模板。
  • source ： 用户的原始文档，以及自动依赖文档的存放位置。
  • themes : 存放主题的地方。

4、新建一篇不带本地图片的文章

1
hexo new {$title-name} --path blog/Quick-Start

在 source/_posts/blog 文件夹下创建了一个 Quick-Start.md 文件，title 名称为 {$title-name},这是原始文章

5、将博客文件生成静态页面

1
2
3
hexo g  
或
hexo generate

6、本地运行博客系统

1
2
3
hexo s  
或
hexo server

7、部署到 github 上

1
2
3
hexo d
或
hexo server

将 hexo 部署到 github 上，需要首先执行 npm isntall hexo-deployer-git,安装插件。同时在 _config.yml 文件中设置 deploy 属性：

1
2
3
4
5
deploy:
  type: git
  repository:
    github: https://github.com/{$Github-ID}/{$Repository}.git
  branch: {$branch}

此时，在 Web 端输入 URL : $Repository 即可呈现博客首页

8、让文章使用本地图片

  • 安装插件和配置

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

    这个组件源码需要修改一下，不然可能会出现图片的 URL 的链接生成异常的 Bug

  • 修改源码，将 /${your node_modules path}/hexo-asset-image/index.js 里的内容，替换成下面的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    '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();
        }
      }
    });

  • 将 _config.yml 中的 post_asset_folder 属性修改为 true

    1
    post_asset_folder: true

  • 生成一个带有本地图片的博客文件

    1
    hexo new post --path blog/zhaobiao

    此命令会在 ${your_blog_path}/source/_posts/blog/ 目录下创建一个 zhaobiao 文件夹和 zhaobiao.md 文件, zhaobiao.md 可以访问 zhaobiao 文件夹中的图片。

  • 设置图片路径的实例：

    1
    ![](./zhaobiao/hexo-picture-linked.png)

说明

此篇，简单的介绍了基于 hexo 的搭建博客、写博客、部署博客的常用方法。
接下来，会介绍 hexo 的某些功能的详细介绍，例如选择主题、接入评论系统、添加标签、常见问题等。
敬请期待~

极地东风Block Chain

Hyperledger Fabric Developer