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

文章目录
  1. 1. 前言
  2. 2. 准备工作
  3. 3. 新建工作空间
    1. 3.1. 新建工作空间
    2. 3.2. 选择空项目
    3. 3.3. 填写项目信息并选择配置
    4. 3.4. 运行工作空间
  4. 4. 配置工作空间
    1. 4.1. 配置hexo
    2. 4.2. 配置git
    3. 4.3. 配置npm
  5. 5. 初始化hexo
  6. 6. 预览博客
  7. 7. (可选)导入原有博客
    1. 7.1. 方式一
    2. 7.2. 方式二

前言

由于学习的需要,现在日常使用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
分享到 评论