服务器部署博客：AsiaInfo

以前Hexo博客是托管到github上，因为国内访问github速度有些慢，这次试着把博客部署到阿里云的服务器上。本地系统Windows10上需要安装node.js+hexo。下面做一个详细的介绍。

本地端

安装git bash（git安装原文来自百度经验）

由于使用的是git命令。所以需要安装git bash，安装过程如下。

由于安装过程千篇一律，安装的详细过程请百度一下：

图文详解Windows下安装最新版Git_百度经验

安装node.js
1、Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

本文实例以 v0.10.26 版本为例，其他版本类似， 安装步骤：

步骤 1 : 双击下载后的安装包 v0.10.26，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs\” , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js，点击开始$=》运行=》输入”cmd” => 输入命令”path”$，输出如下结果：

1
2
3
4
5
PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

2、Windows 二进制文件 (.exe)安装

32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node.exe

64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node.exe

安装步骤

步骤 1 : 双击下载的安装包 Node.exe ，将出现如下界面 :

点击 Run（运行）按钮将出现命令行窗口：

版本测试

进入 node.exe 所在的目录，如下所示：

node-version
node-version

如果你获得以上输出结果，说明你已经成功安装了Node.js。

Hexo安装
利用命令行安装hexo

Node.js安装完成后,在电脑任意位置,右键,选择 GitBash ,执行npm命令

1
npm install -g hexo
创建本地hexo文件夹(地址名字可自定义)

安装完成后,在本地选择一个目标文件夹(如:F:\Hexo),注意:在F:\Hexo文件夹内右键,选择GitBush,执行以下指令,Hexo就会自动在目标文件夹下创建建立网站所需要的文件,一分钟左右会执行完成

1
hexo init

效果如下:

安装依赖包,该命令执行后没有什么提示,完成后的本地文件夹列表为图示,可能会有所不同

1
hexo install

初始化完成后目录图:

注意:因Hexo 3.0以后把服务器独立成了单独的模块,所以还需要安装hexo-server才可以使用,执行命令

1
npm install hexo-server –save
本地校验查看

到目前为止,我们已经搭建起本地的hexo博客了,执行以下命令(在F:\Hexo)中,然后根据提示到浏览器中进行访问,地址为 localhost:4000

1
2
hexo g 或者 hexo generate
hexo server 或者 hexo s

图示为:

如果访问成功,即代表了本地博客配置成功,但有以下几点需要注意：

  • 每次想访问本地博客,至少需要执行hexo s命令,这样才相当于服务启动,然后才可访问

  • 有的电脑4000端口可能被占用,导致每次访问localhost:4000提示一直找不到网页,这时就需要修改端口号,执行命令 hexo s -p 5000 即代表使用-p将端口号改为了5000,访问网址为localhost:5000

  • 成功图示 :

  • 按下Ctrl+C即可停止服务
Hexo主题设置

你可以在官网 或者 https://github.com/hexojs/hexo/wiki/Themes 选择你需要的主题
下载主题

1
$ git clone <repository> themes/<theme-name>

启用主题
修改your_blog_name目录下的_config.yml配置文件中的theme属性，将其设置为上面的 theme-name
修改设置后如果在浏览器中没有看到想要的效果，使用$ hexo clean来清除缓存，然后重新生成静态文件$ hexo g
修改主题
修改主题是在 theme\your_theme 目录下进行相关操作的，本节内容主要讲的是修改 raytaylorism 主题。使用 raytaylorism 主题的注意事项在该主题的官方 github 地址中已经说明得很清楚了，只需要严格按着开发者要求做，就不会出现什么大问题。

  1. 如果你想使用英文语言，建议将 languages 下的 default.yml 文件名修改为 en.yml，因为我在电脑上使用 default.yml 的时候，网页的语言会偶尔变成中文或者繁体，不知道什么原因。
  2. 如果你觉得正文在大屏幕下显得太窄（默认为700px定宽），可以修改 source\css\_base\lib_customize.styl 中的 .container 类的宽度设置，修改之后往往会出现右侧的目录栏与正文重叠的情况，继续修改 source\css\_partial\tablecontents.styl 里面的 left calc(50% + 350px) ，建议修为 350px 为你的正文宽度的一半，或者你自行调整直至满意。
  3. 在 layout\_partial\plugin\reward.ejs 文件中可以替换转账二维码和显示的“打赏文本”。
  4. 站点分析工具我使用的是百度分析平台，在 _config.yml 配置文件中添加
1
baidu_analytics:

然后将你的百度分析ID添加在后面。接着在

1
layout\_partial\plugin\analytics.ejs

