Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown解析文章，生成的静态网页布置在GitHub上面，作为个人博客使用十分方便。本文前面部分将讲Windows10环境来搭建hexo博客，并介绍hexo博客的相关设置以及优化，后面会有linux环境下的相关配置。

一、Windows环境

部分linux命令请在git base里面执行。

1.1 环境搭建

1.1.1 安装git

git下载地址

默认安装，配置好默认的用户

$ git config --global user.name "you_name"
$ git config --global user.email [email protected]

1.1.2 安装node.js

node.js下载地址

默认安装即可

用zip安装时，配置两个环境变量：一个是PATH上增加node.exe的目录D:\nodejs,一个是增加环境变量NODE_PATH,值为D:\nodejs\node_modules。目录地址转换成你的。

1.1.3 安装Hexo

$ cd d:/hexo
$ npm install hexo-cli -g  #安装全局环境
$ hexo init blog #你的博客环境
$ cd blog
$ npm install    # NPM是随同NodeJS一起安装的包管理工具
$ hexo g         # 或者hexo generate
$ hexo s         # 或者hexo server，可以在http://localhost:4000 查看效果

如果由于管理员权限而失败，可以用win+x选择”命令提示符(管理员)“来操作

到这里你已经可以看到效果了http://localhost:4000。

1.2 GitHub配置

（1）新建一个仓库，名字要和你用户名一样，例如：you_name.github.io ，GitHub会自动识别这次仓库为pages

（2）配置ssh秘钥，私钥自行保存，公钥放GitHub上

扫描二维码关注公众号，回复： 479040 查看本文章

$ ssh-keygen -t rsa -C "[email protected]" #或者下面这个
$ ssh-keygen -t rsa -f sample                     #文件名命名为sample

-t 指定密钥类型，默认是 rsa ，可以省略。
-C 设置注释文字，比如邮箱。
-f 指定密钥文件存储文件名。

SSH 在push的时候，如果配置SSH key的时候设置了密码，则需要输入密码的，否则直接是不需要输入密码的

目录文件C:\ Users\youname\.ssh\id_rsa.pub为你的公钥，id_rsa为私钥。公钥里面的内容复制到GitHub设置里。

然后配置~/.ssh/config文件,按照实际情况删减。

host github.com
#  port 22
#  compression yes
#  hostname 192.168.0.1
  user git
  identityfile ~/.ssh/id_rsa

（3）初始化仓库，即是上传一个任意文件上去。新建完仓库后，GitHub上会有提示。

（4）部署到GitHub上

配置博客根目录的_config.yml文件，把GitHub仓库地址配置进去。

  deploy:
    type: git
    repo: git@github.com:loongX/loongX.github.io.git
    branch: master

这里要注意一下，yml文件以缩进来区分各个元素的，所以缩进要一致。

在部署到GitHub前先要安装一个hexo-deployer-git插件。
Hexo提供了hexo-deployer-git工具，可以帮助部署Hexo到很多平台。

$ npm install hexo-deployer-git --save

在blog文件夹里

$ hexo g
$ hexo d  #部署到远程仓上。

这里会部署到GitHub上，打开你的pages网址可以看到内容了（类似这个loongX.github.io网址）。

这个部署上传的是public目录下的文件，public文件夹里面保存的是生成的静态文件。

1.3 Hexo 建设

hexo官方文档

1.3.1 目录结构

blog目录结构如下

.
├── _config.yml   #配置文件
├── package.json  #应用程序的信息
├── scaffolds     #模版文件夹
├── source        #资源文件夹是存放用户资源的地方
|   ├── _drafts   #草稿
|   └── _posts    #正文
└── themes        #主题文件夹

1.3.2 基础命令

$ hexo generate                # 简写：hexo g，生成静态文件，会在当前目录下生成一个public文件夹
$ hexo server                  # 简写：hexo s，启动本地服务，用于博客的预览
$ hexo deploy                  # 简写：hexo d，部署到远程（如GitHub，可以在_config.yml中配置）
$ hexo new post-name           # 简写：hexo n post-name， 新建文章 
$ hexo new page page-name      # 简写：hexo n page page-name，新建页面

