前言

参考思否木千之：https://segmentfault.com/a/1190000018662692

Hexo + Gitee，零成本搭建自己的个人博客

为什么选择Hexo：Hexo比较活跃，在网络上查找资料，寻找问题的解决方案也比较方便

如果使用Hugo的话，虽然搭建起来方便，但是出点问题在网络上搜不到解决方案

环境搭建

首先需要Git和NodeJs环境
- git：https://git-scm.com/
- NodeJs：https://nodejs.org/zh-cn/
安装很简单，除了选个路径，其他的无脑下一步就行

Hexo环境搭建

Hexo官网：https://hexo.io/zh-cn/

首先在自己电脑上选个位置，新建一个文件夹作为博客的文件夹
然后在那路径打开cmd，执行命令npm install hexo-cli -g
如果是移动网下不下来的可以切换成淘宝镜像源然后使用cnpm
- 设置淘宝：npm config set registry https://registry.npm.taobao.org
- cnpm：cnpm install hexo-cli -g
下载完成之后执行hexo的初始化命令：hexo init
然后可以使用
- hexo clean：清除已经有的hexo网站文件
- hexo g：生成新的文件
- hexo s：启动本地服务器
- hexo d：推送到远程服务器
当然，现在不要用hexo d命令，因为远程服务器我们还没有配置，可以先使用那另外三个命令在本地看看效果

三个命令可以连用：hexo clean & hexo g & hexo s，我称之为一键三连
三连之后的样子大概是这样：

访问本地http://localhost:4000/就可以看到效果了

当然，你们肯定是不会想我这样好看的，你们的开始博客应该是一个又矮又挫的默认样式，我这边这么好看是因为加了样式

Hexo皮肤使用

Hexo上有很多好看的皮肤：https://hexo.io/themes/

我选用的是一款叫做Butterfly的主题配置

官方版

官方配置详解：https://demo.jerryc.me/posts/21cfbf15/

只有你想不到，没有做不到，一切尽在官方文档

懒人版

我知道相当一部分人会直接看懒人版，那么直接开始吧

在博客的根目录打开gitbash
执行命令：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

执行之后下载下来的文件夹如下：
打开博客根目录的配置文件_config.yml，我们来修改一下主题

找到一个叫做theme的配置，将你刚才下载下来的主题文件夹的名字复制过去，比如我的：theme: butterfly

当然，你的也有可能叫做其他的名字

没接触过yml的人注意一点，yml文档对空格十分敏感，不要随意增删空格，否则一定会出错
改变完成之后，再次使用hexo clean & hexo g & hexo s一键三连，在本地查看效果

如果发现报错：

不要紧，只需要执行

1	npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

还是那句话，假如安不上，用cnpm

中文化

我非常清除，你们一定在看着英文的部分和标题等等不知所措，下面就让我来带领你们看Butterfly的文档

进入到themes\butterfly\_config.yml，这就是Butterfly的配置文件，让我们修改几个地方

你们这里一定是英文的，不要紧，改成中文的，这里显示什么标题栏就显示什么

网站图标和头像，这个不用我讲，在路径themes\butterfly\source\img下，自己去替换，或者你也可以在网上找个什么路径替换掉

其他的自己看配置文件，有繁体翻译你们能看懂，功能很多，包括动静彩带，打字特效，点击效果，文章图片，侧边栏，加载动画，公告，访问人数，标签外挂，等等
改完了，Butterfly的配置文件，下面我们来看一下根目录的配置文件，只需要改几个地方：

就是这，可以修改题目，二级标题，描述，作者，语言，时区

主要是这个语言，要改成中文的，幸亏Butterfly支持中文，我们可以在E:\GiteeBlog\themes\butterfly\languages

看到butterfly支持的语言

写文章

文章是markdown语法格式的，可以先学习一下markdown语法

文章写好之后直接放到根目录\source\_posts里面去，弄好之后再次一键三连，就可以看到自己的文章了

自带的应该有一个hello-world的文章

标签，关于我，分类，归档，时间线，友链

首先切换到hexo根目录下，然后打开cmd，执行以下几个命令：

hexo new page tags：标签
hexo new page about：关于我
hexo new page categories：分类
hexo new page archives：归档
hexo new page timeline：时间线
hexo new page link：友情链接

还没完，需要在各自生成的目录下更改index文件，下面贴出来一部分，注意了，时间不重要，重要的是类型type

标签

1
2
3

title: 标签
date: 2020-07-20 20:04:56
type: tags

关于我

1
2
3

