【玩转腾讯云】云开发部署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 -v

vuepress -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 ，可以在 云开发控制台 查看和新建环境（按量计费）。

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