Hexo博客搭建过程

发表于 | 分类于 | 评论数： | 阅读次数：

环境准备

  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
    ![说明](图片.jpg)

    {% 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 搭建评论系统