阅读 249

Cloud Studio搭建Hexo

Cloud Studio

Cloud Studio是在线集成开发环境,它提供了完整的 Linux 环境, 并且支持自定义域名指向。IDE 中有近 20 种开发环境,支持一键切换,进度实时保存。

Hexo

快速、简洁且高效的博客框架,Hexo依赖于Node.js,并且使用Markdown解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

随时随地搭建?

我们都知道,Github码云Coding都免费提供了静态网页托管服务,我们写好的代码上传到托管平台,通过pages服务可以实现外网访问。文章开头所述,Cloud Studio提供了完整的 Linux 环境,并且进度实时保存,我们只要有浏览器就可以随时开发并且部署,配合Pages服务,不用买服务器,就可以拥有自己的博客系统。

说了这么多,就是想让大家了解一下工作原理,下面让我们开始吧!

创建仓库

首先,我们打开腾讯开发者平台(需要注册腾讯云账号),点击右上角+号,新建项目。

然后按照图示,开启pages服务。

新建工作空间

打开Cloud Studio官网,点击新建工作空间,来源选择“腾讯云开发者平台”,项目选择上一步创建的仓库,运行环境选择Hexo

搭建Hexo

生成所需文件

由于我们选择的运行环境为Hexo,所以工作空间自带了Node.jsGithexo-cli。我们只需要运行以下命令就可以。

hexo init <folder>
cd <folder>  
npm install
复制代码

启动服务器

hexo clean
hexo d
hexo s
复制代码

创建访问链接

通过Cloud Studio右侧栏“访问链接”测试是否成功。

需要注意的是:端口改为4000,选择创建链接,然后点击创建的链接即可访问。

部署到Pages

安装 hexo-deployer-git

npm install hexo-deployer-git --save
复制代码

修改 _config.yml 参数

打开站点配置文件_config.yml,修改deploy属性。

deploy:
	type: git
	repo: https://gitee.com/giteetop/giteetop.git
	branch: master
复制代码

repo:你的仓库地址,可以是GithubGitee以及Coding

部署

hexo clean
hexo g -d
复制代码

过程中输入仓库的账号和密码,等待提交完成,然后就可以生成静态页面了。

常见问题

如果生成静态页面后,发现页面没有样式了,这是因为使用了域名访问,但是没有配置url路径。 打开站点配置文件_config.yml,修改urlroot属性。

# URL

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
复制代码

如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

关注下面的标签,发现更多相似文章
评论