如何在 Hexo 博客引擎中添加 Swiftype 搜索组件

1. 关于搜索组件

站点中集成搜索组件，可以很大地方便用户进行快速查找博客内容，但是 Hexo 处理搜索默认的逻辑是：输入关键字后模拟 form 提交到 Google 进行搜索的。但是在「某些」开放的国家，Google 是不可以访问的。你可能想到可以模拟提交到贵国「高端搜索引擎」百度进行搜索啊，恩，我想了想，我还是告诉你如何接入更加方便的 Swiftype 比较好。

其实接入 Google 等搜索引擎，也是在 Google 收录了你站点的内容后才能搜索到的，用的其实就是 site: 语法搜索。

2. 效果预览

本站 接入 Swiftype 搜索组件后的效果如图所示。

3. Swiftype 搜索组件介绍

Swiftype 搜索组件的原理就是你提交站点给它，它立即对内容进行索引抓取，之后提供给你类似 JS SDK 一样的东西给你使用即可，设计的非常灵活、方便。

4. Hexo 接入步骤

4.1 注册账号

在 注册页面 注册一个账号。

4.2 添加站点

添加站点的 URL 或者站点的 SiteMap 给 Swiftype 以便它进行抓取，SiteMap 可以提交多个，如我站点的 SiteMap ，我都拆分进行了提交。

关于 Hexo 博客引擎如何生成站点的 SiteMap，请参见 hexo-generator-sitemap 插件或 hexo-generator-seo-friendly-sitemap 插件。

4.3 站点接入

Hexo 的接入非常方便，按照如下代码修改搜索模块即可。

<div class="search">

<input type="search" class="st-default-search-input" placeholder="<%= __('search') %>">

</div>

然后在页脚引入对应的 JS 代码即可，国内网络加载没有问题。

4.4 其他可配置项

可以通过 Swiftype 的控制面板修改如搜索结果、智能提示样式等，可定制化的地方很多；

Swiftype 还可以手动干预搜索结果以及对搜索结果进行强制分组等。

Swiftype 的控制面板中也提供了供您分析用户搜索的分析报表。

先搞明白Hexo博客从搭建到自动发布的架构，才能更好的理解我们每一步进行的 *** 作。

不然只跟着步骤过了一遍，却不知道为什么这么做。

首先看这张架构图：

​

​

整个流程就是本地将 *.md 渲染成静态文件，然后Git推送到服务器的 repository ,服务器再通过 git-hooks 同步网站根目录。

前提条件： 腾讯云服务器

第一部分 : 服务器环境搭建，包括安装 Git 、 Nginx 配置 、创建 git 用户 。

第二部分 : 本地 Hexo 初始化， 包括安装 NodeJS 、 hexo-cli , 生成本地静态网站

第三部分 : 使用Git自动化部署发布博客

NodeJS 安装可以参考： Linux安装NodeJS

找到以下内容

在下面添加一行

保存退出后改回权限

随后设置Git用户的密码，

切换至git用户，创建 ~/.ssh 文件夹和 ~/.ssh/authorized_keys 文件，并赋予相应的权限

然后就可以执行ssh 命令测试是否可以免密登录

至此，Git用户添加完成

我是用的是lnmp 一键安装包，nginx安装教程一大堆，就不再叙述。主要看nginx配置。

找到nginx的配置文件，修改配置如下：

首先要安装 hexo-cli ，安装 hexo-cli 需要 root 权限，使用 sudo 运行

然后初始化Hexo程序

等执行成功以后安装两个插件， hexo-deployer-git 和 hexo-server ,这俩插件的作用分别是使用Git自动部署，和本地简单的服务器。

hexo-deployer-git帮助文档

hexo-server帮助文档

使用 hexo new <文章名称> 来新建文章，该命令会成成一个 .md 文件放置在 sources/_posts 文件夹。

编辑完毕以后， 使用 hexo g 将 .md 文件渲染成静态文件，然后启动 hexo-server ：

现在便可以打开浏览器访问 http://localhost:4000 来查看我们的博客了！

创建一个裸仓库，裸仓库就是只保存 git 信息的 Repository , 首先切换到 git 用户确保 git 用户拥有仓库所有权

一定要加 --bare ，这样才是一个裸库。

在这里我们使用的是 post-receive 这个钩子，当git有收发的时候就会调用这个钩子。 在 ~/blog.git 裸库的 hooks 文件夹中，

新建 post-receive 文件。

保存后，要赋予这个文件可执行权限

然后打开 _config.yml , 找到 deploy

保存后，尝试将我们刚才写的"hello hexo"部署到服务器

访问服务器地址，就可以看到我们写的文章"Hello hexo",以后写文章只需要：

博客就更新咯！~

使用 Git Hook 自动部署 Hexo 到个人 VPS

Hexo 文档

安装前提

安装 Hexo 非常简单。需要预先安装:

Node.js

Git

