前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯云静态网站托管之搭建 VuePress

腾讯云静态网站托管之搭建 VuePress

作者头像
陌涛
发布2020-06-10 10:18:24
5.8K0
发布2020-06-10 10:18:24
举报
文章被收录于专栏:畅所欲言畅所欲言
之前发布的文章:腾讯云免费静态网站托管,还有9.9元/

申请地址:https://url.cn/59FNl75

操作场景

本文档介绍通过腾讯云静态网站托管服务搭建一个 VuePress 网站,并使用云开发 CLI 工具管理部署 VuePress 网站。

前提条件

在进行后续的内容前,请先确保您的电脑中安装了 Node.js 运行环境。如果没有安装,可以访问 https://nodejs.org/ 下载安装。

操作步骤

步骤1:安装云开发 CLI 工具 和 VuePresss

执行如下命令,安装云开发 CLI 工具以及 VuePress。

代码语言:javascript
复制
npm i -g @cloudbase/cli vuepress

步骤2:在本地初始化一个 VuePress 项目

首先,在本地创建一个目录,这里以 tcb 为例:

代码语言:javascript
复制
mkdir tcb && cd tcb

进入到 tcb 目录后,创建一个默认的 hello world 文件。

代码语言:javascript
复制
echo "# Hello TCB & Vuepress" > README.md
腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

然后,执行命令,启动,并查看效果。

代码语言:javascript
复制
vuepress dev

等待其编译完成,完成后如下如所示。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

打开浏览器访问: localhost:8080 可以看到刚刚创建的文档产生的页面,说明已经成功的完成了 VuePress 的本地初始化。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

步骤3:创建一个云开发环境

完成了本地的 Vuepress 建设,接下来我们来创建一个云开发环境,用来部署 VuePresss。打开腾讯云控制台,在产品中找到云开发

  1. 开通云开发环境 打开腾讯云 云开发控制台,单击【新建环境】,新建一个环境进行部署。
腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

选择新建一个环境,填写环境名称并选择按量计费,开通环境。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

在开通环境以后,请记住您的环境 ID,这个 ID 后续部署需要用到。

  1. 开通静态网站托管 云开发环境创建完成后,单击左侧菜单栏中的【静态网站托管】,单击【选择已有按量计费环境】
腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

当您看到这样的界面时,就说明已经开通好了。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

您现在可以通过上传文件手动上传一个文件测试,稍后,我们将会用云开发 CLI 来完成上传。

步骤4:使用 CLI 部署 VuePress

初始化云开发 CLI

完成了云开发环境的配置后,我们需要初始化一下云开发 CLI ,从而实现借助 CLI 工具来上传页面(您也可以通过网页端直接上传,但如果您博客的文章比较多,建议使用 CLI 工具上传更加方便) 在命令行输入如下代码:

代码语言:javascript
复制
tcb login

会提醒您需要在网页中进行授权:

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

在弹出的页面中单击【确认授权】。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

确认授权后,您会看到控制台输出相应的命令部署,到这里,您的云开发 CLI 就初始化好了。

部署 VuePress

回到我们刚刚创建的 VuePress 的目录,执行命令构建静态页面:

代码语言:javascript
复制
vuepress build

构建完成后,会提醒您,生成的静态文件在 .vuepress/dist。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

接下来我们只需要把 .vuepress/dist 中的文件夹中的内容上传到云开发静态网站托管中就可以了。 执行如下命令进入到 dist 文件夹

代码语言:javascript
复制
cd .vuepress/dist

然后执行命令上传文件,记得将这里的 EnvID 替换为您自己的环境的环境 ID。

代码语言:javascript
复制
tcb hosting:deploy ./ -e EnvID

稍等片刻,文件就上传好了

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

此时,您在云开发管理控制台也可以看到这些文件,说明成功上传。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress

步骤5:浏览 VuePress

打开腾讯云 云开发控制台,单击左侧菜单栏中的【静态网站托管】>【设置】,进入设置页面,可以找到默认的域名,单击域名,就可以看到您刚部署的 VuePress。

腾讯云静态网站托管之搭建 VuePress
腾讯云静态网站托管之搭建 VuePress
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 操作场景
  • 前提条件
  • 操作步骤
    • 步骤1:安装云开发 CLI 工具 和 VuePresss
      • 步骤2:在本地初始化一个 VuePress 项目
        • 步骤3:创建一个云开发环境
          • 步骤4:使用 CLI 部署 VuePress
            • 初始化云开发 CLI
            • 部署 VuePress
          • 步骤5:浏览 VuePress
          相关产品与服务
          静态网站托管
          静态网站托管(Website Hosting,WH)是由云开发提供的便捷、稳定、高拓展性的托管服务,您无需自建服务器,即可一键部署网站应用,将静态网站发布到全网节点,轻松为您的业务增添稳定、高并发、快速访问等能力。此外,您还可以结合云开发的云函数、数据库等能力,将静态网站扩展为带有后台服务端的全栈网站,让您可极速提供网站应用。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档