【牛刀杀鸡】Ubuntu搭建cloud9环境在线管理HEXO博客

引言

　　把博客环境更改为HEXO有一段时间了，使用起来还是有一些不习惯的地方的。我是把HEXO架设在自己的VPS上面，而不是像其他人那样在本地架设好后通过hexo d 命令来发布到Github之类的地方。所以我现在写博文的方式变成了先在本地写Markdown格式的文字，然后再上传到VPS的 _post 目录中。这样一来要是在外地出差或者不在常用电脑上不方便连接VPS的时候就很不方便了，最好是能够像以前用各种博客程序一样直接在后台发布文章，再交由系统自动生成静态页面。

hexo-admin 与 hexo-hey 优劣

　　通过一些了解，我尝试了 hexo-admin 或者 hexo-hey 两款补充hexo后台功能的插件，发现他们各有优劣。

　　hexo-admin 的优势是

• 除了创建post文章外还能创建page页面
• 后台编辑器支持mathJax等常用插件
• 可用复制粘贴方式自动复制图片

　　相比之下，hexo-hey 的最大优势是可以在后台修改模板的_config.yml文件，对于刚建立博客，模板还需调整设置的方面还略多，所以这一点最为方便。但上述的其他几点就不如 hexo-admin 了。虽然看起来 hexo-admin 的优势很多，但是还有一点让我略感遗憾的是，复制粘贴进来的图片默认放到img文件夹，当整个博客图片内容多的时候不好管理，所以我一般还是采用建立与 md 文件同名的资源文件夹的方式来管理相关资源，这样引用和管理都比较方便。另外一点就是不管是 hexo-hey 还是 hexo-admin 都需要通过hexo s实时运行着服务器才能使用，我一般是不启动这个服务器，而是把 hexo 生成的静态文件直接软链给 nginx 服务器的站点来访问，以节省系统资源。

Cloud9 IDE 与 Coding WebIDE

　　总而言之还是能够自己管控整个后台最方便，但是又不方便时时刻刻连入VPS，所以后面鬼使神差般的选择了在线IDE环境。在线IDE环境其实就是可以通过浏览器在线访问的一个编程环境，用来编写程序项目都没问题，用来管理一个小小的博客自然也不在话下，这也是为什么说是杀鸡用牛刀。当然选择这个除了管理博客之外，还打算以后可以很方便的在不同环境下写一些爬虫之类的小程序直接跑在VPS上。目前除了著名的 Cloud9 IDE之外，还有国内的“Coding.net”推出的 Coding WebIDE。但是因为懒得装JAVA环境，所以没选Coding WebIDE，最终决定采用Cloud9 IDE。

搭建 Cloud9 IDE 环境

　　搭建 Cloud9 IDE 的环境还是比较简单的，按照官方Github上的步骤来一步步安装即可，就是里面有一些前置环境的坑要填。

安装前置环境

　　官方的安装步骤中提到的前置需要安装的内容主要是Git、NodeJS这些，这些其实在我搭建 HEXO 的时候基本上都已经装好了，但是还是在安装 IDE 的时候遇到了问题，主要错误提示如下：

Error: `make` failed with exit code:

　　原因是我在VPS上把常用的编译组件卸载掉了用以精简系统，所以重新把这些编译用到的组件安装上就没什么问题了

sudo apt-get install build-essential g++

安装 Cloud9 IDE

　　填好前置环境的坑之后基本上安装 IDE 的过程中就不会遇到什么报错了，按照官方步骤先克隆Git仓库到本地，然后执行安装脚本就行。

git clone --depth=1 git://github.com/c9/core.git c9sdk
cd c9sdk
scripts/install-sdk.sh

　　我在这一步唯一与官方推荐方法不同的地方是在克隆的时候增加了--depth=1这个参数，加上这个参数只克隆最近一层，而没有把之前的历史记录一起取下来，节省一点空间，毕竟我只是克隆这个来安装使用而暂时不需要对它做开发，没必要获取其他分支和历史修改记录。

　　我发现在执行安装脚本的过程中，它会自动下载4.X版本的NodeJS包来安装，早知道之前安装HEXO的时候就不用那么折腾NodeJS版本了。如果执行过程中会弹出提示，一般是缺少环境或者提示你要用root/administrator身份来安装，如果不是root用户的安装的时候在前面加sudo就行了。

运行 Cloud9 IDE

　　安装完成之后通过很简单的命令就可以把IDE环境运行起来了。

