Hexo博客搭建记录

Hexo是一款优秀的静态博客，本文主要记录了在搭建Hexo博客时的一些安装配置。通过Hexo配置了自己的个人博客，采用了Next主题。
访问域名：http://yaohuiye.com
github源码：https://github.com/yaohuiye/yaohuiye.github.io

环境安装

1. 安装NodeJs

2. 为防止网络问题导致下载卡顿.NoteJs配置为使用淘宝镜像，输入如下的命令：
   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 通过如下的命令安装hexo：
   cnpm install -g hexo-cli
cnpm install hexo --save

4. 验证hexo版本，此刻安装的最新版本是3.2.2
   hexo -v

5. 安装Git，并在Github上拥有一个账号。因为项目是部署在Github中，利用到了其提供的Pages功能

Hexo指令熟悉

• 清理生成文件
  hexo clean
• 新建文章
  hexo new "postName" == hexo n "postName"
• 新建页面
  hexo new page "pageName"
• 生成静态页面至public目录
  hexo generate == hexo g
• 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
  hexo server == hexo s
• 将.deploy目录部署到GitHub
  hexo deploy == hexo d
  备注：命令可以联结使用，如：hexo clean && hexo generate && hexo deploy。如hexo s -g

生成博客

1. 创建一个博客目录blog
2. 在blog文件夹中进入git的控制台
3. 进行Hexo博客的初始化
   hexo init
cnpm install
4. 运行博客
   hexo s -g
5. 在浏览器中输入：http://localhost:4000 ,则会展示博客内容

配置博客

主要的配置文件是blog目录下的_config.yml。在这个配置文件中可以修改博客的标题title,简介description,语言lang,主题theme

1. 博客采用了NexT主题，安装步骤如下：
   （1）进入blog目录下，打开git的控制台，输入如下的命令：
   git clone https://github.com/iissnan/hexo-theme-next themes/next
   （2）在blog根目录下的_config.yml中修改theme的值，修改为next
   （3）重新运行博客，在浏览器中即可看到效果
   备注：next提供了非常完整的帮助文档，具体可参考虑链接：
   http://theme-next.iissnan.com/getting-started.html
2. 设置站点的图标favicon.ico
   （1）制作一个favicon.ico文件，将其放到blog/source目录下
3. 设置404页面
   （1）这里主要引用的是腾讯的公益找人404.html
   （2）参考链接：http://theme-next.iissnan.com/theme-settings.html#volunteer-404
4. 设置分类页面categories
   （1）运行命令：hexo new page categories
   （2）此时在source目录下会生成categories文件夹，categories文件夹中会有一个index.md
   （3）打开index.md，完善如下的内容。type: "categories"一定要添加，不然页面上不会生成tag列表。如果有评论功能，则添加上comments: false来禁止。

 ---
title: 分类
date: 2017-02-12 15:25:57,
type: "categories"
comments: false
 ---

5. 设置标签页面tags
   （1）运行命令：hexo new page tags
   （2）此时在source目录下会生成tags文件夹，tags文件夹中会有一个index.md
   （3）打开index.md，完善如下的内容。type: "tags"一定要添加，不然页面上不会生成tag列表。如果有评论功能，则添加上comments: false来禁止。
   --- title: 标签 date: 2017-02-12 15:25:30 type: "tags" comments: false ---

6. 设置评论
   （1）这里设置的是多说的评论
   （2）参考链接：http://theme-next.iissnan.com/third-party-services.html#duoshuo

7. 设置分享
   （1）这里设置的是JiaThis
   （2）参考链接：http://theme-next.iissnan.com/third-party-services.html#share-jiathis

8. 设置站内搜索
   （1）这里设置的是Local Search。需要安装hexo-generator-searchdb插件
   （2）参考链接：http://theme-next.iissnan.com/third-party-services.html#local-search

9. 设置about页面
   （1）运行命令：hexo new page about
   （2）此时在source目录下会生成about文件夹，about文件夹中会有一个index.md
   （3）在index.md中进行个人介绍内容的编辑

10. 设置统计分析
    （1）这里设置的是百度统计
    （2）参考链接：http://theme-next.iissnan.com/third-party-services.html#analytics-baidu

11. 设置社交账号展示
    （1）参考链接：http://theme-next.iissnan.com/theme-settings.html#author-sites

12. 设置页面文章的篇数
    （1）安装相关插件
    cnpm install --save hexo-generator-index cnpm install --save hexo-generator-archive cnpm install --save hexo-generator-tag
    （2）在_config.yml配置文件中添加上如下的配置

index_generator:
per_page: 5
archive_generator:
per_page: 20
yearly: true
monthly: true
tag_generator:
per_page: 10

13. 添加RSS
（1）安装插件
    `cnpm install hexo-generator-feed --save`
（2）在_config.yml修改配置：

feed
type: atom
path: atom.xml
limit: 20

14. 添加sitemap
（1）安装插件
    `cnpm install hexo-generator-sitemap --save`
（2）在_config.yml修改配置：

sitemap:
path: sitemap.xml

15. 标题栏展示字数统计以及阅读时长
（1）安装插件
（2）找到themes/next/layout/_marcro文件夹中的post.swig文件
（3）定位到__post-time__的元素，在元素后面追加如下的代码：

|



字数统计:
{{ wordcount(post.content) }}(字)

|



阅读时长:
{{ min2read(post.content) }}(分)

（4）参考链接：http://www.joryhe.com/2016-06-06-hexo_wordcount_setting_your_post.html

 16.  加载google字体缓慢的解决
（1）打开next/_config.xml文件，在font属性下修改host为//fonts.css.network

font:
enable: true

Uri of fonts host. E.g. //fonts.googleapis.com (Default)

host: //fonts.css.network

### 部署到github，使之可以通过username.github.io来进行站点的访问
（1）参考链接：http://blog.csdn.net/u3d_ysj/article/details/50525820

### 部署到coding
（1）参考链接：http://www.jianshu.com/p/7ad9d3cd4d6e#

### 域名申请以及域名解析
（1）域名是在godaddy中购买，省去了备案的手续
（2）域名解析是在dnspod中配置的


### 写博客
1. 如写一个test文章，输入如下的命令
`hexo n "test"`
2. 在_post中就生成了一个test.md文件
3. 指定分类，在categories中添加上分类，如
`categories: 测试`
4. 指定标签，在tags中添加上标签，如

tags:
-test
-测试

5. 编写一段简介，然后换行添加上一行 ，这部分简介就会有列表页面展示
6. 编写文章内容
7. 重新生成页面，启动服务
`hexo s -g`
8. 确定文章写好后，将其提交到github中
`hexo clean && hexo generate && hexo deploy`  

### 参考链接
Maupassant主题：https://www.haomwei.com/technology/maupassant-hexo.html
Hexo搭建Github-Pages博客填坑教程：http://www.jianshu.com/p/35e197cb1273
Next主题：https://github.com/iissnan/hexo-theme-next
Next主题使用文档： http://theme-next.iissnan.com/
关于Github的配置、域名申请、图床：http://ibruce.info/2013/11/22/hexo-your-blog/