hexo结合git搭建blog进阶

前提

hexo有多个配置文件

站点配置文件：在站点根目录下的_config.yml
主题配置文件：在对应主题文件内的_config.yml

安装配置next主题

//切换到你的站点目录
cd your-hexo-site
//下载主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
//修改站点配置_config.yml 
theme: next
//修改主题配置文件themes/next/_config.yml 
//next有三个子主题，这里我们使用 Mist
scheme: Mist 
//修改右侧头像，对应图片放于themes/next/sources/images/
avatar: /images/avatar.jpg
//修改标签图标（和前一步一致）
favicon: /images/favicon.ico
//清理
hexo clean
//生成
hexo g 
//启动
hexo s 
//上传
hexo d

启用分类及标签

//修改主题配置文件_config.yml
menu:  
  categories: /categories #分类页（需手动创建）
  tags: /tags             #标签页（需手动创建）
//需要手动创建的如下操作
hexo new page "tags" 

//这样编写文章时需要增加对应的结构字段
//会自动归类
tags: 
categories:

酷炫效果

集成本地搜索
安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

编辑站点配置文件，新增以下内容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索功能：

# Local search
local_search:
  enable: true

集成Algolia 搜索功能

前提 Next 版本 >= 5.1.0

点击跳转官网
进入Dashboard，选择Indices 新建一个Index。
本地安装 npm install --save hexo-algolia
查询第2步获得的 Application ID、Search-Only API Key 和 Admin API Key，其中Admin API Key

编辑站点配置文件

algolia:
  appId: 'xxx'   //Application ID
  applicationID: 'xxx' //Application ID
  apiKey: 'xxx' 
  adminApiKey: 'xxx'
  indexName: 'xxx'
  chunkSize: 5000
  fields:     //这些就是索引字段，随意搭配
    - name
    - message
    - path
    - date
    - url
    - title
    - slug
    - content:strip

更新索引至Algolia

hexo algolia

启用主题配置文件中的Algolia

algolia_search:
  enable: true

站点右上角斜标

点击跳转官网选择喜欢的样式
复制对应的代码然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在

的下面)，并把href改为你的github地址

添加RSS

根目录下安装插件

npm install --save hexo-generator-feed

修改站点配置_config.yml

//末尾添加
#Extensions
##Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

修改主题配置文件_config.yml

rss: /atom.xml

添加动态背景

打开next/layout/_layout.swig
增加如下代码

//在 < /body>之前添加代码 (注意不要放在< /head>的后面)
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

//可更改线条样式
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

//color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
//opacity: 线条透明度（0~1）, 默认: 0.5
//count: 线条的总数量, 默认: 150
//zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

修改主题配置文件_config.yml

canvas_nest: true

修改文章内链接文本样式

打开themes\next\source\css_common\components\post\post.styl
末尾增加如下代码

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

修改底部“#文章”的“#”标签

打开/themes/next/layout/_macro/post.swig

搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件
写入如下代码

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

//接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， 
//post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

//更改主题配置文件
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

添加RSS

切换到你的blog（我是取名blog，具体的看你们的取名是什么）的路径，例如我是在//D/Hexo/blog这个路径上，也就是在你的根目录下

安装模块

npm install --save hexo-generator-feed

更改主题配置文件

在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)
#Extensions
##Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)
#Set rss to false to disable feed link.
#Leave rss as empty to use site's feed link.
#Set rss to specific value if you have burned your feed already.
rss: /atom.xml
配置完之后运行：
$ hexo g
重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。

博文压缩

安装模块

在站点的根目录下执行以下命令：
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

新建控制脚本

hexo根目录，新建 gulpfile.js ，并填入以下内容：
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);
生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。

修改代码块自定义样式

修改custom.styl

打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

