Node.js及Hexo静态博客的使用(CentOS7)

附上参考来源
原本我一直使用Linux+Nginx+MySQL+PHP+Memcache来搭建博客，因为工作的原因，对PHP相对非常熟悉，而且PHP7+Memcached的性能也足以应付大规模的商业软件。
当我想弄个自己的博客的时候，我就想，能不能换个工具呢。
大学期间就尝试过WordPress，那时候还用这个第三方CMS给大学开发过一些网站，但是WP给我的感觉就是漏洞多、性能差，当然，可能现在WP的性能并没有那么差，但使用WordPress会显得特别low，因此不适合我。
之前也用过GitBlog，也是一个基于MakeDown文的一个相对静态的博客，但是他还是需要经过index.php，并不是完全静态的博客。
由于我一直有看业内人士的博客的习惯，当看到他们写得内容特别好的时候，我也留意到他们使用的博客工具，Hexo确实吸引了我，这是一个基于Node.JS的全静态博客，能够满足我极简的需求，主题也不错，于是我开始研究如何搭建一个基于Hexo的博客。

一开始我并不了解Node.JS或者Hexo是如何运作，如何解析的，是使用何种Web服务器，于是只好慢慢研究。
我的服务器和自己的电脑都是Linux系统，PC是OpenSUSE，服务器是CentOS 7，CentOS上安装了nginx。

一、安装编译基础包

由于需要使用Git进行代码clone，故需要安装Git，安装Git之前需要安装编译基础包。

1
yum -y install gcc zlib-devel openssl-devel perl cpio expat-devel gettext-devel curl autoconf

二、安装Git

有时候git已经在服务器自带了，不需要下载源码安装。

1
yum install git

三、安装Node.js

由于Hexo是基于Node.js的，故还需要安装Node.JS。

1
2
3
4
5
6
wget http://nodejs.org/dist/node-latest.tar.gz
tar -zxf node-latest.tar.gz
cd node-v5.7.1/
./configure
make && make install
yum install npm

如果npm无法安装

1
2
ln -s /usr/local/bin/node /usr/bin/node
curl -L https://www.npmjs.com/install.sh | sudo sh

如果提示GCC编译器需要升级，可执行以下命令，升级GCC至最新版本：

1
2
3
4
5
6
7
8
wget http://gcc.skazkaforyou.com/releases/gcc-5.3.0/gcc-5.3.0.tar.gz
tar -zxf gcc-5.3.0.tar.gz
cd gcc-5.3.0/
./contrib/download_prerequisites
mkdir gcc_temp
cd gcc_temp
../configure --enable-checking=release --enable-languages=c,c++ --disable-multilib
make & make install

四、安装Hexo

1
npm install -g hexo

五、建立hexo目录

新建对应博客目录，对hexo初始化，初始化完成之后，安装依赖包。

1
2
3
4
mkdir blog
cd blog
hexo init
npm install

执行

1
hexo generate

生成完全静态页面，页面默认为Public，在nginx上配置默认目录为Public，这样网站就可以访问了。

六、安装主题

在blog目录执行git命令，安装相应主题，并修改配置文件即可。

1
git clone https://github.com/xiangming/landscape-plus.git themes/landscape-plus

至此，一个完全静态页面的生成器就产生了。

七、安装RSS

1
npm install hexo-generator-feed --save

_config.yml中添加

1
2
plugins:
- hexo-generator-feed

再一次执行

1
npm update

将会每次生成新的RSS/atom.xml

八、添加百度站点地图

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

在_config.yml中添加

1
2
baidusitemap:
path: baidusitemap.xml

九、增加TOC目录功能

修改layout/_partial/article.ejs的第21行，

1
2
3
<% } else { %>
  <%- post.content %>
<% } %>

改为

1
2
3
4
5
6
7
8
<% } else { %>
  <% if(post.toc !== false && toc(post.content)){ %>
    <div id="toc" class="toc-article">
      <%- toc(post.content)%>
    </div>
  <% } %>
  <%- post.content %>
<% } %>

并在source/css/_partial/article.styl中加入toc相关样式，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//toc
#toc.toc-article
//  background color-background
  width 100%
  border-radius 4px
  margin 1.6em 0 1.6em 2em
  line-height 1.5em
  font-size 0.9em
  -webkit-border-radius 4px

  h2, ol
    padding 0 0.4em
    margin 0
  h2
    cursor pointer
  @media mq-mobile
    margin 1.6em 0
    width 100%
  @media mq-tablet
    margin 1.6em 0
    width 100%
#toc
  line-height 1.3em
  font-size 0.8em
  float left
  .toc
    li
      list-style-type none
      a
        &:hover
          color color-font
          text-decoration none !important
  .toc-child
    padding-left 1.5em