简单介绍一下:
- 云开发:开发者可以使用云开发(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 ,可以在 云开发控制台 查看和新建环境(按量计费)。
如果在操作过程中遇到问题,可以评论留下你的问题