以下为搭建本博客的教程(针对windows)，记录一下自己的过程，也方便想要建站的小伙伴快速上手。

Github Pages: 可以被认为是用户编写的、托管在 Github 上的静态网页。使用 Github Pages 可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

Hexo: 一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

下面从搭建前的准备工作，Github 部署，优化设置博客(使用 matery 主题)三方面详细介绍。

1. 搭建前的准备工作

1.1 环境安装

  • 安装 Node.js（点击前往官网），请确保勾选 Add to PATH 选项（默认已勾选），这里可以参考 Hexo 的官方参考文档。

  • 安装Git(点击前往官网)，一路默认安装即可。

  • 鼠标右键点击 Git Bash Here ,分别使用 node -v 和 npm -v 来验证安装，显示版本号则安装成功。

1.2 Hexo安装

  • 新建一个存放博客的文件夹，比如 E:\notebook\my_blog，在此文件夹下右键点击 Git Bash Here

    1
    npm install -g hexo-cli

    安装完成后使用 hexo -v 检测是否安装成功

  • 执行初始化并在本地查看效果

    1
    hexo init

    完成后使用

    1
    hexo s

    然后会出来一段 http 开头的网址，我们复制下来然后在浏览器打开，就可以看到初始化的 Hexo 的页面了。

2. Github部署

  • 创建一个仓库，名字必须是 用户名.github.io ，然后勾选初始化 README。我第一次访问不了就是因为 github 竟然打错了，打错了，打错了…

  • 创建一个git秘钥，用来在这台电脑上通过 git 操作实现本地代码库与 Github 代码库同步

    1
    $ ssh-keygen -t rsa -C “your_email@youremail.com“

    your_email@youremail.com 为你的 Github 邮箱地址，比如我的是 gdz678@163.com

    不管出现什么信息，只需要回车就可以了。接着，运行下面的命令将秘钥复制到剪切板

    1
    $ clip < ~/.ssh/id_rsa.pub

  • 在 GitHub 账户中添加秘钥，进入 Github 的设置，点击 Settings–SSH —— New SSH Key，添加刚才复制的秘钥即可。

  • 测试，输入以下命令：注意：git@github.com不要做任何更改！

    1
    $ ssh -T git@github.com

    根据返回，输入 yes 会显示成功授权

  • 配置 Git 个人信息，Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致。

    1
    2
    $ git config --global user.name "此处填你的用户名"  
    $ git config --global user.email  "此处填你的邮箱"

  • 将本地的 Hexo 文件更新到 Github 的库中，登录 Github 打开博客的项目，鼠标移到 Clone or download 按钮，选择 Use SSH 一键复制地址后，打开刚才创建的博客文件夹下的 _config.yaml文件

    1
    2
    3
    4
    deploy:
      type: git
      repo: 你复制的地址
      branch: master

  • 部署到 Github,首先安装 deployer 

    1
    npm install hexo-deployer-git --save

    接着执行,博客就部署到 Github 上了

    1
    $ hexo g -d

    最后，你的博客地址：https://你的用户名.github.io，比如我的是：https://dongzhougu.github.io ,现在每个人都可以通过此链接访问我的博客！

3. 优化设置博客

3.1 安装主题

  • 安装 Metary 主题。cd 到 Blog 目录下的 Themes 文件夹

    1
    git clone https://github.com/blinkfox/hexo-theme-matery.git

  • 编辑站点配置文件 _config.yml,修改主题

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-matery

主题的具体美化和设置可以参考这里。

3.2 安装插件

cd到博客的根目录，分别运行以下，来安装插件

1
2
3
4
5
6
npm install hexo-generator-feed --save                 #RSS
npm install hexo-generator-search --save               #搜索
npm install hexo-prism-plugin --save                   #代码高亮     
npm install hexo-wordcount --save                      #文章字数统计
npm i hexo-permalink-pinyin --save
npm install hexo-filter-github-emojis --save           #添加emoji表情支持

  • RSS : 在根目录下的 _config.yml 中添加对应配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
      order_by: -date

  • 搜索 : 在根目录下的 _config.yml 中添加对应配置

    1
    2
    3
    search:
      path: search.xml
      field: post

  • 代码高亮 ： 修改根目录下 _config.yml 文件中 highlight.enable 的值为 false ，并新增以下配置

    1
    2
    3
    4
    5
    prism_plugin:
      mode: 'preprocess'    # realtime/preprocess
      theme: 'tomorrow'
      line_number: false    # default false
      custom_css:

  • 字数统计：在根目录下的 _config.yml 中添加对应配置

    1
    2
    3
    4
    5
    6
    7
    postInfo:
      date: true
      update: false
      wordCount: false  # 设置文章字数统计为 true.
      totalCount: false # 设置站点文章总字数统计为 true.
      min2read: false   # 阅读时长.
      readCount: false  # 阅读次数.

  • 文章链接转静态短地址：在根目录下的 _config.yml 中添加对应配置

    1
    2
    3
    permalink_pinyin:
      enable: true
      separator: '-' # default: '-'

  • 添加emoji表情支持: 在根目录下的 _config.yml 中添加对应配置

    1
    2
    3
    4
    5
    6
    githubEmojis:
      enable: true
      className: github-emoji
      inject: true
      styles:
      customEmojis:

  • 评论系统：

    • 评论系统采用的是Valine，基于 leancloud。注册账号后完成认证，创建应用，名称随意，比如 blog，复制应用的 APPID 和 APPKey ，填入主题配置文件中的 Valine 配置中。

  • 需要在 leancloud 应用内的“存储”选项中创建class，名称为Comment，否则评论系统无法工作！

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # To use it, activate the configuration item and set appId and appKey.
    # Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
    valine:
      enable: true
      appId: *******
      appKey: *******
      notify: false
      verify: false
      visitor: true
      avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
      pageSize: 10
      placeholder: '快来交流吧'
      background: /medias/comment_bg.png

3.3 代码压缩

使用gulp来压缩网站的资源，包括js,html,css

1
2
3
4
5
6
# 安装gulp
npm install gulp -g            
# 安装组件
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在 Blog 根目录新建文件 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// hexo clean
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// hexo generate
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// Hexo s
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});
// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs")
    )
);

根目录下执行 gulp 就相当于hexo clean && hexo g，再把代码压缩。

再使用 hexo d即可部署到 Github