【玩转 Cloud Studio】用Cloud Studio搭建自己的博客(hexo)

2023-05-18 14:37:27 浏览数 (1)

一、项目简介

1、简介

本文目的是通过腾讯云 Cloud Studio实现在线自动搭建个人博客(基于node.js的Hexo模版)的功能。

2、个人博客

如何搭建一个优美的个人博客呢? 本人博客如下:(●´3`●)HI~HI~ (metalheart.top)

本人博客本人博客
本人博客本人博客

其中需要的知识有:

  1. 服务器搭建
  2. 编译环境的搭建
  3. 博客代码编写
  4. 域名的绑定

等等。。。。。。

那么新人如何尝试呢,接下来我来介绍 腾讯云Cloud Studio这款在线平台

Cloud Studio_在线编程_在线IDE_WebIDE_CloudIDE

3、Cloud Studio

3-1、什么是Cloud Studio

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

Cloud Studio 作为在线 IDE,包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

3-2、Cloud Studio的特点与功能

特点特点

4、Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

官方平台:Hexo

Hexo官网Hexo官网

二、搭建部署 Cloud Studio与个人博客(HEXO)

1、搭建博客平台

第一步:打开Cloud Studio平台,进入个人页面。(如下图)

点击链接免费试用:Cloud Studio - 开启云端开发模式 WebIDE

每月赠送 1000 分钟免费额度。

模版界面模版界面

第二步:选择全部模版----框架模板---Hexo模版(如下图)

模版界面模版界面
Hexo模版Hexo模版

第三步:选择全部模版----框架模板---Hexo模版(如下图)系统会自动部署所需要的所有环境。

第四步:进入Hexo官网,选择主题,可以选择自己喜欢的主题。

主题链接:Themes | Hexo

第五步:添加主题

例如添加下面这个主题:

5-1、下载主题文件

代码语言:shell复制
cd themes 
git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine
下载成功下载成功
正确效果如上图所示正确效果如上图所示

5-2、修改配置文件

修改内部文件_config.yml 中的第100行,将主题名称改为之前下载的主题名称 redefine,修改如下:

代码语言:javascript复制
theme: redefine

5-3、重新配置并部署

在命令行输入下面命令,重新编译并部署,成功效果如下图:

代码语言:javascript复制
cd ./ && set port=4000 && export PORT=4000 && yarn install && yarn run server --port=4000
yarn install v1.22.19
编译成功编译成功

第六步:添加文章

Hexo博客文章采用Markdown编辑器编写。

设计个人文档设计个人文档

第七步:本地演示

三、写在最后

写在最后

云计算让软件的部署交付变得简单,如果我们把软件的开发到部署交付这个过程变得更自然与顺畅,会不会擦出不一样的火花,彻底是否云计算的生产力呢?这就是 Cloud Studio 产品想要做的事情。

如果您对上面的示例感兴趣,可以自己尝试一下哈~~~~

谢谢

0 人点赞