文件后面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
<% if (theme.baidu_analytics){ %>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>

为 raytaylorism 主题添加统计站点访问量的功能：在

1
layout\_partial\after_footer.ejs

文件中添加如下代码：

1
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后将

1
layout\_partial\footer.ejs

文件中最后一个

1
<p>

元素替换成下面的代码：

1
2
3
4
<p class="right" style="margin-top: 0;">
<span id="busuanzi_container_site_uv" style="display: none;">
您好，您是本站点的第 <span id="busuanzi_value_site_uv" style="color: yellow;"></span> 位访客，祝您生活工作愉快
</span></p>

如果想给每篇文章添加统计阅读量，我的做法是在 

1
layout\_partial\aticle.ejs

文件中的

1
<%- partial('post/time') %>

行后面添加如下代码：

1
2
3
4
<div style="float: right;color: #E91E63">
<span id="busuanzi_container_page_pv" style="display: none;">
阅读次数 <span id="busuanzi_value_page_pv"></span>
</span></div>

提醒，不要把上面的代码添加到

1
layout\_partial\post\time.ejs

服务器端

在服务器端，我们需要完成以下几件事情。

  1. 为本地的 hexo_blog 配置一个部署静态文件的远程仓库。
  2. 配置 Nginx 托管博客文件目录。
  3. 配置远程仓库自动更新到博客文件目录的钩子。
创建私有 Git 仓库

在/git/lvshen/下，创建一个名为 hexo_static的裸仓库（bare repo）。

然后修改目录的所有权和用户权限，之后 linux 用户都具备/git/lvshen/ 目录下所有新生成的目录和文件的权限。

1
2
3
sudo mkdir /git/lvshen/
sudo chown -R $USER:$USER /git/lvshen/
sudo chmod -R 755 /git/lvshen/

然后，执行如下命令：

1
2
cd /git/lvshen/
git init --bare hexo_static.git
创建 Git 钩子

接下来，在服务器上的裸仓库 hexo_static 创建一个钩子，在满足特定条件时将静态 HTML 文件传送到 Web 服务器的目录下，即 /home/lvshen/hexo。

在自动生成的 hooks 目录下创建一个新的钩子文件：

1
vim /home/git/wade/konwledge.git/hooks/post-receive

在该文件中添加两行代码，指定 Git 的工作树（源代码）和 Git 目录（配置文件等）。

1
2
3
#!/bin/bash
git --work-tree=/home/nginx/html/doc/bl/lvshen --git-dir=/git/lvshen/konwledge.git checkout -f

保存并退出文件，并让该文件变为可执行文件。

1
chmod +x /home/git/wade/konwledge.git/hooks/post-receive
配置 Nginx 托管文件目录

接下来，创建 /home/nginx/html/doc/bl/lvshen 目录，用于 Nginx 托管。

1
sudo mkdir -p /home/nginx/html/doc/bl/lvshen

和上一步类似，这里也需要修改目录的所有权和权限。

1
2
sudo chown -R $USER:$USER /home/nginx/html/doc/bl/lvshen
sudo chmod -R 755 /home/nginx/html/doc/bl/lvshen

然后，修改 Nginx 的 conf 设置：

1
sudo vim /home/nginx/conf/vhost/bl.wadecn.com.conf

将其中的 root 指令指向/home/nginx/html/doc/bl/lvshen 目录。

1
2
3
4
5
6
7
8
9
10
11
sserver {
        listen          9000;
        server_name     bl.wadecn.com;
        index           index.html index.htm index.php;
        root            /home/nginx/html/doc/bl/lvshen;
        #/home/nginx/html/doc
        #log_format bl.wadecn.com '$remote_addr - $remote_user [$time_local] $request'
        #'$status $body_bytes_sent $http_referer '
        #'$http_user_agent $http_x_forwarded_for';
        #access_log  log/bl.wadecn.com.log doc.wadecn.com;
}

保存并退出文件。如果以后购买并备案域名之后，可以再将配置中的 default_server 修改为你的域名。

最后，重启 Nginx 服务，使得改动生效。

1
[root@bogon conf]# /home/nginx/sbin/nginx -s reload        #重启nginx
建立SSH信任关系

为了在本地能不需要密码的上传代码到服务器，需要在本地生成一个密匙并与服务器关联。

1
2
3
4
5
6
#在本地生成公钥和密钥：
ssh-keygen -t rsa
#将本机生成的公钥发送到服务器上（建立信任关系）：
ssh-copy-id -i C:/Users/UserName/.ssh/id_rsa.pub root@server_ip       #UserName是电脑的用户名
#测试ssh远程登录是否成功：
ssh root@server_ip

这样前后端的配置都完成了。我下载了一个主题：

1
$ git clone https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker

部署博客地址：AsiaInfo