使用Coding.net来搭建基于Hexo的免费博客(一)

前言:

抱歉读者们,这篇文章因为时间原因,写得比较急,所以之前没有使用Markdown来写,代码框复制的时候会错位,所以这里,我就更新一下,请读者移步至传送门

第二期教程已经发布,传送门:

【Markdown修改版】使用Coding.net来搭建基于Hexo的免费博客(一)

Hexo是什么

Hexo is a fast, simple and powerful blog framework. You write posts inMarkdown(or other languages) and Hexo generates static files with a beautiful theme in seconds.

Hexo 是一款 快速,简单而强大的博客框架。你可以使用Markdown(或其他语言)撰写文章,同时,您还可以使用其丰富的主题装点Hexo。

摘抄自 Hexo 官网

什么是Coding.net

   Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub,那就是 Web IDE。

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

摘抄自 Coding WebIDE 官网

   那么,很多人就会问,为什么Hexo需要在这个平台上搭建捏?答案很简单,因为Coding WebIDE为用户在在线开发过程中,提供套完整的Ubtuntu系统环境,用户可以使用它来进行云端开发。

   Hexo不像其他传统的博客引擎(如WordPress),Hexo生成的是静态页,当您完成写作后,你可以把其生成的页面Push到代码托管平台上,并开启静态演示,您的粉丝就可以访问并查看到您撰写的文章。但是,Hexo也有一个非常重要的缺点——必须在同一台主机上生成静态页,这就会导致如果您在外地,将无法快速发布文章,所依使用Coding.net的在线开发环境就可以解决这一问题了。

一、准备工作

首先,去Coding.net官网注册一个账号,接着,点击“+ 创建项目”,创建一个新项目。

要求:

项目名称和简介随意

项目类型选择“私有”

勾选“使用README.md初始化项目”

《使用Coding.net来搭建基于Hexo的免费博客(一)》 创建项目完成

接着,我们传送到Coding WebIDE,单击“+ 新建工作空间”。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 新建工作空间

随后,单击“同步仓库”,等待同步仓库完成。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 “同步仓库”按钮

接着,点开我们刚刚创建的项目。

哦,对了,webIDE是部分收费的,但是不用着急,官方提供了如下方式免费获得其网站虚拟币——码币,且Coding在注册后会送给用户一些码币,足以让IDE跑起来啦!

《使用Coding.net来搭建基于Hexo的免费博客(一)》 获得免费码币的方法,来源于Coding.net马币介绍页

好了,言归正传,我们创建IDE。配置不变,直接鼠标拉到最底下,单击“创建”,这时候,空间创建完毕,点开创建完成的工作空间。

WOW~~超酷诶!全屏正有种带GUI的Linux的既视感~~

《使用Coding.net来搭建基于Hexo的免费博客(一)》 Coding webIDE

《使用Coding.net来搭建基于Hexo的免费博客(一)》 看看这高大上的终端!!!!!

Hexo是基于Nodejs的,所以我们将运行环境切换为Nodejs。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 单击切换运行环境

《使用Coding.net来搭建基于Hexo的免费博客(一)》 如图

单击“使用”后,再单击确定。然而,貌似并没有发生什么……

下面,我们单击“终端”来打开终端【酷毙了】

二、正式开始

(⊙o⊙)…我是不是上面写的太详细了??我真是

大好人
(zi lian kuang)

进入正式安装步骤,首先,我们在终端中输入

sudo npm install -g hexo-cli

安装进程,就会全自动完成【这是重要的一步,有问题可以向我发评论。】

《使用Coding.net来搭建基于Hexo的免费博客(一)》 自动安装进程

如果安装结果如下图,安装就成功了

《使用Coding.net来搭建基于Hexo的免费博客(一)》 安装结果

接着,我们创建一个文件夹用于存放文章与设置。

mkdir hexo

然后,使用init命令初始化博客。

cd hexo

sudo hexo init

初始化进程需要安装一些辅助插件,所以比安装的时候慢,需要耐心等待…

等待初始化进程完成后,安装进程就正式完成啦~~~~