在 Ubuntu 14.04/15.04 上安装配置 Node.js v4.0.0 http://www.linuxidc.com/Linux/2015-10/123951.htm

如何在CentOS 7安装Node.js http://www.linuxidc.com/Linux/2015-02/113554.htm

Ubuntu 14.04下搭建Node.js开发环境 http://www.linuxidc.com/Linux/2014-12/110983.htm

Git 服务器搭建与客户端安装 http://www.linuxidc.com/Linux

Ubuntu下Git服务器的搭建与使用指南 http://www.linuxidc.com/Linux/2015-07/120617.htm

准备条件做好了之后就可以开始安装Hexo了

安装Hexo

打开Git Bash 执行命令

1

$ npm install -g hexo-cli

创建博客

Hexo安装完成后,分别执行如下命令,Hexo会自动生成需要的文件夹

1

2

3

$ hexo init <folder> ##<folder>为你指定的文件地址

$ cd <folder>

$ npm install

例如:需要将博客搭建在本地的D:\my_hexo下,则分别执行命令:hexo init D:\my_hexo ,cd D:\my_hexo,npm install

执行完命令后如果没有问题我们就可以执行启动命令来查看我们的博客了.

本地预览

1

2

3

$ hexo server ## 启动服务,默认端口4000

$ hexo server -p xxxx ## 自定义端口启动服务

$ hexo clean ## 清除缓存,在页面显示不正常的时候可以执行此命令

然后在浏览器输入http://127.0.0.1:4000/ 即可访问

创建Repository

登录github 点击右上角的”+”,Create a new repository

Create a new repository

复制刚刚新建的https连接:https://github.com/Admol/admol.github.io.git

打开你hexo目录下的_config.yml

设置deploy信息,如:

1

2

3

4

deploy:

type: git

repository: https://github.com/Admol/admol.github.io.git

branch: master

设置SSH key

检验是否已存在key

分别执行命令

1

2

cd ~

cd .ssh

再执行命令 ls 查看是有已有key文件,一般存在key的话都会显示id_rsa.pub 和 id_dsa.pub这两个文件,没有key什么都不会显示

添加一个 SSH key

执行命令(已有key的可以跳过步骤2):

1

2

3

$ ssh-keygen -t rsa -C "your_email@mail.com"

## t 指定密钥类型，默认是 rsa ，可以省略。 -C 设置注释文字，比如邮箱或其他。

然后会提示你 Enter Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter,这里是输入一个文件名用来保存ssh key,也可以什么都不输,会使用默认的id_rsa.pub 和 id_dsa.pub

回车之后,需要输入两次密码(该密码是你push文件的时候要输入的密码，而不是github的密码)

输入密码之后,看见如下显示信息,添加SSH key成功.

Github 设置 SSH key

登录github,点击Settings,然后点击 SSH keys ,在这个页面你可以管理你所有的ssh keys

然后点击Add SSH key

用文本编辑器打开刚刚添加的key文件id_rsa.pub,复制里面的所有的内容

回到github页面,将复制的内容粘贴到刚刚那个页面的key对应的文本框里面,title 可以随便填写

测试ssh key 是否添加成功

在命令行输入:

1

$ ssh -T git@github.com

会出现一段警告代码,输入yes回车,然后会要求你输入刚刚设置的密码,然后它会和你说:Hi,帅哥....约吗

到此SSH key就设置完毕了

部署到Github

打开命令窗口,回到你的hexo博客目录下,如别执行如下命令:

1

2

hexo generate

hexo deploy

等待命令执行完毕后,可以查看代码是否已提交到github上,然后在浏览器输入admol.github.io就可以访问了

新建页面

1

$ hexo new page 'pageName'

执行命令后可以在你本地的/source 目录下看见以为你新增页面名为名的文件夹

显示页面

打开文件后可以对index.md 进行编辑.然后打开/themes/jacman目录下的_config.yml文件(自己正在使用的主题),

添加刚刚新增的页面:

1

2

3

4

5

menu:

首页: /

统计: /archives

关于: /about

pageName: /pageName ##前面的pageName可以自定义,后面的pageName必须写刚刚新增的页面名称

新建文章

1

$ hexo new [layout] 'name'

[layout] 为可选,不写默认为post. /source 目录下的文件夹名称即为 layout 名

安装主题

1

$ git clone https://github.com/JamesPan/hexo-theme-icarus.git themes/icarus

更换主题

首先下载主题,然后打开根目录下的 _cinfig.yml ,修改 theme: 要更换的主题名

修改主题颜色

打开 /themes/jacman目录下的_config.yml文件,修改:

1

2

theme_color:

theme: '色值'

修改logo图片

打开主题下的 _config.yml 文件,修改:

1

2

3

4

imglogo:

enable: false ## 是否显示logo

src: img/logo.gif ## logo图片地址

favicon: img/qq.ico ## 页面左上角图标

Hexo 版本升级

1

$ npm update hexo -g

---