托管静态网站

Recent Pages

托管静态网站

最后更新时间：2024-07-04 16:25:38

操作场景
TEM 通过 应用实例+CFS 的方式提供静态网站资源托管的能力，本文以业界流行的静态网站服务 Hugo 为例，为您提供静态资源托管的实践教程。下述将通过 Hugo 生成个人静态博客，然后通过 TEM 部署反向代理应用，配合 CFS 管理静态资源，最后通过 TEM 提供的访问配置，在公网上提供对个人静态博客的访问。
整体流程如下：
1. ﻿本地通过 Hugo 生成静态博客﻿
2. ﻿上传静态博客内容到 CFS﻿
3. ﻿在 TEM 上部署 nginx 应用并关联 CFS﻿
4. ﻿在 TEM 上配置 nginx 的网络访问﻿
5. ﻿(可选) 配置域名﻿
6. ﻿(可选) 配置防火墙﻿
7. ﻿(可选) 配置 CDN﻿
操作步骤
步骤1：本地通过 Hugo 生成静态博客
1. 安装 Hugo（参考 Install Hugo）。
以 MacOS 系统为例，通过如下命令安装：
brew install hugo
2. 执行如下命令创建静态站点。
hugo new site quickstart
3. 执行如下命令添加主题。
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \\"ananke\\" >> config.toml
4. 执行如下命令添加博客。
hugo new posts/my-first-post.md
5. 执行如下命令构建静态页面。
hugo -D
6. 生成的静态内容存放在 quickstart 项目的 public/ 目录下。
﻿
﻿
﻿
步骤2：上传静态博客内容到 CFS
1. 参考 CFS：创建文件系统及挂载点 购买 CFS 文件系统。
注意：
购买的 CFS 文件系统的区域、VPC 网络 应与在 TEM 上部署应用的区域保持一致。
2. 参考 CFS：在 Linux 客户端上使用 CFS 文件系统 或 CFS：在 Windows 客户端上使用 CFS 文件系统 将 hugo 生成的 public/ 目录中的文件上传到 CFS 文件系统根目录或子目录中。
步骤3：在 TEM 上部署 nginx 应用并关联 CFS
1. 登录 弹性微服务控制台，在应用部署所在的环境中关联上述购买的 CFS 实例。
﻿
﻿
﻿
2. 在 应用管理 页面创建一个名为 hugo 的应用。
﻿
﻿
﻿
3. 部署应用，在持久化存储模块选择已关联的 CFS 存储资源。
﻿
﻿
﻿
步骤4：在 TEM 上配置 nginx 的网络访问
方案一：配置转发规则（推荐）
方案二：配置公网 CLB
1. 在应用管理页面，单击刚刚创建的应用的“ID”，进入应用基本信息页面。
2. 在应用基本信息页面，在访问配置模块单击前往配置，进入环境访问配置页面。
﻿
﻿
﻿
3. 在环境访问配置页面，单击新建，创建一条访问配置规则。
﻿
﻿
﻿
4. 单击完成，可获取如下 IP 地址。
﻿
﻿
﻿
通过生成的地址对 hugo 服务进行访问：
﻿
﻿
﻿
1. 在 应用管理 页面，单击刚刚创建的应用的“ID”，进入应用基本信息页面。
2. 在应用基本信息页面，在访问配置模块单击右上角的编辑并更新，添加公网 CLB。
﻿
﻿
﻿
3. 选择公网访问方式，填写端口映射关系。
﻿
﻿
﻿
4. 单击提交后，可获取如下公网访问 IP。
﻿
﻿
﻿
通过生成的地址对 hugo 服务进行访问：
﻿
﻿
﻿
步骤5：(可选) 配置域名
1. 注册域名。
2. 将域名与上述生成的 CLB 实例进行关联，关联后即可通过域名访问静态网站，参考 配置 DNS 解析 DNSPod 将域名指向 CLB。
步骤6：(可选) 配置防火墙
若静态网站的访问是通过 转发配置 设置，则可与腾讯云的 Web 应用防火墙 结合，对静态网站进行安全保护。详细配置可参见 配置 WAF 对负载均衡的监听域名进行 Web 安全防护 。
步骤7：(可选) 配置 CDN
静态网站为了给用户更好的体验，通常会与 CDN 结合提供访问加速，托管的静态网站可与腾讯云 CDN 结合，参见 腾讯云 CDN 新手指引。