环境准备

1. 安装git 下载地址
2. 安装Nodejs 下载地址
3. 添加SSH Key到GitHub

安装cnpm

npm太慢，而且经常失败，使用淘宝镜像：

1

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo

1. git bash下执行以下命令安装:

   1	cnpm i -g hexo

2. 新建目录博客目录:C:/ADEV/myblog

   cd 到myblog并执行以下命令初始化hexo:

   1

   hexo init

   接下来的命令如果不是特意说明，都是在站点目录下执行。

3. 查看博客雏形:

   1 2 3

   hexo clean #清理 hexo g #生成网页 hexo s #启动本地服务器

在浏览器中打开http://localhost:4000 ,就可以看到本地博客主页了。

创建文章

Ctrl+C退出hexo服务，执行以下命令创建新的文章:

1

hexo new test

终端会有以下输出:

1

INFO  Created: C:\ADEV\myblog\source\_posts\test.md

Hexo所有的文章都是Markdown文件，以后也可不通过命令，直接在_posts目录下创建新的文章。

美化博客 - 使用Next主题

Hexo有很多第三方主题，研究了一圈，最终决定使用Next。
Next很美观，很成熟，集成了你能想到的所有功能，大部分情况下只需要修改主题配置文件就行了，强烈推荐。

1. 下载地址: https://github.com/theme-next/hexo-theme-next
2. 解压到C:/ADEV/myblog/themes目录下，并重命名为next6
3. 打开站点配置文件C:/ADEV/myblog/_config.yml， 找到theme字段，并将其值更改为next6

   1	theme: next6

两个重要的配置文件

构建博客的过程中会经常修改一下两个配置文件:

1. 站点配置文件：C:/ADEV/myblog/_config.yml
2. 主题配置文件: C:/ADEV/myblog/themes/next6/_config.yml

发布到GitHub

1. 创建一个GitHub repository,名称为yourgithubname.github.io（yourgithubname替换为你的GitHub账户名）

2. 修改站点配置文件:

   1 2 3 4

   deploy: type: git repo: https://github.com/yourgithubName/yourgithubName.github.io.git branch: master

   注意格式，子项前面有两个空格，冒号后面有一个空格。
   如果接下来发布出错，请尝试将repo修改成以下形式:

   1	repo: git@github.com:yourgithubName/yourgithubName.github.io.git

3. 安装发布模块:

   1	npm install hexo-deployer-git --save

4. 执行以下命令发布:

   1 2 3

   hexo clean hexo g hexo d #发布

   在浏览器访问https://yourgithubname.github.io ,就可以看到你的博客了。

站点配置:

以下配置请查找关键字修改。

1. 语言改为中文:

   1	language: zh-CN

   注意在你的主题language目录下应该包含你所配置的语言配置文件，本例为:C:/ADEV/myblog/themes/next6/languages/zh-CN.yml。
   Next不同版本中文配置名字可能不一样，有的版本是zh-Hans，请根据具体情况配置。

2. 标题&作者:

   1 2	title: 善生的个人博客 author: 善生

3. URL唯一化:

   1. 安装模块:

      1	cnpm install hexo-abbrlink --save

   2. 修改配置:

      1 2 3 4 5 6 7

      # URL permalink: post/:abbrlink.html permalink_defaults: abbrlink: alg: crc32 # 算法：crc16(default) and crc32 rep: hex # 进制：dec(default) and hex

4. 自定义博文文件名格式（添加日期前缀，方便管理）:

   1 2	# Writing new_post_name: :year:month:day-:title.md # File name of new posts

5. 图片文件夹:

   1 2	# Writing post_asset_folder: true

   使用命令创建新的博文之后,会在博文同一目录下生成和博文同名的文件夹，把图片放入此文件夹下，图片有两种使用方法:

   1 2 3

    {% asset_img 图片.jpg 说明 %}

主题配置:

1. 站点日期:

   1 2	footer: since: 2018

2. 去掉底部一些链接:

   1 2 3 4 5 6

   powered: enable: false version: false theme: enable: false version: false