title: about
date: 2020-08-01 14:04:15
type: "about"

分类

1
2
3

title: 分类
date: 2020-07-20 20:08:01
type: categories

等等

上面的这些是例子，其余的就是一个模板里面套出来的，那么如何使用呢？

我们需要在我们文章中的开头插入一段YML Format Matter

用人话来讲就是是用上下分割线将一段代码套进来，比如：

说明一下：

title：标题
tags：标签
categories：分类

注意

标签使用这个方式可以指定多个，即一个文章可以拥有一个标签

分类使用这个方式不能指定多个，但是可以指定分级类别，比如我这篇文章现在的分类就是：

Java分类下的JavaSE分类下的JUC

permalink可以不指定，指定就是替换掉原有的路径，原有的路径是根据你的时间来指定的，我们来看配置文件：

默认是年/月/日/标题

但是你可以自己更改这种标题逻辑

我这里改变的逻辑就是分类/标题，推荐使用这种方式而不是在文章中指定permarlink，因为那样指定可能会有BUG

其他的逻辑如下：

重新指定标题的时候尽量不要使用中文，虽然我经常这么干，但是使用中文不利于SEO（搜索引擎优化），你不在乎也是没关系的

更重要的一点就是友链，不能py的博客不是好博客，现在我说明一下在butterfly中如何添加友链

首先确保link的index.md改完了
在hexo根目录\source下建立一个目录，名为_data
在_data文件夹下建立一个link.yml文件，给你们一个模板

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: 遇见狂神说
      link: https://space.bilibili.com/95256449/channel/index
      avatar: http://i2.hdslb.com/bfs/face/83bb511365da513c55aa3d1958524f3b7db40684.jpg_64x64.jpg
      descr: 恭喜你发现宝藏男孩一枚
    - name: 默烦
      link: https://mofan212.gitee.io/
      avatar: https://mofan-blog-pics.oss-cn-chengdu.aliyuncs.com/myblog/avatar.jpg
      descr: 彩笔程序员的打怪升级之路…
    - name: 加油
      link: https://shrimp_study.gitee.io/
      avatar: https://shrimp_study.gitee.io/medias/logo.jpg
      descr: 每天都在写bug的小码畜

- class_name: 值得推荐的网站
  link_list:
    - name: 哔哩哔哩
      link: https://www.bilibili.com/
      avatar: http://i0.hdslb.com/bfs/archive/37b34681bf113d457188557bf1ddd38a9d74fa82.png
      descr: 中国最大的同性交友平台
    - name: 码云
      link: https://gitee.com/
      avatar: https://gitee.com/static/images/logo-black.svg?t=158106664
      descr: 代码托管仓库
    - name: 语雀
      link: https://www.yuque.com/login?platform=wechat&inviteToken=357df65e3061673e3b03a080fade2e499753e1d3f56b8235682342e3de6dd6cb
      avatar: https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*OwZWQ68zSTMAAAAAAAAAAABkARQnAQ
      descr: 高效的的学习笔记

部署到Gitee

终于到了这个激动人心的时刻了，之前的一切都是单机，现在我们要将我们的项目部署到Gitee上，面向全网

在Gitee上创建一个仓库
提示：
- 假如仓库名字和你的用户名一致的话，分配的域名就是：用户名.gitee.io，要比其他的仓库名简洁不少
开启Gitee Pages

是否强制使用HTTPS，随你的便
打开hexo的配置文件（不是主题的配置文件）
1. 配置给你分配的域名
2. 配置你gitee的仓库地址
使用新的一键三连：hexo clean & hexo g & hexo d上传到gitee
注意，在这一步可能会出现推送失败的情况，原因是没有安装git推送的插件，只需要安装一下即可
1
npm install hexo-deployer-git –-save
还是GiteePages页面

点击更新，每次更改内容都要进行更新
在浏览器中输入你的域名，面向全网，进行访问吧

Hexo使用本地图片

更改hexo配置文件：post_asset_folder: true
添加插件：npm install hexo-asset-image --save
然后更改/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();
    }
  }
});

这样就可以使用markdown语法来进行插入图片了，如果不添加插件的时候，直接添加本地图片需要hexo的语法，那么就要去官网看了

千万不要在图片文件夹下面放html文件

简单来说，假如你在图片资源下或者什么别的资源下放了个html文件

然后就出现了那个莫名其妙的博客

这个BUG我找了一天，然后才发现问题

心态炸裂。。。

嚎羸的博客

使用Hexo + Gitee搭建个人博客

前言