我们首先先解锁一下配置文件(将所有文件提权至777)

sudo chmod -R 777 *

接着,我们可以暂时关闭终端,编辑一下博客的设置,依次打开文件树中的目录 项目名->hexo->_config.yml

这时,我们就可以在编辑窗口中编辑属性。

title为标题,subtitle小标题【可不填】,author作者,language语言【可不填】,titmezone时区【可不填】。

我已经修改完成了:

《使用Coding.net来搭建基于Hexo的免费博客(一)》 我的修改

修改完成之后保存。

接着我们可以使用以下命令来开启本地服务器:

hexo server

然后,我们就可以通过单击右上角的访问链接,将端口设置为4000来访问网站。

是不是非常的酷?

《使用Coding.net来搭建基于Hexo的免费博客(一)》 本地博客测试成功!

测试成功了,那么我们先在终端中按Ctrl+C退出,然后按下访问链接中的垃圾桶来销毁端口。

那么大家刚才也看到了,IDE中的访问链接是测试用途,长且有时间限制,一看就非常不严谨,所以,我们要学会把博客Push到托管平台中。

那么,首先,我们先要安装Hexo Git插件以至于可以将静态页推送到托管平台上。

sudo npm install hexo-deployer-git –save

安装完成之后,我们配置一下_config.yml文件。

修改一下最下面的deploy:

deploy:

 type:

改为

deploy:

 type:git

 repo: [仓库地址]

 branch: master

 message: blog update

仓库地址可以在您的项目主页找到。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 项目主页

《使用Coding.net来搭建基于Hexo的免费博客(一)》 仓库地址在您项目的“代码”页面中。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 所以,我的项目就这样填写

随后,我们就可以将博客推送到代码托管平台了,最终端中使用这个命令:

sudo hexo deploy

和往常的推送操作一样,终端会要求用户输入用户名与密码。

这时,我们前往项目托管代码页,就可以看到推送过来的文件了。

《使用Coding.net来搭建基于Hexo的免费博客(一)》 推送成功!!

下面,我们开启静态页服务(Pages)。

只需要单击页面上的“Pages服务”,设置部署分支为master,然后单击“立即开启”,就可以访问啦!

《使用Coding.net来搭建基于Hexo的免费博客(一)》 访问成功

等等,为什么样式加载不出来了??很简单,这是因为Html处理请求的时候认为,您的域名为根,所以无法访问,最好的解决办法,就是绑定一个自己的域名,这里我就不讲了,相信大家都会,如果有需要,我会在下一篇文章介绍如何注册并绑定自己的域名。

三、添加、删除、编辑文章

1、添加文章

打开终端,以如下格式敲入命令:

sudo hexo new <文章名称>

这样,我们就创建了一篇文章。

可以在目录source->_posts中找到,并编辑【警告:文章名称为文章的英文名,不知此中文,中文名可以在Markdown文件中设置】。

这里,我创建了一篇名称为heisky的文章:

《使用Coding.net来搭建基于Hexo的免费博客(一)》

在编辑这篇文章之前,我们需要对文件进行提权:

cd source/_posts

sudo chmod -R 777 *

随后,我们可以先设置标题、发布日期以及标签。

接着,使用Markdown语法在编辑内容:

《使用Coding.net来搭建基于Hexo的免费博客(一)》

完成之后,我们需要更新博客,再次推送到代码托管平台:

sudo  hexo generate –deploy

再次访问就可以看到新的文章啦~

2、删除文章

《使用Coding.net来搭建基于Hexo的免费博客(一)》 删除文章

删除之后使用更新博客命令,就可以看到效果。

3、更新文章

只需要修改文章内容,然后使用如下命令更新即可:

sudo  hexo generate –deploy

前往第二期》》

继续学习第二期关于域名绑定,资源404的解决方案等的解决方案…

【Markdown修改版】使用Coding.net来搭建基于Hexo的免费博客(一)

    原文作者:Xiaoooolan
    原文地址: https://www.jianshu.com/p/97c8a94c002f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