简单介绍一下:
云开发: https://console.cloud.tencent.com/tcb 开发者可以使用云开发 (CloudBase) 来直接开发网站应用, 包括普通的 PC 网页或者公众号中的网页等(俗称 H5), 在开发过程中即便需要后台服务也无需搭建服务器, 可以直接使用云开发提供的云端能力.
vuePress: https://www.vuepress.cn/ VuePress 由两部分组成: 第一部分是一个极简静态网站生成器, 它包含由 Vue 驱动的主题系统 https://www.vuepress.cn/theme/ 和插件 API https://www.vuepress.cn/plugin/ , 另一个部分是为书写技术文档而优化的默认主题, 它的诞生初衷是为了支持 Vue 及其子项目的文档需求.
接下来我们分三步进行: 搭建环境→创建项目→部署
搭建环境
1. 安装 Node.JS 和 NPM
通过 node -v 命令查看本机是否安装, 如果没有安装, 参考 node.JS 安装指南 https://nodejs.org/zh-cn/download/ 根据电脑系统环境进行安装
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/ 即可本地预览.
部署
在部署之前你需要先注册腾讯云 https://cloud.tencent.com/?from=10680 账号, 到云开发控制 https://console.cloud.tencent.com/tcb 台, 创建环境, 选择按量付费, 网站托管, 开启静态网站服务, 如果用过小程序云开发, 可以使用小程序账号快速登入 https://cloud.tencent.com/login/mp?from=10680 .
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 , 可以在 云开发控制台 查看和新建环境(按量计费).
如果在操作过程中遇到问题, 可以评论留下你的问题
来源: https://www.qcloud.com/developer/article/1606882