使用WebIDE搭建Hexo云端写作环境


前言

由于学习的需要,现在日常使用Ubuntu系统。但是,之前hexo的写作环境是搭建在Win10系统里的,如果想在Ubuntu系统里写博客的话,又得重新搭建环境,耗时耗力!

本着Setup Once, Write Anywhere的原则,便开始寻找一劳永逸的方法。

因为本博客是托管在Coding Pages上的,所以首先看看Coding有没有解决方案。幸运的是,Coding有一款产品叫Coding webIDE满足我们的需求!

Coding WebIDE 是 Coding 自主研发的在线集成开发环境 (IDE)。用户可以通过 WebIDE 创建项目的工作空间, 进行在线开发, 调试等操作。同时 WebIDE 集成了 Git 代码版本控制, 用户可以选择 Coding、GitHub、BitBucket、Git@OSC 等任意的代码仓库。 WebIDE 还提供了分享开发环境的功能, 用户可以保存当前的开发环境, 分享给团队的其他成员。

准备工作

  • 最好有hexo、git、ubuntu等的使用经验
  • 若没有coding.net的账号,可以点此注册
  • 完善个人资料,即可免费成为银牌会员
    注:银牌会员可以使用一个webIDE工作空间,配置:CPU×1,内存256M,磁盘空间2G

新建工作空间

新建工作空间

新建工作空间

选择空项目

选择空项目

填写项目信息并选择配置

填写项目信息并选择配置

运行工作空间

运行工作空间

配置工作空间

配置hexo

点击右侧边栏的Environments选项卡,然后选择使用ide-ttf-hexo环境。

配置hexo环境

配置git

1
2
git config --global user.email "Your Email"
git config --global user.name "Your Name"

配置npm

hexo的插件需要通过npm安装,换国内的源比较快

1
npm config set registry https://registry.npm.taobao.org

初始化hexo

workspace(即hexo-cloud)目录下,执行下列命令初始化hexo

1
2
3
hexo init blog
cd blog
npm install

至此,hexo环境已经搭好,并成功初始化!

预览博客

写好文章之后,通常需要使用命令hexo s预览博客效果。
在本地的话,直接在地址栏输入http://localhost:4000即可预览。
但是在云端要怎么访问呢?

方法是,点击右侧边栏的Access URL选项卡,然后在Port选择使用4000端口。
然后点击添加+,会生成一个临时链接(有效期为1个小时),访问该链接即可预览博客。
预览博客

(可选)导入原有博客

上述操作是在webIDE里新建一个hexo博客,但是如何导入已有的博客呢?

方式一

右键点击文件树空白处,可以选择上传文件。(但是好像不能上传整个目录)

方式二

由于每次更新博客之后,我都会把博客文件备份在coding的仓库里。所以,现在只需把该仓库clone到webIDE中即可。

1
2
// 复制原有的博客文件到文件夹 hexo_cloud/blog_backup 下
git clone https://git.coding.net/orzyt/blog_backup.git
1
2
// 删除之前初始化的博客文件
sudo rm -rf blog/*
1
2
// 将blog_backup中的所有文件移到blog中
sudo mv blog_backup/* blog_backup/.[^.]* blog/
1
2
// 安装原有博客所依赖的插件
npm install