用hexo搭建自己的私人博客

这不是一篇Hexo教程,仅是本博的搭建记录。

准备工作

安装&配置 Hexo

安装 Hexo

全局安装 Hexo 官方的脚手架

1
$ npm install -g hexo-cli

然后初始化博客,并安装依赖包

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

<folder> 就是博客的本地文件夹

配置 Hexo

网站配置: <folder>/_config.yml

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的链接格式 :year/:month/:day/:title/

添加站内搜索

添加百度/谷歌/本地 自定义站点内容搜索

安装 hexo-generator-searchdb

1
$ npm install hexo-generator-searchdb --save

网站配置: <folder>/_config.yml

新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

更多网站参数参考:https://hexo.io/zh-cn/docs/configuration.html

测试 Hexo

新建文章

1
$ hexo new [layout] <title>

运行命令新建一篇文章。

启动服务

1
2
3
$ hexo server
#
$ hexo s

启动服务器。默认情况下,访问网址为:http://localhost:4000/。
server后面可以加些参数达到不同效果:

选项 描述
-p ,–port 重设端口
-s ,–static 只使用静态文件
-l ,–log 启动日记记录,使用覆盖记录格式
-d ,–debug 开启调试模式

生成静态文件

1
2
3
$ hexo generate
#
$ hexo g
选项 描述
-d ,–deploy 文件生成后立即部署网站
-w ,–watch 监视文件变动

清除缓存

1
$ hexo clean

更多命令参考:https://hexo.io/zh-cn/docs/commands.html

安装&配置 NexT 主题

安装 NexT 主题

使用git克隆最新版本

1
2
$ cd <folder>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

或者直接将 hexo-theme-next 下载下来放到 Hexo 站点目录下的 themes/next 目录中

启用 NexT 主题

网站配置: <folder>/_config.yml
搜索 theme 关键字,并将其值更改为 next

1
theme: next

验证 NexT 主题

最好先使用 hexo clean 清除 Hexo 的缓存。

运行 hexo s --debug 启动本地站点,并开启调试模式。

启动服务过程中可以观察命令行输出是否有任何异常信息。当命令行输出中提示出:

1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000 ,检查站点是否正确运行。

主题设定

主题配置: <folder>/theme/next/_config.yml

搜索 scheme 关键字,选择使用的主题样式,将你需用启用的 scheme 前面注释 # 去掉并将其他两个 scheme 加上注释即可。

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置 菜单

主题配置: <folder>/theme/next/_config.yml

搜索 menu 关键字

设置 头像

主题配置: <folder>/theme/next/_config.yml

新增字段 avatar,值设置成头像的链接地址

设置 作者昵称

主题配置: <folder>/theme/next/_config.yml

搜索 author 关键字

设置 作者昵称

主题配置: <folder>/theme/next/_config.yml

搜索 description 关键字

设置 首页列表是否显示 阅读更多

主题配置: <folder>/theme/next/_config.yml

搜索 auto_excerpt 关键字

enable 设置为 true

length 设置为期望截取保留的文章长度

集成第三方服务

主题配置: <folder>/theme/next/_config.yml

多说评论

搜索 duoshuo_shortname 关键字,值使用 多说域名

多说:创建站点-多说域名

搜索 duoshuo_hotartical 关键字,将值设置为 true,并取消注释

畅言评论

打开评论模板<folder>/themes/next/layout/_partials/comments.swig

在 {% endif %} 前面添加畅言评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--畅言评论-->
<section id="comments">
<!--高速版,加载速度快,使用前需测试页面的兼容性-->
<div id="SOHUCS" sid="{{ page.title }}"></div>
<script>
(function(){
var appid = 'cysMNUGiM',//cyssdFaue
conf = '746691ef70d87f9e0b14acf9e9f473df';//18694a97589062f29188dcc5b3c30703
var doc = document,
s = doc.createElement('script'),
h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;
s.type = 'text/javascript';
s.charset = 'utf-8';
s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;
h.insertBefore(s,h.firstChild);
window.SCS_NO_IFRAME = true;
})()
</script>
</section>

添加已开启的畅言插件

1
2
3
4
5
6
7
8
9
10
11
12
<!--畅言插件-->
<!-- 代码1:放在页面需要展示的位置 -->
<!-- 如果您配置过sourceid,建议在div标签中配置sourceid、cid(分类id),没有请忽略 -->
<!--打赏-->
<div id="cyReward" role="cylabs" data-use="reward" style="text-align: center;"></div>
<!--评论表情-->
<div id="cyEmoji" role="cylabs" data-use="emoji"></div>
<!-- 代码2:用来读取评论框配置,此代码需放置在代码1之后。 -->
<!-- 如果当前页面有评论框,代码2请勿放置在评论框代码之前。 -->
<!-- 如果页面同时使用多个实验室项目,以下代码只需要引入一次,只配置上面的div标签即可 -->
<script type="text/javascript" charset="utf-8" src="http://changyan.itc.cn/js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cyssdFaue"></script>

百度统计

搜索新增 baidu_analytics 关键字,值使用 hm.js? 后面那串统计脚本 id

复制 hm.js? 后面那串统计脚本 id

阅读次数统计(LeanCloud)

参考:配置LeanCloud

更多配置参考:http://theme-next.iissnan.com/getting-started.html

创建GitHub

创建好账号之后,先创建一个仓库 New repository

New repository

进入 Settings ,找到下方的 GitHub Pages ,点击Choose a theme选择主题(这个无所谓,最后都会被替换),Source指向的就是GitPage站点所在的分支。

GitHub会给分配一个二级域名,GitHub昵称+github.io

部署网站

安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

配置

网站配置: <folder>/_config.yml

搜索 deploy 关键字

  • type:git
  • repo:github提交地址
  • branch:提交分支

部署

1
2
3
$ hexo deploy
#
$ hexo d

部署网站。
如果想在部署之前预先生成下静态文件,可以使用:

1
2
3
$ hexo deploy -g
#
$ hexo deploy --generate

$ hexo deploy -g$ hexo generate -d的效果其实是相同的

本地站点不要放在Git上,否则执行deploy的时候会把本地站点提交上去

如果想将本地站点放到GitHub实现自动部署可以配合 DaoCloud 实现。

坚持原创技术分享,您的支持将鼓励我继续创作!