演示
安装node.js
wget https://nodejs.org/dist/v4.4.6/node-v4.4.6.tar.gz
$ tar zxvf node-v0.8.16.tar.gz
$ ./configure
$ sudo make && sudo make install
或者使用Hexo官网说的方式:
安装 Node.js 的最佳方式是使用 nvm。
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
安装完成后,重启终端并执行下列命令即可安装 Node.js。
$ nvm install 4
- 需安装其它工具:git
sudo apt-get install git-core
安装博客框架
sudo npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
此时blog目录下的文件有:
~/blog$ ls
_config.yml db.json node_modules package.json scaffolds source themes
配置Hexo(关联github)
在github新建一个仓库(new repository),命名为YourSiteName.github.io(例如我的就是lizer2014.github.io)
本地创建公私钥:
ssh-keygen -t rsa
并把公钥添加到github中,以后提交博客可以免密登陆。
修改站点信息:
title: lizer's blog
subtitle: lizer2016
description: 发令枪一响,你不可能有时间去看对手>是怎么跑的,你只有一路狂奔。~马云1999
author: lizer
关联github:(最后)
vim _config.yml
deploy:
type: git
repository: git@github.com:lizer2014/lizer2014.github.io.git
branch: master
然后执行命令:(安装git插件) npm install hexo-deployer-git --save
安装next主题
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。
下载主题
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。
theme: next
验证主题
本地运行: hexo generate
hexo server
命令行提示: INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
浏览器访问: http://localhost:4000
主题设定
选择 Scheme
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可
这里我启用的是Mist
设置语言为中文
站点配置文件_config.yml
language: zh-Hans
设置 菜单
菜单项(名称和链接),菜单显示文本,菜单对应图标
编辑主题配置文件
- 设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。
menu:
home: /
archives: /archives
#about: /about
categories: /categories
tags: /tags
#commonweal: /404.html
设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml
设定菜单项的图标,对应的字段是 menu_icons。 此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。
设置 侧栏
设置头像
编辑站点配置文件_config.yml,添加字段 # Site
avatar: /uploads/avatar.jpg
头像链接地址可以是
互联网URI:http://example.com/avtar.png
站点内的地址:
这里用
将头像放置主题目录下的 source/uploads/ (新建uploads目录若不存在)
配置为:avatar: /uploads/avatar.png
或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png
集成第三方服务
多说评论
使用多说前需要先在 多说 创建一个站点。具体步骤如下:
1. 登录后在首页选择 “我要安装”。
2. 创建站点,填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname
3. 创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
duoshuo_shortname: lizerblog
百度统计
注意: baidu_analytics 不是你的百度 id 或者 百度统计 id
1. 登录 百度统计, 定位到站点的代码获取页面
2. 复制 hm.js? 后面那串统计脚本 id
3. 编辑 站点配置文件, 新增字段 baidu_analytics 字段,值设置成你的百度统计脚本 id
例如: baidu_analytics: daaa7ce1b92a38c5e0c28cfcd70605ad
阅读次数统计(LeanCloud)
在注册完成LeanCloud帐号并验证邮箱之后,我们就可以登录我们的LeanCloud帐号,进行一番配置(创建自己的应用,在应用中的设置里有应用key)之后拿到AppID以及AppKey这两个参数即可正常使用文章阅读量统计的功能了。
在自己创建的应用里有个数据的选项,在应用的数据配置界面,左侧下划线开头的都是系统预定义好的表,为了便于区分我们新建一张表来保存我们的数据。点击左侧右上角的齿轮图标,新建Class:
在弹出的选项中选择创建Class来新建Class用来专门保存我们博客的文章访问量等数据:
点击创建Class之后,理论上来说名字可以随意取名,但是为了保证我们前面对NexT主题的修改兼容,此处的新建Class名字必须为Counter:
由于LeanCloud升级了默认的ACL权限,如果你想避免后续因为权限的问题导致次数统计显示不正常,建议在此处选择无限制。
选择左侧的应用Key选项,即可发现我们创建应用的AppID以及AppKey,有了它,我们就有权限能够通过主题中配置好的Javascript代码与这个应用的Counter表进行数据存取操作了:
复制AppID以及AppKey并在NexT主题的_config.yml文件中我们相应的位置填入即可,正确配置之后文件内容像这个样子:
leancloud_visitors:
enable: true
app_id: SwEvK4t9RaHtQCqTapfWMjMX-gzGzoHsz #<app_id>
app_key: cz8cWYhHo43i3tlWbLP1w1vx #<app_key>
这个时候重新生成部署Hexo博客,应该就可以正常使用文章阅读量统计的功能了。需要特别说明的是:记录文章访问量的唯一标识符是文章的发布日期以及文章的标题,因此请确保这两个数值组合的唯一性,如果你更改了这两个数值,会造成文章阅读数值的清零重计。
为了安全,在应用的安全选项卡中添加自己的web安全域名
美化显示:
修改主题next/languages/zh-Hans.yml中
visitors: 阅读次数 为 visitors: 热度
修改主题下的next/layout/_macro/post.swig第114行添加°C <span class="leancloud-visitors-count"></span>°C
多说分享
编辑 站点配置文件,添加字段 baidushare,值为 true。
duoshuo_share: true
主题配置
设置 RSS
NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 主题配置文件,设定 rss 字段的值:
npm install hexo-generator-feed –save
false:禁用 RSS,不在页面上显示 RSS 连接。
留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
具体的链接地址:适用于已经烧制过 Feed 的情形。
添加「标签」页面
hexo new page tags
在新生成的/source/tags/index.md添加
comments: false
type: “tags”
文章里使用:
tags: [tag1, tag2]
添加「分类」页面
hexo new page categories
在新生成的/source/categories/index.md添加
comments: false
type: “categories”
文章里使用:
categories: [cate1, cate2]
这里有顺序的区别
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。
- 链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址。
social:
#LinkLabel: Link
GitHub: https://github.com/lizer2014
# Twitter: https://twitter.com/your-user-name
Weibo: http://weibo.com/u/3645318624?is_all=1
- 设定链接的图标,对应的字段是 social_icons。
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
# Twitter: twitter
Weibo: weibo
开启打赏功能
主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /uploads/weixin_pay.png
友情链接
编辑 主题配置文件 添加:
links_title: Links
#links_layout: block
#links_layout: inline
links:
#Title: http://example.com/
csdn博客:i立志的专栏: http://blog.csdn.net/u014595668
多说评论显示 UA
要启用此功能(显示楼主),需要配置 duoshuo_info 这个字段。 编辑 主题配置文件,查找 duoshuo_info 字段, 设置如下:
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 6302689811505350000
admin_nickname: Author
站点建立时间
编辑 主题配置文件,新增字段 since。
since: 2016
搜索服务
官网说用的是Swiftype,但是除了网站本身打开慢,而且github采用的是https,所以Swiftype是无法爬取的,无法搜索,所以采用本地搜索Local Search
1. 安装 hexo-generator-search,在站点的根目录下执行以下命令:
$ npm install hexo-generator-search --save
- 编辑 站点配置文件,新增以下内容到任意位置:
search:
path: search.xml
field: post
- 编辑 站点配置文件,修改网站url
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://lizer2014.github.io/
博客迁移
首先,安装 hexo-migrator-rss 插件。
$ npm install hexo-migrator-rss –save
插件安装完成后,执行下列命令,从 RSS 迁移所有文章。source 可以是文件路径或网址。
$ hexo migrate rss
其它优化
自动折叠首页文章
编辑主题设置:
auto_excerpt:
enable: true
length: 150
或者在文章中使用括取部分作为摘要
或者在文章的开头加入description: 属性描述文章
修改主题模板:scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
categories:
tags:
description:
comments: true
---
基本操作
hexo clean 清除生成文件
hexo generate 生成静态文件
hexo server 本地运行blog
hexo deloy 发布博客