专栏首页云开发分享【玩转腾讯云】云开发部署VuePress静态博客
原创

【玩转腾讯云】云开发部署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 ,可以在 云开发控制台 查看和新建环境(按量计费)。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • serverless部署个人简历网页

    今天和大家分享一篇,serverless部署个人简历的文章,简单的说就是不用购买服务器部署一个个人简历网站。

    城南旧事
  • 【玩转腾讯云】云开发WEB入门实践

    这个项目是我参加腾讯云云开发实战营【web云开发赛道-FILES存储】时开发的,因为网上云开发web实战很少,所以我整理了代码上传到GitHub上并写了这篇文章...

    城南旧事
  • 【云开发校园技术布道师】云笔记小程序

    我们平时听课、开会、学习都会记录一些重要的知识,这个时候我们要是手写记录的话,速度有可能会跟不上,有时还会错过重要的知识点。很多时候讲师都是使用ppt授课,这个...

    城南旧事
  • Windows下配置kali子系统

    然而下好的系统干净的一塌糊涂,里面连 python 都没有,所以还得自己装一些东西,这里主要说怎么把 kali 里的那些工具装上

    yichen
  • Github项目推荐 | 用于自然语言处理的开源 Python 库 —— PyTorch-NLP

    PyTorch-NLP 是用于自然语言处理的开源 Python 库,它构建于最新的研究之上,可以帮助开发者快速开发原型。PyTorch 带有预训练嵌入(pre-...

    AI研习社
  • Java代码审计-铁人下载系统

    初学 java 代码审计,跟着表哥们脚步,走一遍审计流程,就选了个没有使用 Java 框架的 java 系统,作为入门。

    信安之路
  • Ubuntu配置lamp环境

    ubuntu有个系统命令apt-get十分好用,很多插件和依赖用这个命令都可以一步到位安装。 先安装apache,输入如下命令: sudo apt-get i...

    lonelydawn
  • 如何在Ubuntu 14.04和Debian 8上使用Apache设置ModSecurity

    ModSecurity是一个免费的Web应用程序防火墙(WAF),可与Apache,Nginx和IIS配合使用。它支持灵活的规则引擎来执行简单和复杂的操作,并附...

    姚啊姚
  • 【安装教程】Ubuntu+Python3环境下安装LabelImg数据标注工具

    在之前的一篇文章中,我们介绍了Win10+Python3环境下安装LabelImg数据标注工具的教程,读者如有需要在WIn10环境使用LabelImg数据标注工...

    AI那点小事
  • vue中js全局鼠标点击弹出文字

    在原作者代码的基础上进行修改,将内容放入数组,可按序显示或随机展示 增加userSelect样式,快速点击时文字不会被选中 可以使用Emoji ??????...

    LittlePanger

扫码关注云+社区

领取腾讯云代金券