$ hexo d -g                    # 生成和部署
$ hexo s -g                    # 生成和预览

$ hexo new draft <title>       # 新建草稿，存放在source/_drafts
$ hexo publish post <title>    # 发布草稿为文章，文章转移到source/_posts
$ hexo s -g --drafts           # 显示草稿

$ hexo new page tags           # 使用 Hexo 命令新建一个名为 tags 的页面
$ hexo s -p 5000               # 更改端口号为5000

1.3.3 更换主题

$ hexo clean
$ git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

然后修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为yelee。

1.3.4 添加插件

RSS 对应插件——feed插件https://github.com/hexojs/hexo-generator-feed

Sitemap for SEO 站点地图通用插件: hexo-generator-seo-friendly-sitemap

百度专用Sitemap: hexo-generator-baidu-sitemap

添加插件添加sitemap和feed插件

$ npm install hexo-generator-feed 
$ npm install hexo-generator-sitemap 
$ npm install hexo-generator-baidu-sitemap@0.1.1 --save

修改_config.yml，增加以下内容

Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

#通用sitemap
sitemap:
 path: sitemap.xml

 #百度爬虫
baidusitemap:
path: baidusitemap.xml

配完之后，就可以访问http://loongx.github.io/atom.xml和http://loongx.github.io/sitemap.xml，发现这两个文件已经成功生成了。

1.3.5 绑定独立域名

先购买域名：

阿里云域名购买

godaddy域名购买

然后在你的域名注册提供商那里配置DNS解析，你可以解析到ip也可也解析到域名

CNAME — www —默认线路—loongx.githut.io

CNAME—-@—-默认线路 —–loongx.githut.io

进入source目录下，添加CNAME文件

$ cd source/
$ touch CNAME
$ echo "okloong.com" >> CNAME # 输入你的域名

如果你按照下面步骤做了，在coding上也同样做了一个pages的话，你可以把国内的访问引向coding，国外的访问引向GitHub。

CNAME — www —默认线路—okayloong.coding.me

CNAME—-@—-默认线路 —–okayloong.coding.me

CNAME — www —海外线路—loongx.githut.io

CNAME—-@—-海外线路 —–loongx.githut.io

1.3.6 写博客

markdown编辑器

hexo写博客是用markdown语法来写的，用具有markdown功能的软件会比较方便些，我这里用的是Typora，简单好用。

在\source\_posts文件夹里面支持文件夹形式。如果你觉得你文章太多，想分类，你可以直接新建文件夹来分类各个文章，hexo会识别到文件夹里面的文件的。这样做只是为了你方便好看，但是hexo会忽略你的文件夹名字。

插入本地图片

使用本地路径：在hexo/source目录下新建一个img文件夹（其他名称也行），将图片放入该文件夹下，插入图片时链接即为：‘/img/图片名称’。如果你用了文件夹放请加上文件夹名词，hexo这次会连带文件夹生成路径。

![picture](/img/aaa/Koala.jpg)

插入歌曲

这示例里面的链接是网易云音乐的分享链接


<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86   

    src="http://music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66">  

</iframe>

插入视频

<iframe
    height=498 width=510   

    src="http://player.youku.com/embed/XNjcyMDU4Njg0"   

    frameborder=0 allowfullscreen>  

</iframe>

1.4 主题配置

1.4.1 yelee主题

yelee官方文档

大部分设置只要在主题下的_config.yml文件里配置就可以了，里面的注释说得很清楚了，官方文档也说得很详细。下面说一些特殊的。

配置文件中参数紧接的冒号后面都需要加一个空格！包括文章头的标题框里面的设置也是。

1.4.1.1 标签、分类以及我的页面设置

1.标签云设置：
使用 Hexo 命令新建一个名为 tags 的页面即可

hexo new page tags

2.关于我页面

使用 Hexo 命令新建一个名为 about 的页面即可

hexo new page about

该页面内容在文件 \hexo\source\about\index.md 中修改

然后，将上面两个在下面配置中建立链接关系。

