个人建站流程

发表于 更新于 分类于

使用Hexo + Github Page 搭建个人网站

在Windows WSL环境下，直接安装 Node.js 和 npm，作为准备工具和运行环境。直接在Windows环境下安装Node.js 和npm，使用的时候直接报错，Linux环境下比较省心。

不知道是否是翻墙工具的原因，发布博文和访问博文都需要代理工具。

Hexo的安装与使用

Hexo怎么安装，直接百度即可。

使用hexo在本地创建博客目录：在Shell下面使用命令

1
$ hexo init <blog_dir_name>

即可创建一整套预先设定好的博客工程模板。

使用hexo创建一个新的博文：在Shell下面使用命令

1
$ hexo n[ew] "<blog_article_title>" -p <path to your post>

即可创建指定标题的文章。文章以Markdown格式的文件保存在Blog的source子目录下，我们使用对应的编辑器即可编写博客的内容。

编译生成所需的网页以及发布到Github上：在Shell使用命令

1
2
$ hexo g[enerate]
$ hexo d[eploy]

或是合在一起 

1
$ hexo g -d

即可。

博客的配置

博客的配置文件位于博客的根目录下，名为 _config.yml 。重要的配置信息包含在文件的开头和结尾处。

开头包括了博客的名字，作者的名字以及Blog的域名等等重要信息。结尾则配置了Blog的发布方式。

1
2
3
4
deploy:
	type: git
	repo: https://github.com/wswslzp/wswslzp.github.io.git
	branch: master

当然，前提是你的Github里面有这个repo，没有就创建一个，以 <user_name>.github.io 来命名。

博客图片的处理

首先，安装如下模块

1
npm install hexo-asset-image --save

随后，打开 _config.yml，将选项 post_asset_folder 改为 true。
最后，打开 /node_modules/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();
    }
  }
});

以上的准备工作完成后，即可在博客的原文中，按照 Markdown 格式要求使用图片了。将要用到的图片文件保存在 source/images 内即可，随后按照如下方式引用，

1
![<figure-capital>](/images/<img_file>)