在github上使用hexo搭建个人博客网站

1 注册一个github账号,设置用户名和邮箱,创建ssh密钥

-- 配置用户名和邮箱
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"
-- 创建ssh 私钥  一路回车即可
ssh-keygen -t rsa -C "上面配置的邮箱"   
-- 将 ~/.ssh/id_rsa.pub 文件中的公钥复制

2 点击 setting ，添加ssh key，title随便取个名字，然后将刚才粘贴的公钥放在里面

3 验证连接

使用git工具，输入ssh -T git@github.com,出现are you sure you want ... 输入回车即可  返回successfully表示连接成功
=====》
Hi follow-the-heard! You've successfully authenticated, but GitHub does not provide shell access.

4 创建一个repository，仓库的命名是 github用户名.github.io

5 安装node.js

下载官网地址 https://nodejs.org/zh-cn/

下载下来是一个.msi文件

双击后一路next即可完成安装

6 安装hexo

-- 在windows中打开cmd命令窗口，安装hexo本地环境
npm install -g hexo
-- 检查hexo环境是否安装成功
输入 hexo  列出一系列的使用方法，就说明hexo环境安装成功了

7 windows中创建一个目录MyBlog ，在该目录下打开cmd

并在cmd中执行下面的命令

-- 初始化hexo博客工程
hexo init
-- 编译博客工程
hexo g
-- 在本地启动hexo服务
hexo s

在浏览器中访问 http://localhost:4000 就可以看到hexo原始页面

需要将博客部署到github远程服务器还需要

1 安装hexo部署插件

npm install hexo-develoyer-git --save

2 修改配置文件:位于项目MyBlog根目录下的_config.yml

repository: git@github.com:username/git仓库地址
type： git
barnch: master

3 重新编译，然后部署

hexo g
hexo d

4 浏览器中访问 https://username.github.io

到这里hexo的博客就搭建并且部署完成了

更换hexo主题的教程：

hexo主题下载网站： https://hexo.io/themes/index.html

目前有300多种博客模板供选择

两种方式可供下载

1 git clone 复制链接  
2 下载zip包，然后解压到themes目录下使用

修改配置文件中的主题 _config.yml

清除缓存文件（db.json）和已生成的静态文件（public）

-- 当更换主题后，本地是可以看到更换后主题的效果，但是部署上去之后，会发现云端还是之前的主题，就可以执行下面的命令
hexo clean

生成静态文件

hexo g  或 hexo generate

部署博客

hexo d 或 hexo deploy

重新访问 https://username.github.io 即可看到新的博客主题

创建文章

hexo n 文章title
 

为了在文章中能插入图片，需要做下面的事情

1 将配置文件中的参数修改如下‘

-- 该参数设置为true后，创建文章时，会创建一个和文章同名的文件夹
post_asset_folder: true

2 安装插件并替换js内部的代码

1 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
2 这个插件的代码有bug,需要将/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();
    }
  }
});
3 打开_config.yml文件，修改下述内容
post_asset_folder: true

====> 博客中的图片放在和文章同名的文件夹内，并且引用的时候这样：

![图片描述](./图片名称)