menu:
  主页: /
  所有文章: /archives/
  标签云: /tags/
  关于我: /about/

注意：
在hexo里面已经包含了tags和cataloges相关的设置了，不需要新建catalages page，分类和标签会显示在标签云里面。如果你在使用hexo new page catalages创建一个catalages分类，会只显示一个空白网页。

博客模板修改

将\freeshow.github.io\scaffolds下的post.md模板文件修改为如下：

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

当写文件时，就可以填写所属tags或categories了。
tags和categories都会显示在 标签云 中.

1.4.1.2 修改文章置顶

主要是修改文章的排列规则

node_modules/hexo-generator-index/lib/generator.js

'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);
  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

//****************开始添加*********
  posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  //****************添加结束*********

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后在文章中，增加top值定义，值越大，文章排序越靠前。top值默认为0，若不设置top，则不参与排序。示例：

title: 为Hexo添加文章置顶功能
categories: sample
tags: simple
top: 1
date: 2016-07-20 11:44:40

如果想按更新时间排序：改一下上面的代码中的a.date, b.date 分别改为 a.updated, b.updated

1.4.1.3 其他设置

增加文章打赏功能
 修复404在非根目录下错误链接，导致style.css无法正确获取

1.4.2 Next主题

Next是hexo框架上的一个主题。由于它简洁清晰，受很多人追捧。我也没忍住将个人博客主题换成next主题来试下效果。下面将讲述hexo的next主题的相关设置。

1.4.2.1 添加标签页面

新建页面

输入如下命令：

$ hexo new page tags

输入命令后，在myBlog/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件。

设置页面类型

在上步新生成的myBlog/source/tags/index.md中添加type: "tags"，index.md文件内容如下：

---
title: 分类&标签
type: "tags"
date: 2017-09-22 00:30:37
---

设置具体文章的tags

当要为某一篇文章添加标签，只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可，如：

---
title: Next主题设置
date: 2017-10-31 10:10:12
tags: hexo
categories:
---

1.4.2.2 添加分类页面

步骤与添加标签页面类似，具体如下：

新建页面

输入如下命令：

hexo new page categories

输入命令后，在myBlog/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件。

设置页面类型

在上步新生成的myBlog/source/categories/index.md中添加type: "categories"，index.md文件内容如下：

---
title: categories
date: 2017-10-31 10:36:29
type: "categories"
---

设置具体文章的categories

当要为某一篇文章添加分类，只需在myBlog/source/_post目录下的具体文章的categories中添加分类即可，如：

---
title: Next主题设置
date: 2017-10-31 10:10:12
tags: hexo
categories:
---

1.4.2.3 修改内容区域的宽度

我们用Next主题是发现在电脑上阅读文章时内容两边留的空白较多，这样在浏览代码块时经常要滚动滚动条才能阅读完整，体验不是很好，下面提供修改内容区域的宽度的方法。
Next 对于内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应

如果你需要修改内容的宽度，同样需要编辑样式文件。
在Mist和Muse风格可以用下面的方法：
编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

当你使用Pisces风格时可以用下面的方法，在 source/css/_variables/custom.styl 中添加：

$main-desktop                   = 1200px
$content-desktop                = 900px

1.4.3.4 分享样式修改

jiathis样式可以在目录themes\next\layout_partials\share下的jiathis.swig文件里面修改。
在我的博客里，我把文字和栏目作了调整。官网上也有对应的代码参考。

<span class="jiathis_txt"></span>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_cqq"></span>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_fav"></a>
<a class="jiathis_button_copy"></a>
<a class="jiathis_button_email"></a>
<a class="jiathis_button_share"></a>

1.5 Coding设置

Coding像GitHub一样也提供pages功能，配置方法和GitHub配置差不多。这里用Coding是因为，GitHub在国内访问是比较慢的，Coding在国内访问就比较快一点，而且也方便百度搜索引擎抓取。在设置dns时候，把国内访问的流量引向Coding上，国外线访问就引向GitHub上，这样就比较合理一点。

1.5.1 配置ssh秘钥

