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

简单介绍一下:

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

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

搭建环境

1.安装Node.js 和 npm

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

2.安装cloudbase/cli

npm install -g @cloudbase/cli

3.安装VuePress

npm install -g vuepress

4.测试安装是否成功

cloudbase -vvuepress -v

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

创建项目

# 创建项目目录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.登入

cloudbase login

2.进入静态文件目录

cd .vuepress

3.部署文件

# 将 dist 目录下的所有文件部署到根目录cloudbase hosting:deploy dist -e envId

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

cloudbase hosting:detail -e envId

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

小结

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

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

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

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部