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