修改右侧头像添加旋转效果

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl
添加如下代码

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
      /* 头像圆形 */
      border-radius: 80px;
      -webkit-border-radius: 80px;
      -moz-border-radius: 80px;
      box-shadow: inset 0 -1px 0 #333sf;
      /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
        (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
      /* 鼠标经过头像旋转360度 */
      -webkit-transition: -webkit-transform 1.0s ease-out;
      -moz-transition: -moz-transform 1.0s ease-out;
      transition: transform 1.0s ease-out;
    }
    img:hover {
      /* 鼠标经过停止头像旋转 
      -webkit-animation-play-state:paused;
      animation-play-state:paused;*/
      /* 鼠标经过头像旋转360度 */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
    /* Z 轴旋转动画 */
    @-webkit-keyframes play {
      0% {
        -webkit-transform: rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(-360deg);
      }
    }
    @-moz-keyframes play {
      0% {
        -moz-transform: rotateZ(0deg);
      }
      100% {
        -moz-transform: rotateZ(-360deg);
      }
    }
    @keyframes play {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(-360deg);
      }
    }

hexo源码上git

们在使用 Hexo 来写博客的时候，我们将博客搭建在 GitHub 上后，当我们使用 hexo d 部署到 GitHub 上，其实没有把我们博客源码保存上去，而只是生成一些博客需要的静态的页面。假设我们硬盘坏了，数据无法恢复，那么我们的博客源文档也会不见，所以最好我们是把源代码也托管到 GitHub 上，这个也有一个好处就是你在其他电脑上也可以同步编写博客。接下来就讲述如何实现。

提交

以windows gitbash为例，在你的hexo根目录下右键gitbash：

//初始化
$ git init
//添加远程仓库
$ git remote add origin [email protected]:username/username.github.io.git
//添加当前目录到INDEX
$ git add .
//更新日志
$ git commit -m "blog"
//推送到源
$ git push origin master:MyBlog
此时，登录你的git，会发现多出了MyBlog分支，且源码已经提交上去


git add -u  只提交已经add的文件的更新，不会增加新增的文件
git add .   提交修改和新文件，不包括删除的
git add -A  以上两个的结合

忽略npm安装的模块

使用hexo不可避免的npm或cnpm安装了一堆node_modules，这部分东西我们没有必要提交到git上去，只需要把package.json提交，下次git clone下来后再npm install即可。
git本身支持忽略指定的文件或文件夹的操作，在我们的hexo根目录下新建一个文件.gitignore，然后写入node_modules/即可，这个时候git add .时是不会把node_modules文件夹里的提交的。

步骤

以后写完日志

$ git add .
$ git commit -m "blog"
$ git push origin master:MyBlog
$ hexo g
$ hexo d

博文带图片

hexo配置文件_config.yml :

post_asset_folder: true

安装模块：

npm install hexo-asset-image --save

此时创建博文hexo n "xxxx"时发现/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹,将使用的图片放于同名的文件夹即可，在md文件内

![描述](图片名.jpg)

即可

hexo同步提交到coding并发布

注册coding

注册Coding.net账号：
打开Coding.net官网，注册一个个人账号
新建项目：
注意项目名与注册用的账户名一致，这里我用的是test：

添加公钥

点击设置->部署公钥->新建部署公钥，之前部署到Github上的时候，本地目录 C\User(中文为用户)(电脑用户名).ssh 目录下会有 github.rsa.pub 公钥文件，打开然后复制里面的内容，直接贴在这里的公钥框中：

Tip：
记得要勾选授予推送权限，否则在后面运行hexo d时会提示错误：

Coding.net Tips : [Deploy key is not allowed to push!]
fatal: Could not read from remote repository.

打开Git命令窗口Git Bash，执行指令：

ssh -T [email protected]

出现提示

说明配置正确。

修改hexo配置

打开hexo本地的配置文件 _config.yml，修改 deploy 的配置内容，这里设置了运行hexo d之后部署的目的地址，原本只有Github地址，现在添加多Coding.net的地址，其中test是注册该平台的用户名：

Tip：
github:和coding:后面接地址前，必须有一个英语输出法的空格隔开，否则会报错。

push

执行

hexo g 
hexo d

部署

打开Coding.net的项目管理界面，打开代码->Pages服务，选择部署来源为master分支，然后保存即可：

测试效果：
打开http://test.coding.me/test访问我们的博客，刚配置完访问的时候出现404错误很正常，需要等待几分钟左右才能生效。