按照上面的给GitHub配置ssh秘钥的步骤同样给coding平台布置即可。

1.5.2 建立coding-pages

下面是创建一个「项目 Pages」的操作示例：

这里另外找一个test文件夹来测试就好了。

1.登录 Coding.net，创建一个项目，项目名称为：user_name.coding.me

2.在本地创建一个项目文件夹，添加一个测试用的 index.html 文件。

<html>
   <head>
     <title>My Coding Pages</title>
   </head>

   <body>
      <h1>Hello Coding!</h1>
   </body>
</html>

3.将项目文件夹初始化为 Git 版本库，提交 index.html 到版本库，并为项目添加远程仓库地址。

git init
git add index.html
git commit -m 'init'
git remote add origin  [email protected]:{user_name}/{project_name}

请别忘记将上面代码中的远程仓库地址的 {user_name} 和 {project _name} 替换成你自己的个性后缀（Global Key）和项目地址。

4.在本地创建一个 coding-pages 分支，切换到该分支。

git checkout -b coding-pages

5.将 coding-pages 分支推送到 Coding.net。

git push origin coding-pages

6.在项目的「Pages 服务」设置中，选择部署来源为 coding-pages 分支，点击「保存」按钮。稍等片刻即可完成部署并通过 {user_name}.coding.me／{project_name} 访问你的网站.

1.5.3 部署博客

在你的博客目录

在你博客根目录下的_config.yml文件里配置

deploy:
  type: git
  repo: 
     github: git@github.com:loongX/loongX.github.io.git,master
     coding: git@git.coding.net:OkayLoong/Okayloong.coding.me.git,coding-pages

部署到平台上：

hexo d -g

1.5.4 自定义域名

coding的普通用户不能自定域名，也就是说你刚刚注册到的账户是没有这个功能的，你需要补充完资料，升级账户才能用。升级账户后，在“pages服务”里添加进你的域名进去，并配置好dns解析就好了。

1.6 Hexo多电脑同步的方法

一般思路是，创建两个仓库，一个用来保存hexo源码，一个是用来保存生成的博客文件。为了源码的安全建议是把源码保存在一个私有仓内。这里我采用coding建立私有库。码云也提供私有库功能，方法类似。

说下这个两个仓库的结构：

Hexo-blog分支 – 用来保存所有Hexo的源文件

master分支 – 用来保存Hexo生成的博客文件

1.6.1 创建私有仓库

在coding平台上创建一个私有项目，名称为Hexo-blog，并初始化仓库（按照上面的要求上传一个任意文件上去，否则后面的操作会报错）。

上传时候需要把主题里面的.git文件夹删掉，要不然上传到私有库时候会漏掉主题部分的代码的。

但这个有个问题，你删后，原来主题的有更新就得不到及时更新了。

rm -fr ./themes/yelee/.git/   #删除主题里面的git
git init                     #建立本地的git仓库
git remote add origin [email protected]:OkayLoong/hexo-blog.git  #添加远程仓，注意要添加ssh秘钥
git add .
git commit -m "my first private hexo"
git push -u origin master

但是如果你的主题改动比较大，更新反而很多冲突，那自己维护也行。不过这里有个取巧的办法。

主题刚下载还没同步到私有仓时候，把主题里面的.git文件夹删除掉，同步一下私有仓，然后撤销删除，把主题里面的.git文件夹还原回来。这时候，你两边的仓库都能更新了。

上传私有仓

git status                     #这个只是查看状态，可以不写
git add .                      #把整个文件夹添加进去
git commit -m "update"         #git规定一定要写，要不然上传不了
git push origin master         #简写 git push

可以将上面的代码保存为deploy.sh，这样就不用每次都敲了。但注意不要用中文名。

拉取私有仓回本地

一般git pull就够了，但是如果有冲突可以按照下面的方式来解决，以远程仓库为标准代码覆盖原来的。

git fetch --all                  #将git上所有文件拉取到本地
git reset --hard origin/master   #强制将本地内容指向刚刚同步git云端内容

1.7 优化

1.7.1 图片优化

