×

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

96
Xiaoooolan
2016.07.06 13:12* 字数 2093

写在前面

抱歉读者们,这篇文章因为时间原因,写得比较急,所以之前没有使用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 WebIDE,单击“+ 新建工作空间”。


新建工作室空间

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


“同步仓库”按钮

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

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


获得免费码币的方法

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

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


Coding WebIDE

看看这高大上的终端!!!!!

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


单击切换运行环境

如图

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

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


二、正式开始

(⊙o⊙)…我是不是上面写的太详细了??我真是大好人(zi lian kuang)

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

sudo npm install -g hexo-cli

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


自动安装进程

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


安装结果

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

mkdir hexo

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

cd hexo

sudo hexo init

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

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

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

sudo chmod -R 777 *

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

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

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

我做了如下修改:

title: Xiaooolanlub
subtitle: xiaolan's Blog
description:
author: Xiaolan
language:
timezone:

修改完成之后别忘了保存。

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

hexo server

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

是不是非常的酷?


本地测试成功!

测试成功了,那么我们先在终端中按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

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


项目主页

仓库地址在您项目的“代码”页面中。

我填入了repo:

deploy:
 type: git
 repo: https://git.coding.net/weilantian/HexoDemo.git
 branch: master
 message: blog update

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

sudo hexo deploy

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

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


推送成功!

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

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


部署成功!

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


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

1、创建文章

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

sudo hexo new <文章名称>

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

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

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


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

cd source/_posts

sudo chmod -R 777 *

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

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


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

sudo  hexo generate --deploy

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

2、删除文章


删除文章的方法很简单。

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

sudo  hexo generate --deploy

3、更新文章

只需要修改文章内容,然后使用同上命令更新发布即可:

sudo  hexo generate --deploy

前往第二期》》
继续学习第二期关于域名绑定,资源404的解决方案等的解决方案...
【Markdown修改版】使用Coding.net来搭建基于Hexo的免费博客(一)

IT笔记
Web note ad 1