12月07日
使用 WebIDE 搭建 Hexo 个人博客

Coding 技术小馆是 Coding 主办的技术沙龙,2018.1.20 将在深圳与大家探讨《高效 Workflow 实践》 ,开放报名中,点击了解更多

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

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

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

建站

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

Hexo 工作区

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

WebIDE

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

Hexo-Workspace in WebIDE

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

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

$ hexo init <folder>

hexo init folder

接下来进入该文件夹(本文后面所有命令都在该文件夹目录中执行),并进行依赖安装:

$ cd <folder>

$ npm install

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

目录结构

写作

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

$ hexo new <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"

如图所示:

git-config

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

Hexo 部署区

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

存储区地址

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

如图所示:

设置1

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

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

如图所示:

设置2

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

$ hexo deploy

或者其简写形式:

$ hexo d

执行效果如下:

hexo-d

开启静态 Pages 服务

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

存储区项目页面

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

开启Pages
开启成功

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

部署成功

当然,如果你已经是老手的话,以上所有操作也可以放在同一个仓库的两个不同分支(一个分支用来写作,一个分支用来部署)。
更多博客设置请参考 Hexo 官网

39条评论

好东西,不过现在Codestudio需要收费了

neverX20171 年前回复

@cssj 感谢,还绕过了子文件夹

xsfecho1 年前回复

@CHENJuntong 在哪里修改样式路径啊?

one_sky1 年前回复

@a545250103
```

 第一步、新建存储区这样写(

你的账号.coding.me
```
)第二步、url:填入你的账号.coding.me 第三步、root 不填,保持原样。 这样就对了

beiyouyaoqi2 年前回复

我的留言呢?

南柯一梦 2 年前回复

我的样式不对吗,有一个步骤没写。

a5452501032 年前回复

醉了,css没生效。

a5452501032 年前回复

请问怎么更换主题呢?

在花2 年前回复

样式出问题一般都是路径配置不对噢~@dxn

CHENJuntong2 年前回复

@Cerdore 样式出问题一般都是路径配置不对噢~

CHENJuntong2 年前回复