运行 Cloud9 IDE 服务器

　　最直接的是直接node server.js来启动服务器，不过这样启动的只能本地的浏览器访问，然而Ubuntu Server系统不方便执行GUI浏览器，更何况我们本来搭建起来就是为了让其他电脑访问，所以还是需要增加一些运行参数。我的执行命令是：

node server.js -w ~/hexo/ -l 0.0.0.0 -a 用户名:密码

　　加入-w命令来指定工作目录，我把工作目录设定为整个 hexo 的安装目录，这样以后换模板改服务器设置等等都方便。

　　加入-l命令是为了让其他终端能够通过浏览器对它进行访问。

　　最后一个-a命令是为了增加简单的用户名密码来防止别人登录。

Cloud9 IDE 内存占用情况

　　之前我以为这类WebIDE的系统资源占用会比较高，所以安装运行完特地用top命令来查看了一下，执行结果如下

Tasks:  87 total,   1 running,  86 sleeping,   0 stopped,   0 zombie
%Cpu(s):  0.3 us,  0.0 sy,  0.0 ni, 99.7 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st
KiB Mem:   1024716 total,   502088 used,   522628 free,    57492 buffers
KiB Swap:  1044476 total,        0 used,  1044476 free.   228264 cached Mem
 
PID  USER     PR  NI    VIRT    RES    SHR S %CPU %MEM   TIME+COMMAND
1520 用户名   20   0  195732 108136  16980 S  0.0 10.6   0:29.18 hexo
1656 用户名   20   0  132228  37324  15228 S  0.0  3.6   0:35.65 node
1668 用户名   20   0  144564  33288  15432 S  0.0  3.2   0:10.44 node

　　发现目前内存的占用加起来还不及运行 hexo，看来我的低配VPS还是能勉强跑得动的。

浏览器访问 Cloud9 IDE

　　开始执行Cloud9 IDE的服务端之后，就可以在另外的电脑上用浏览器来访问它了。通过浏览器访问http://VPS的IP地址:8181（”8181”是默认的启动端口，也可以通过在启动的时候加上-p命令来指定别的端口）就可以看到 Cloud9 IDE 的界面了。浏览器首次进入的时候需要加载很多CSS和JS，所以启动会慢一些，后面就会好了。

　　另外浏览器推荐用Chrome，我这里不知道是电脑的问题还是怎样，用基于 Chromium 内核的其他第三方浏览器访问会一直卡在启动转圈的地方，而用原生的 Chrome 访问就很正常。

（之前忘记截这个界面的图了，这张图片取自这里）

在 Cloud9 IDE 下写HEXO博客

　　Cloud9 IDE 的布局跟我们常用的 IDE 比如 Eclipse、Visual Studio 甚至 Keil MDK 等很接近，左侧是资源文件，中间是代码编写和预览的地方，下面是一个 Shell 用来进行反馈编译等。

实时预览撰写 Markdown 博文

　　要用它来撰写博客也是很简单的，首先新建一个 markdown 文件，然后点击上方的Preview就可以在右侧打开一个预览窗口，这样就能很方便的在线直接编写博客。当然在本地用专门的 markdown 编辑器编写好之后再通过IDE上传也很简单，跟上传图片一样。

上传图片等资源

　　我之所以要用一个 IDE 而不想仅用后台插件，最主要的就是想方便上传和修改图片、音频等资源文件，在 Cloud9 IDE 中上传文件非常方便，直接把所需要的资源文件拖动到左侧的目录树中就能自动上传了，管理什么的也跟管理本地文件一样就行了，非常直观和方便。

更新静态文件

　　把博文内容和图片之类的处理好之后，就可以生成新的静态文件了。如果系统是运行着 hexo 的内置服务器的情况下，一般来说把博文保存到_posts目录下的时候就会自动生成了。不过我是把静态文件用 nginx 来做服务器提供访问的，所以写好之后，直接利用 IDE 下方的 Shell 窗口，切换到 hexo 站点的目录，通过hexo g命令来生成就可以了。

后记

　　通过这一系列的折腾，在 VPS 上架好了一把“牛刀”，虽然目前还是仅仅用来“杀鸡”（写写博客）而已，但是有了这个环境，后续直接远程进行编程，特别是在 Linux 环境下做一些事情也变得方便了起来。在实践搭建环境的过程中，也得到了很多经验与方法，这些也都是成长的收获。