之前一直用Evernote和Quiver作为本地笔记工具，最早使用Evernote，后来由于Evernote越来越重，目前主要结合Safari的Evernot插件收藏一些文章。现在使用Quiver，内容基本都是markdown格式。近期有想法把一些新的同步放到网上和大家分享，选择了Github Pages，对于blog框架有连个选择Jeyll和Hexo，对比尝试后选择Github+Hexo作为博客框架。

什么是Hexo

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

hexo安装配置

准备

安装Hexo前需要先安装：

Node.js
Git

安装

由于国外网速较慢，建议切换到国内的源，比如淘宝源

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

后面用cnpm替换npm

1	cnpm install hexo-cli -g

初始化

1	hexo init blog

blog为博客目录名

生产静态页面

1 2	cd blog hexo generate

运行本地服务

1
2
3

cd blog
npm install
hexo server

访问 http://localhost:4000/

安装hexo git插件

1	cnpm install hexo-deployer-git --save

运行如下命令部署

1	hexo deploy -g

安装主题

https://github.com/iissnan/hexo-theme-next

1	git clone https://github.com/iissnan/hexo-theme-next themes/next

注意：修改配置文件_config.yml中语言为zh-Hans，默认为zh-CN

1	language: zh-Hans

maupassant

1
2
3

git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
cnpm install hexo-renderer-jade --save
cnpm install hexo-renderer-sass --save

about页

方法一：通过hexo new page命令

1 2	cd blog hexo new page about

方法二：在source文件夹下新建about文件夹，在about文件夹下新建index.md

tags页

执行如下命令创建标签页

1	hexo new page tags

编辑tags/index.md内容

---
title: tags
date: 2017-03-28 10:58:20
type: "tags"
comments: false
---

categories页

执行如下命令创建标签页

1	hexo new page categories

编辑categories/index.md内容

---
title: categories
date: 2017-03-28 10:58:20
type: "categories"
comments: false
---

rss订阅

hexo插件
 hexo-generateor-feed

1	cnpm install hexo-generator-feed --save

*.md文件写法

文件开始部分采用yaml格式配置文章属性

---
# 文章标题
title: 文章标题 
# 文章日期，通过hexo new创建的会填充创建时间
date: 2017-03-27 18:04:58
# 文章分类
categories: 环境搭建
# 文章标签
tags: [github,hexo]
# 是否允许评论，比如about、tags等页面需要设置为false
comments: false
---

文章正文采用markdown格式书写

分类categories

categories: 分类
categories:
  - 一级分类
    - 二级分类

标签tags

tags: [标签1,标签2]
tags: 
  - 标签1
  - 标签2

本地图片

将网站配置文件_config.yml中post_asset_folder的值改为true，当用hexo new title命令创建新的文章时，会创建同名目录，可以将资源文件（图片文件）放到该目录下

1	post_asset_folder:true

安装hexo-asset-image插件

1	cnpm install https://github.com/CodeFalling/hexo-asset-image --save

在md文档中用![图片说明](title/avatar.jpg)方式插入图片

1	![图片测试](first/hexo.jpeg)

如果不安装hexo-asset-image插件，可使用如下代码（非markdown方式）

1	{% asset_img slug [title] %}

优化加强

添加打赏

在主题配置文件中，添加如下内容：

# 打赏
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /upload/wechatpay.jpeg
alipay: /upload/alipay.jpeg

reward_comment为打赏提示语，可改为自己的
wechatpay和alipay为微信收款和支付宝收款的二维码图片，可以是网络图片，也可以是本地图片。本地图片放到source\upload目录下

添加阅读数

用不蒜子进行统计，在主题配置文件中将enable改为true，然后在首页底部和文章头部就可以看到访问量了

1
2
3

busuanzi_count:
  # count values only if the other configs are false
  enable: true

添加MTA访问统计

访问腾讯MTA，登录，创建新应用，选择h5，输入你的博客地址heneryyang.github.io，将mta id写到主题配置文件中

1 2	# Tencent MTA ID tencent_mta: mta id

由于NexT第三方服务腾讯MTA的url地址是http的，会导致在一些浏览器上有安全问题，将themes/next/layout/_third-party/analytics/tencent-mta.swig文件中的http改为https

1	mta.src = "https://pingjs.qq.com/h5/stats.js?v2.0.2";

采用百度分享，修改主题配置文件

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button

其中button为按钮格式，slide为侧边栏展开方式

由于百度分享不支持https，在https://github.com/hrwhisper/baiduShare下载代码，将static目录放置在source下，然后修改themes/next/layout/_partials/share/baidushare.swig文件中//bdimg.share.baidu.com/static改为/static

1
2
3

<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

注意：需要再网站配置文件中添加如下内容，禁止hexo编译static文件夹
1
2
skip_render:
  - static/**

sitemap

1 2	cnpm install hexo-generator-sitemap --save cnpm install hexo-generator-baidu-sitemap --save

在网站配置文件中加入

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

搜索

添加站点内容搜索
安装 hexo-generator-searchdb

1	cnpm install hexo-generator-searchdb --save

修改站点配置文件，添加如下内容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，开启本地搜索功能

1
2
3

# Local search
local_search:
  enable: true

jsfiddle标签

由于jsfiddle标签生成的地址为http，请求会被会被浏览器拦截，需要访问jsfiddle对应https地址
修改next主题目录下layout/_partials/head.swig文件，在其中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

问题: 当在本地通过hexo s启动服务，访问http://localhost:4000时，页面资源都访问https下对应内容，导致页面显示错误。
找到jsfiddle.js，将其中的http改为https

1	return '<iframe scrolling="no" width="' + width + '" height="' + height + '" src="https://jsfiddle.net/' + id + '/embedded/' + tabs + '/' + skin + '" frameborder="0" allowfullscreen></iframe>';

我的Github博客开张了