【云+社区年度征文】通过腾讯云*云开发搭建静态网站

笔者将自己的网站从阿里云迁到腾讯云时，发现腾讯云现有的教程与实际情况有些差异，所以特地记录一份完整的迁移笔记。

Hugo 简介

Hugo 是一个用 Go 编写的静态站点生成器，它具有非常快的生成速度。

云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站。

无论是腾讯云·云开发用户，还是小程序·云开发用户，只要开通按量付费，即可享有云开发静态网站托管服务。

安装Hugo

首先，我们先安装 hugo：

brew install hugo

紧接着，我们用 hugo 来创建一个 blog 项目：

hugo new site demo && cd demo

然后我们再创建用于测试的文章:

hugo new posts/demo.md

设置一个主题

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

最后，直接在目录中运行：

hugo server

在浏览器打开 http://localhost:1313/ 即可查看效果:

部署到云服务

编译静态页面文件

hugo -D

生成好的静态页面文件会放在项目的public目录中，目录结构如下：

image.png

静态托管部署

创建云环境

我们进入腾讯云的云开发(cloudbase)控制台，选择开通一个云环境:

• 选择空模板
• 输入环境名
• 立即开通

image.png

image.png

image.png

环境准备完成后，记住这个环境ID demo-0gin44nr2316748c

image.png

在云环境管理界面的左侧的 静态网站托管 中，可以将刚刚生成好的静态页面给上传上去。

命令行上传

命令行行环境准备

当然，手动上传比较繁琐，我们也可以借助 cloudbase cli ，以命令行的方式执行上传。

首先，安装 cloudbase cli:

npm i -g @cloudbase/cli --registry=https://registry.npm.taobao.org

执行登录命令：

tcb login

在弹出的页面确认授权:

image.png

命令行部署网站

接着，在 hugo-site 中将 public 目录中的文件给部署上去：

需要将 EnvID 替换为刚创建好的环境ID。

tcb hosting deploy ./public . -e EndId

image.png

访问腾讯云提供的网站：https://demo-0gin44nr2316748c-1300262350.tcloudbaseapp.com/

image.png

总结

本文通过详细的步骤分享了如何通过腾讯云托管静态网站的操作指南。