图片存放有两种方式，图片可放到CDN上缓存，或者放到本地保存，然后调用时候写上图片的链接或路径即可。我选择了放到本地。但是这么做会有两个问题，如果文章目录比较深，而图片放到/source/images目录下面的话，编写文章时候写的路径不会有预览，要替换图片时候，不好找图片，也不方便管理。针对这问题，我是把图片放到和文章同一级目录下的images文件夹，这样管理和预览这两个问题就很好解决了。生成博客时候需要把图片提取到/source/images目录下。

为了方便管理我做了一个下面这么一个脚本。

update-picture.sh

#!/bin/sh
#文章图片放到文章当前的images文件夹下面，这主要是为了写文章方便看图
#生成博客时候把图片同步到./source/images目录下
echo "######  rmove"    
rm -rfv ./source/images/*   
echo "######  copy"
find ./source/_posts  -name 'images' -type d | xargs -i cp -avx {} ./source/
find ./source/system  -name 'images' -type d | xargs -i cp -avx {} ./source/

git上传源码时候如果连同/source/images目录下的图片一并上传的话，那么会有两份相同图片，一份是文章目录下的图片，另外一份是这个/source/images目录下的，鉴此，我就忽略上传/source/images文件夹了。在ignore文件里面添加source/images/。如果之前有同步过这个文件夹下的图片，那么则需要删掉缓存和git后台的对应文件。

还有一点就是，如果这么做，图片要起一个全局唯一的名称，或者在image里面设置多重文件夹里面来区分识别。

二、Linux环境

大部分会和Windows差不多，重复的就不多说了。我用的是Ubuntu系统。

2.1 环境搭建

安装node.js, npm ,hexo

安装node.js,npm

官网下载源码,然后解压,进入起文件夹进行编译.如果你下的是二进制文件就复制到对应文件夹下面,并添加环境变量.

./configure --prefix=/usr/local/node/node-v8.9.1 #配置参数,指定了安装目录
make
sudo make install
sudo gedit /etc/profile

#添加路径进去


#后来用sudo执行时候没有这个环境变量,我也在/root/.bashrc下添加了路径


#set for nodejs

export NODE_HOME=/usr/local/node/node-v8.9.1
export PATH=$NODE_HOME/bin:$PATH

#一般是重启会设置路径,如果想立刻看到效果,执行下面的命令

source /etc/profile
node -v
npm -v

除了源码编译外,你也可以下载编译好的包,解压到对应文件夹

下面这个是直接安装方式,但是版本会比较旧

sudo apt install nodejs
sudo apt isntall npm

其他命令

npm install npm -g  #升级npm
npm install module_name #安装模块
npm ls -g   #查看所有全局安装的npm模块
npm uninstall module_name #卸载模块
npm update module_name #升级模块

安装hexo
```
npm install -g hexo-cli
```
执行这个时候可能会有权限问题，因为你用的是sudo的权限make进去的，用户拥有者为root，同一个用户组没有写权限。你可以用下面的命令修改。
```
sudo chmod -R 775 /usr/local/node #更改权限

#或者下面这条命令

sudo chown -R ubuntu:root /usr/local/node #更改拥有者
```
-R参数是递归处理目录下的所有文件以及子文件

775是权限设置

ubuntu:root表示用户和用户组,用户组非必须。
blog源码移植

你之前的blog是在windows系统上写的，现在移植到Ubuntu系统上，那么只要下载blog代码到本地，添加node的相关插件，基本可以了。

如果你是有写脚步来辅助的，可能会并没有相关的执行权限。可以用下面的方式来添加执行权限。
```
find *.sh | xargs -i chmod +x {}
```
出现“pull.sh: 5: pull.sh: Syntax error: “(” unexpected”错误，那是因为Ubuntu系统默认的sh为Dash，语法有点不同。脚步里面可以改为#!/bin/bash 或 #!/usr/bin/env bash。但是为了windows端和linux端同步，我决定改该shell为bash shell。
```
sudo dpkg-reconfigure dash #选择”否“
ls -l /bin/sh #查看效果
```

Hexo博客搭建