Hosting a Static Website

Recent Pages

Hosting a Static Website

Last updated: 2024-01-09 12:42:59

Overview
TEM provides static website resource hosting capabilities through application instance + CFS. This document takes the popular static website service Hugo as an example to describe the best practice for static resource hosting. The following will generate a personal static blog through Hugo, deploy a reverse proxy application through TEM, work together with CFS to manage static resources, and finally offer access to the personal static blog over the public network through the access configuration in TEM.
The overall process is as follows:
1. ﻿Generate a static blog locally through Hugo﻿
2. ﻿Upload the static blog content to CFS﻿
3. ﻿Deploy the nginx application in TEM and associate CFS﻿
4. ﻿Configure the nginx network access in TEM﻿
5. ﻿(Optional) Configure a domain name﻿
6. ﻿(Optional) Configure a firewall﻿
7. ﻿(Optional) Configure CDN﻿
Directions
Step 1. Generate a static blog locally through Hugo
1. Install Hugo (for more information, please see Install Hugo).
Taking macOS as an example, install it with the following command:
brew install hugo
2. Run the following command to create a static site.
hugo new site quickstart
3. Run the following command to add a theme.
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \\"ananke\\" >> config.toml
4. Run the following command to add a blog.
hugo new posts/my-first-post.md
5. Run the following command to build a static page.
hugo -D
6. The generated static content is stored in the public/ directory of the quickstart project.
﻿
﻿
﻿
Step 2. Upload the static blog content to CFS
1. Purchase a CFS file system as instructed in Creating File Systems and Mount Targets.
Note: 
The region and VPC of the purchased CFS file system should be the same as those of the application deployed in TEM.
2. Upload the files in the public/ directory generated by Hugo to the root directory or subdirectory of the CFS file system as instructed in Using CFS File Systems on Linux Clients or Using CFS File Systems on Windows Clients.
Step 3. Deploy the nginx application in TEM and associate CFS
1. Log in to the TEM console and associate the CFS instance purchased above with the environment where the application is deployed.
﻿
﻿
﻿
2. Create an application named hugo on the Application Management page.
﻿
﻿
﻿
3. Deploy the application and select the associated CFS storage resource in the Persistent Storage module.
﻿
﻿
﻿
Step 4. Configure the nginx network access in TEM
Scheme 1. Configure a forwarding rule (recommended)
Scheme 2. Configure public network CLB
1. On the Application Management page, click the ID of the application you just created to enter its basic information page.
2. On the application basic information page, click Configure Now in the Access Configuration module to enter the environment access configuration page.
﻿
﻿
﻿
3. On the environment access configuration page, click Create to create an access configuration rule.
﻿
﻿
﻿
4. Click Complete to get the following IP address.
﻿
﻿
﻿
Access the Hugo service at the generated address:
﻿
﻿
﻿
1. On the Application Management page, click the ID of the application you just created to enter its basic information page.
2. On the application basic information page, click Edit and Update in the top-right corner of the Access Configuration module to add a public network CLB instance.
﻿
﻿
﻿
3. Select the public network access method and enter the port mapping relationship.
﻿
﻿
﻿
4. Click Submit to get the following public IP.
﻿
﻿
﻿
Access the Hugo service at the generated address:
﻿
﻿
﻿
Step 5. (Optional) Configure a domain name
1. Register a domain name.
2. Associate the domain name with the CLB instance generated above, and you can access the static website at the domain name. For more information, please see Getting Started with CLB.
Step 6. (Optional) Configure a firewall
If the static website is accessed through the forwarding configuration settings, it can be connected to Tencent Cloud WAF for security protection. For more information, please see Configuring WAF protection for CLB listening domain names.
Step 7. (Optional) Configure CDN
In order to deliver a better user experience, the hosted static website can be connected to Tencent Cloud CDN for access acceleration. For more information, please see Getting Started.