【玩转腾讯云】云开发部署VuePress静态博客

2020-04-01 10:43:47 浏览数 (1)

简单介绍一下:

  • 云开发:开发者可以使用云开发(CloudBase)来直接开发网站应用,包括普通的 PC 网页或者公众号中的网页等(俗称 H5),在开发过程中即便需要后台服务也无需搭建服务器,可以直接使用云开发提供的云端能力。
  • VuePress:VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

接下来我们分三步进行:搭建环境→创建项目→部署

搭建环境

1.安装Node.js 和 npm

通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装

2.安装cloudbase/cli

代码语言:txt复制
npm install -g @cloudbase/cli

3.安装VuePress

代码语言:txt复制
npm install -g vuepress

4.测试安装是否成功

代码语言:txt复制
cloudbase -v

vuepress -v

如果看到输出版本号,说明已经安装成功。

创建项目

代码语言:txt复制
# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

这时候可以看到 vuepress-starter 目录下创建的 README.md 文档,他会做为主页内容渲染,直接编辑 vuepress-starter/README就能更新网站内容。此时通过浏览器访问 http://localhost:8080/ 即可本地预览。

部署

在部署之前你需要先注册腾讯云账号,到云开发控制台,创建环境、选择按量付费、网站托管、开启静态网站服务,如果用过小程序云开发,可以使用小程序账号快速登入。

1.登入

代码语言:txt复制
cloudbase login

2.进入静态文件目录

代码语言:txt复制
cd .vuepress

3.部署文件

代码语言:txt复制
# 将 dist 目录下的所有文件部署到根目录

cloudbase hosting:deploy dist -e envId

4.查看静态网站域名和状态

代码语言:txt复制
cloudbase hosting:detail -e envId

5.在浏览器打开静态网站域名,就可以看到 云开发部署的 VuePress 网站了

小结

创建项目时,使用命令创建 README.md 文件网站中可能会出现乱码,可以换成手动创建

部署过程中用到的环境ID envId ,可以在 云开发控制台 查看和新建环境(按量计费)。

如果在操作过程中遇到问题,可以评论留下你的问题

0 人点赞