注：

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

特别推荐

Ⅰ: 搭建指南：

1. Hexo 博客搭建指南

2. 【Hexo搭建独立博客全纪录】（三）使用Hexo搭建博客

Ⅱ: 添加评论功能：

3. hexo - Next 主题添加评论功能

4. Next主题增加Gitment评论系统

5. 添加Gitment评论系统踩过的坑

6. Gitment评论功能接入踩坑教程

Ⅲ: 主题优化：

7. hexo的next主题个性化教程:打造炫酷网站

Ⅳ: 博客源备份：

8. GitHub + Hexo搭建自己博客(三) 多设备管理

正文

一、基础搭建

1. 注意事项:

每次新增或更新博客时，要注意执行以下命令:

$ hexo clean	//清除缓存文件db.json和已生成的静态文件public
$ hexo g	//生成网站静态文件到默认设置的public文件夹
$ hexo d	//部署网站到设定的仓库

或把后两条命令合二为一:

$ hexo clean	//清除缓存文件db.json和已生成的静态文件public
$ hexo d -g		//生成并上传

2. 搭建过程中遇到的问题:

3. 博客模板推荐:

4. 大神博客推荐:

二、Gitment：使用 GitHub Issues 搭建评论系统

三、搭建评论系统时遇到的问题汇总

1. 添加评论时出现"[object ProgressEvent] "问题:

object ProgressEvent问题解决:
找到next主题中的gitment评论文件 next/layout/_third-party/comments/gitment.swig，更改以下代码:

<!-- 原代码 -->
// gitment的英文版
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>

// gitment的汉化版
// 只需到模板里将原来定义CSS和JS的那两行改成：
<!-- 请使用下面的替换  2019-06-30更新-->
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

完整代码如下：

<!-- LOCAL: You can save these files to your site and update links -->
    {% if theme.gitment.mint %}
        {% set CommentsClass = "Gitmint" %}
        <link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
        <script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>
    {% else %}
        {% set CommentsClass = "Gitment" %}
        <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
        <script src="https://billts.site/js/gitment.js"></script>
    {% endif %}
<!-- END LOCAL -->

重新清理缓存，部署博客即可留言。

2. 使用Gitment遇到的问题: Error：validation failed

// 原配置
id: '<%= page.title %>'
// 修改后的配置
id: '<%= page.date %>'

四、Hexo的Next主题详细配置

1. 整体配置：

2. 局部配置：

五、GitHub + Hexo搭建自己博客：备份博客源文件

六、Hexo + Next 主题博客添加分享功能

首先在themes\next\layout\_partials\share中新建一个文件socialshare.swig,
编辑内容如下：

<script src="../lib/jquery/index.js"></script>
<link href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/jquery.share.min.js"></script>

<script> var $config = {
      url                 : window.location.href,// 网址，默认使用 window.location.href
      source              : '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
      title               : '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
      description         : '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
      image               : '', // 图片, 默认取网页中第一个img标签
      sites               : ['qzone', 'qq', 'weibo','wechat'], // 启用的站点
      disabled            : ['google', 'facebook', 'twitter'], // 禁用的站点
      wechatQrcodeTitle   : '微信扫一扫：分享', // 微信二维码提示文字
      wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
      target : '_blank' //打开方式
  };
  $('.social-share').share($config);
</script>

然后找到themes\next\layout_macro中的文件post.swig中的这部分代码

<footer class="post-footer">

之前贴上以下代码

{% if theme.social_share and not is_index %}
  {% include '../_partials/share/socialshare.swig' %}
  <div class="social-share"></div>  
{% endif %}

在主题配置文件, _config.yml 文件中增加以下代码

social_share:
  enable: true

保存修改后，然后 hexo clean ，hexo g ，hexo d 即可看到点击效果。

参考

七、Hexo博客站内搜索配置 (swiftype)

前言

随着博客的文章增多，添加一个博客站内搜索的功能就显得很有必要。

而第三方站内搜索的插件有：

google自定义搜索（免费的标准版貌似有广告而且要科学上网）
百度站内搜索（貌似不支持https并且只显示收录的页面）
swiftype站内搜索（我的选择）

swiftype网站配置

首先注册swiftype账号并登录，也可直接使用google账号登录
然后选择CREATE A NEW ENGINE,再进行填入网址等一系列操作,设置默认就好
得到左边为各项设置的搜索引擎界面

点击install search，进入安装代码界面,并将这段代码复制

点击change configuration，可以看到左边有设置选项

特别注意，search field选项

如果博客本身就有搜索框，那么修改搜索框的class为st-default-search-input就好了
但是如果没有，则可以自行添加搜索框，并修改class；或者选择swiftype提供的搜索框即可
由于我的博客（random主题）本身没有搜索框，所以直接选择了swiftype提供的搜索框

同时，可以在左侧的设置选项中查看搜索统计情况、预览搜索结果、设置搜索权重、添加域名、查看抓取的页面等
注意：swiftype的爬虫抓取页面需要一定的时间，所以可能需要等一会
到此为止，swiftype网站的配置就完成了

博客的配置

打开博客主题的配置文件_config.yml，在最后添加

 # swiftype站内搜索
 swift_search:
 enable: true
 
 
  1
  
2
  
3

打开博客主题的themes\next\layout\_partials文件夹，在其中找到footer.swig文件（或者其他以footer命名的文件），把之前复制的脚本代码粘贴到其中
注意：要放在body标签中
至此，博客站内搜索的工作就做完了，然后重新将博客deploy即可
搜索效果

原文地址

如何利用Github搭建个人博客

注：

****** 特别推荐 ******