3. 博客标签页面，分类页面:

   1. 执行以下命令:

      1 2	hexo new page tags hexo new page categories

   2. 修改标签页C:/ADEV/myblog/source/tags/index.md:

      1 2 3 4 5 6

      --- title: 所有标签 date: 2018-08-15 22:56:08 type: "tags" comments: false ---

   3. 修改分类页C:/ADEV/myblog/source/categories/index.md:

      1 2 3 4 5 6

      --- title: 所有分类 date: 2018-08-15 23:04:31 type: "categories" comments: false ---

   4. 修改主题配置文件:

      1 2 3

      menu: tags: /tags/ categories: /categories/

4. Next样式:

   Next有四种样式,我使用的是Pisces：

   1 2	# Schemes scheme: Pisces

5. 个人GitHub和Email:

   1 2 3

   social: GitHub: https://github.com/lano2088 E-Mail: mailto:warrenvip@163.com

6. 头像:

   将头像图片放到此位置:C:\ADEV\myblog\themes\next6\source\images\main.png，也可以是gif文件。修改主题配置:

   1 2	avatar: url: /images/main.png

7. 更改头像最大宽度:

   根据你的头像宽度，修改样式文件:C:/ADEV/myblog/themes/next6/source/css/_variables/Pisces.styl:

   1	$site-author-image-width = 220px

   如果你用的是其它样式，请修改对应的文件。

8. 开启打赏功能:

   将你的微信和支付宝二维码放到主题的images目录下:

   1 2 3 4

   # Rewards reward_comment: 欢迎打赏 wechatpay: /images/wechatpay.png alipay: /images/alipay.png

9. 百度分享:

   1 2	baidushare: type: button

文章阅读量，访客统计:

编辑主题配置文件:

1
2
3
4
5
6
7
8

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

集成第三方评论功能

第三方评论插件有很多，但是好用的不多。尝试过用来必力，但是注册失败了。看了下畅言，需要绑定备案的域名，不支持GitHub，好像免费版还有广告。最后决定使用gitment,他是借助了GitHub的issues功能实现的。好像可以实现有评论发送邮件，如果有自己的域名，再绑定腾讯企业邮箱，可以实现微信推送,具体还没研究。

gitment示例页面: https://imsun.github.io/gitment/

1. 注册 GitHub OAuth Application

   点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写，但要确保填入正确的 Authorization callback URL（一般是评论页面对应的域名，如 https://lano2088.github.io 或者个人域名：http://lanovip.xyz ，多个站点不能共用）。

   你会得到一个 client ID 和一个 client secret，这个将被用于之后的用户登录。

2. 编辑主题配置文件:

   1 2 3 4 5 6

   gitment: enable: true github_user: your_github_name # MUST HAVE, Your Github Username github_repo: your_comment_repo # MUST HAVE, The name of the repo you use to store Gitment comments client_id: your_client_id # MUST HAVE, Github client id for the Gitment client_secret: your_client_secret # EITHER this or proxy_gateway, Github access secret token for the Gitment

每篇文章发布之后需要到文章页面底部用你的GitHub账户登录，初始化评论。虽然有点麻烦，个人觉得还好。毕竟个人博客文章量有限。网上有批量初始化方法，请自行百度。

博客搜索功能

1. 安装模块:

   1	cnpm install hexo-generator-searchdb --save

2. 修改站点配置:

   1 2 3 4 5 6

   # 搜索 search: path: search.xml field: post format: html limit: 10000

3. 修改主题配置:

   1 2	local_search: enable: true

修改文章内链接文本样式

修改文件 themes\next6\source\css_common\components\post\post.styl，在末尾添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11

// 文章内链接文本样式
.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;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

压缩发布 - 优化博客加载速度

在站点的根目录下执行以下命令：

1
2

cnpm install gulp -g
cnpm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

新建 gulpfile.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

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目录中的静态资源文件进行压缩。

七牛云CDN加速

把图片放到七牛云上面，生成外链，可以优化博客访问速度。七牛云的免费流量完全可以满足个人博客的需求。

参考链接:

1. Next官网
2. Next酷炫效果
3. Markdown语法
4. 如何优雅的发布hexo博客
5. Gitment：使用 GitHub Issues 搭建评论系统

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment