超详细使用Hexo搭建个人博客

自己不喜欢目前简书的风气,总觉得这个平台并不是为了分享技术,想康康大佬的新分享打卡首页全是各种各样的照片,而 CSDN 的各种下载币也真的让人头疼,其实多好的帖子,demo 让你给钱才能下载,所以我目前写文章还一直用的掘金,由于需要写一些自己 app 的手册,各种功能的使用教程,觉得还是有必要搭建一个个人博客
总之对我一个从来没有搭建过博客的小白,还是先去百度了大量帖子,最后很多推荐 hexo 来搭建博客,所以这篇也是讲解如何使用 hexo 搭建博客以及趟之后的坑

准备环境

下面是我的 git,node,npm 版本号

这也是你搭建博客需要用到的组件

如何安装这些程序?

我是 manjaro,基于 archlinux,包管理器是 pacman,所以只需要输入

sudo pacman -S git nodejs npm

我安装 nodejs 就提示没有找到源,那么就先应该同步以下源

ubuntu 则输入

sudo apt install -S git nodejs npm

各个系统根据自己的版本号,windows 好像用的是 mingw 的终端
接下来开始博客的搭建

安装 Hexo

终端命令行输入

npm install -g hexo-cli

上面代码执行完成后,使用 cd 命令到你准备存放博客工作目录的文件夹下

执行

hexo init $yourBlogName
cd $yourBlogName
npm install

yourBlogName 是博客存放的名称,自己起的,我的为 NightBlog

执行结束后博客目录会是这个结构

.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件
└── themes  # 主题文件夹

到现在你的博客已经初步搭建好了,你需要熟练使用以下几个命令(都需要在博客目录下)

hexo clean #清除缓存
hexo g #生成静态文件
hexo s #s代表server,执行后酒有本地地址可以看到效果
hexo d #部署到git等

现在我们执行

hexo s

浏览器打开这个地址

当然最初不会是这个样子

部署到 github page

在你的 github 账户中创建仓库

注意仓库名必须是你的 github 用户名.github.io
随后在你的仓库创建 index.html,随便写一点东西

打开你的 github 用户名.github.io 就能看到你写的内容

配置 SSH key

为了不用你每次 git 操作都需要验证你的密码,所以需要配置 ssh key,这其实也是与服务器的一种免密交互的方式
如何与服务器免密交互

通过 cat 命令查看当前用户是否存在 key

cat ~/.ssh/id_rsa.pub

如果有输出则说明本地已经有 ssh key,如果没有
执行以下命令全局配置一下本地账户：

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

生成 SSH key

ssh-keygen -t rsa -C '上面的邮箱'

生成的过程中的询问直接回车就是
先再次 cat 查看是否生成成功
cat ~/.ssh/id_rsa.pub

上传 key 到 Github

点击 New SSH key 然后将上一步 cat 下来的内容复制进去
最后在终端验证

部署博客到 github

这部分如果根据本帖子有问题的移步一下官方文档
打开博客根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置：

添加配置

deploy:
  - type: git
    repo:
      github: git@github.com:Nightmare-MY/Nightmare-MY.github.io
    branch: master

安装部署插件

这部分一定注意,安装插件不要随便在哪就开个终端,终端的工作目录一定要在博客目录下

npm install hexo-deployer-git --save

上传

hexo g -d

随后打开 https://你的 github 用户名.github.io 就能看到你的博客了

部署博客到私人服务器

上面的_config.yml 的同一个地方

添加配置

deploy:
  - type: git
    repo:
      github: git@github.com:Nightmare-MY/Nightmare-MY.github.io
    branch: master
  - type: rsync
    host: 你的域名或者ip
    user: 你的用户名
    root: 你的具体路径
    port: 22
    delete: true
    verbose: true
    ignore_errors: false

安装部署插件

npm install hexo-deployer-rsync --save

上传

hexo g -d

这样就能同时部署到你的 git 与私人服务器

一条命令进行 clean,生成,部署

打开博客根目录下的 package.json

其中第 6 行为根据自己需求添加
最后我们只需要执行

npm run custom

无法显示图片

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

以上搭建就已经结束,后续关注之后的趟坑部分
我的博客地址