使用 WebIDE 搭建 Hexo 个人博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

现在起，不需要折腾 Hexo 环境，不需要解决不同平台上的各种冲突，直接在 Coding WebIDE 即可开始挥笔！

Hexo 的『写作』和『部署』是分开的，前者对应原来的本地电脑工作区，后者对应静态 Pages 仓库。

建站

首先，我们需要新开一个项目作为 Hexo 写作的『工作区』，里面存放的是 Hexo 的源文件，包括插件依赖、文章 md 文件、网站配置等，推荐建立私有项目进行 git 版本管理，以防文件丢失。

项目创建完成后，进入代码页，点击右上角的『WebIDE』按钮进入环境。

在右侧单击『运行环境』唤出面板，选择使用最下方的『ide-tty-hexo』。

点击左下角的『终端』，接下来就进入敲命令时间。

首先新建一个文件夹并进行初始化，工作区中的所有文件将存放在这个文件夹里面，文件夹名 <folder> 可自定义：

$ hexo init <folder> 

接下来进入该文件夹（本文后面所有命令都在该文件夹目录中执行），并进行依赖安装：

$ cd <folder>
$ npm install 

安装完成后，该文件夹的目录结构如下：

写作

在工作文件夹中执行这条命令来新建一篇文章，<title>即为文章的标题。

$ hexo new <title> 

终端会返回一条信息，告诉你文章源文件存放在哪里：

打开该 md 文件，开始你的写作吧！

Markdown 语法可参考这篇 帮助文档。

生成

写完 md 源文件后，我们需要 Hexo 帮忙生成静态文件，以便能在浏览器中看到渲染后最终的效果。
执行生成文件命令：

$ hexo generate 

或者其简写形式：

$ hexo g 

终端执行命令后效果如下：

目录中会多出一个 public 文件夹，刚才生成的文件都放在其中。

部署

在部署开始前，我们还需要安装依赖以及修改配置。
在『工作区』的 WebIDE 环境，执行这条命令安装部署到 git 服务器上的依赖：

$ npm install hexo-deployer-git --save 

输入以下两条命令来配置 git 环境变量，告诉 git 是谁在使用，将『you@example.com』和『Your Name』替换成你自己的邮箱和名字：

$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name" 

如图所示：

在文章开头已经说过，Hexo 的『写作』和『部署』是分开的，所以我们需要另外新建一个项目作为源文件编译后的『存储区』。
项目为私有或公有都可以，勾选“启用README.md文件初始化项目”。

记录下这个『存储区』项目的 SSH 地址：

接下来在目录中找到 _config.yml ，配置好部署参数，在其最下方找到 deploy: 字段，在 type: 后面填入 git，冒号后面记得加个空格，在 repo: 后面填入刚才记录下来的『存储区』项目的 SSH 地址，在 branch: 后面填入 master，记得，以上所有冒号后面都要跟一个空格才能生效。

如图所示：

还需要在 _config.yml 中配置 #URL 参数。在 url: 后面填入你的用户名.coding.me/『存储区』项目名字，root:后面填入『存储区』项目名字。

比如我的用户名是 chenjuntong，我的『存储区』项目名字是 Hexo-Blog，则在这里的 url: 填入 chenjuntong.coding.me/Hexo-Blog，root: 填入 /Hexo-Blog/， 注意，以上所有冒号后面都要跟一个空格才能生效。

如图所示：

最后一步，执行部署命令，即可部署到我们指定的『存储区』里。
执行部署命令：

$ hexo deploy 

或者其简写形式：

$ hexo d 

执行效果如下：

开启静态 Pages 服务

打开『存储区』项目页面，会发现之前在『工作区』生成的静态文件已经部署进来了：

点开Pages 服务设置页，在静态 Pages中，选择master 分支为部署来源，点击保存。
如图所示：

恭喜！成功部署后，点击运行网址，你的个人博客了上线啦！

更多博客设置请参考 Hexo 官网。