How to Host and Scale Marketing Landing Pages on Alibaba Cloud OSS and CDN

Learn how to host high-performance marketing landing pages on Alibaba Cloud using OSS and CDN. This guide covers static website hosting, HTTPS setup, .

Disclaimer: The views expressed herein are for reference only and don't necessarily represent the official views of Alibaba Cloud.

Most teams optimise landing pages but overlook hosting performance. Shared hosting slows under traffic spikes, hurting conversions and increasing ad costs.

This guide shows how to use Alibaba Cloud OSS and CDN to deliver fast, reliable landing pages globally with better performance and availability.

Understanding the Architecture

Before jumping into configuration steps, it helps to understand what each service is doing and why.

Object Storage Service (OSS) stores your landing page files: HTML, CSS, JavaScript, images, and fonts.

OSS static website hosting enables you to publish static files stored in a bucket as a publicly accessible website, eliminating the need for traditional servers and letting you deploy highly available websites while significantly reducing maintenance costs and required technical expertise.

Alibaba Cloud CDN sits in front of OSS and acts as a caching and acceleration layer. When a visitor in Germany requests your landing page, CDN serves it from the nearest edge node rather than routing the request all the way back to your OSS bucket in Singapore.

CDN acceleration improved delivery speed by approximately 35% compared to direct OSS access in network probe testing. That improvement compounds across every asset on the page.

The workflow is straightforward. You upload your landing page files to an OSS bucket. You configure CDN with your OSS bucket as the origin. CDN caches your files on edge nodes worldwide.

Visitors get fast load times wherever they are, and your OSS bucket handles only the initial fetch for each file rather than every single visitor request.

What You Will Build

By the end of this guide you will have:

A marketing landing page hosted on Alibaba Cloud OSS with a custom domain
HTTPS enabled for security and ad platform compatibility
Alibaba Cloud CDN configured with your OSS bucket as the origin
Cache rules tuned for marketing page assets
A CDN cache purge workflow so you can push updates without waiting for cache expiry
Performance optimisation features enabled including HTML minification and Gzip compression

Prerequisites

You will need:

An Alibaba Cloud account with OSS and CDN activated
A registered domain name with DNS managed through a provider you can access (Alibaba Cloud DNS works directly with CDN)
Your landing page files ready to upload: at minimum an index.html, a CSS file, and any images
An SSL/TLS certificate for your domain, or use Alibaba Cloud's free certificate service available through the CDN console

Step 1: Create and Configure Your OSS Bucket

When naming your bucket, choose something that reflects the campaign or microsite, such as brand-summer-campaign-2026. Bucket names must be globally unique across Alibaba Cloud.

Key bucket settings:

Region: Choose the region closest to your primary audience. For campaigns targeting Southeast Asia, Singapore is the standard choice.

For Europe, Frankfurt or London. For the United States, Virginia. CDN will handle global distribution regardless of which region you choose, but picking a geographically sensible origin reduces the latency of that first cache miss.

Storage Class: Set to Standard. Your landing page files will be accessed frequently during campaigns, so Standard storage is the correct tier.

Access Control: This is where most people get tripped up. By default, Block Public Access is enabled when you create an OSS bucket.

You must disable this feature before you can set the bucket's access control list to public-read. Click Access Control > Block Public Access, disable it, then set the Bucket ACL to Public Read.

Once the bucket is created, navigate to Data Management > Static Pages and click Settings. Configure the following:

Default Homepage: index.html
Default 404 Page: 404.html (create a simple one if you do not have it)

This tells OSS to serve index.html when someone requests the root of your domain, which is the behaviour you expect from a web server.

Step 2: Upload Your Landing Page Files

With the bucket configured, upload your landing page assets. You can do this through the OSS console, the ossutil command-line tool, or programmatically via the OSS SDK.

Using the console:

Click the bucket name to open it, then click Upload. Upload your files maintaining the directory structure your HTML references. If your HTML includes <link href="css/style.css">, upload the CSS file to a css/ folder in the bucket.

Using ossutil (recommended for teams deploying frequently):

Install ossutil and configure it with your AccessKey credentials. Then sync your local build directory to the bucket:

# Install ossutil (Linux/macOS)
curl -o ossutil https://gosspublic.alicdn.com/ossutil/1.7.18/ossutil64
chmod 755 ossutil

# Configure with your credentials
./ossutil config

# Upload your landing page directory
./ossutil cp -r ./your-landing-page/ oss://brand-summer-campaign-2026/ --update

The --update flag skips files that have not changed since the last upload, which makes incremental deployments fast.

Set content type headers for HTML files:

OSS sometimes needs a nudge to serve HTML files with the correct content type. If your HTML files are being downloaded instead of displayed, set the Content-Type header explicitly on upload:

./ossutil set-meta oss://brand-summer-campaign-2026/index.html \
  "Content-Type:text/html; charset=utf-8" --update -r

Step 3: Map a Custom Domain to the Bucket

For security reasons, when you access an HTML file using the domain name of an OSS bucket, browsers force a download instead of displaying the page online. To enable normal web browsing, you must map a custom domain name.

In the bucket settings, navigate to Transmission > Domain Names and click Bind Custom Domain. Enter the subdomain you want to use for this landing page, such as campaign.yourdomain.com.

OSS will give you a CNAME value. Log in to your DNS provider and add a CNAME record pointing campaign.yourdomain.com to the OSS CNAME value. DNS propagation typically takes a few minutes but can take up to 48 hours depending on your provider.

Once the CNAME is live, your landing page will be accessible at your custom domain.

However, this direct-to-OSS setup is only an interim step. In the next sections you will point the domain to CDN instead, which is where the real performance gains come from.

Step 4: Enable HTTPS

Modern browsers display a "Not Secure" warning for HTTP websites, and search engines give higher scores to HTTPS-enabled websites.

Enforce HTTPS access for your attached custom domain name to access OSS over the HTTPS protocol.

For marketing landing pages specifically, HTTPS is not optional. Ad platforms including Google Ads require HTTPS destination URLs to run ads.

Any landing page that still serves over HTTP will trigger browser security warnings that immediately erode visitor trust and reduce conversions.

In the CDN console (which you will configure in the next step), navigate to HTTPS Settings for your domain. You have two options:

Option A: Upload your own certificate. If you already have a certificate for your domain, upload the PEM-encoded certificate and private key directly.

Option B: Apply for a free certificate through Alibaba Cloud. In the HTTPS settings, click Apply for Free Certificate. Alibaba Cloud issues a DV (Domain Validation) SSL certificate at no cost. This takes a few minutes and renews automatically.

Enable HTTPS Redirect so that any HTTP requests to your landing page automatically redirect to HTTPS. This prevents visitors who type or bookmark the HTTP URL from seeing a security warning.

Step 5: Add Your Domain to Alibaba Cloud CDN

Fill in the configuration:

Domain Name to Accelerate: Enter your landing page subdomain, such as campaign.yourdomain.com.

Business Type: Select Image and Small File. Landing pages consist of HTML, CSS, JavaScript, and images, which all fall into this category. If your website primarily contains small image files, select Image and Small File as the business type.

Region: Choose based on where your campaign audience is located. Overseas covers all regions outside mainland China and does not require an ICP filing. If you are running campaigns targeting mainland China, select Global and ensure you have completed the ICP registration process for your domain.

Origin Server:

This is where CDN fetches files it does not have in cache. Set the Origin Server Type to OSS Domain and enter the OSS bucket's default endpoint for your region (visible in the bucket overview page). This creates a direct link between CDN and your OSS bucket without exposing OSS credentials.

Click Next and complete the domain setup.

Step 6: Point Your DNS to CDN

After adding your domain to CDN, the console gives you a CNAME value specific to your CDN configuration. This CNAME is different from the OSS CNAME you set up earlier.

Go back to your DNS provider. Update the CNAME record for campaign.yourdomain.com to point to the new CDN CNAME value rather than the OSS endpoint.

New CNAME records in Alibaba Cloud DNS take effect in real time. With external DNS providers, propagation typically takes a few minutes to an hour.

Verify the CDN is active by opening your domain in a browser and inspecting the HTTP response headers. Look for headers like Via or X-Cache that confirm the response came from a CDN edge node rather than directly from OSS.

Step 7: Configure Cache Rules for Landing Page Assets

This is the step most people skip, and it is the one that has the biggest impact on performance and cost. By configuring cache expiration time rules, you can precisely control how long resources are cached on points of presence to balance content updates, access performance, and origin-fetch costs.

In the CDN console, navigate to Domain Names, click Manage next to your domain, then go to Cache > Cache Expiration and click Add Rule.

Set up the following rules for a typical landing page. Rules are matched in order and the first match wins, so add them in this sequence:

Rule 1: Long cache for static assets (CSS, JS, images, fonts)

These files change rarely. When you update them, you will change the filename or append a version query string. A long TTL means CDN serves them from cache on virtually every request.

Field	Value
Type	File Extension
Object	`.css,.js,.jpg,.jpeg,.png,.gif,.svg,.webp,.woff,.woff2,.ttf`
Expire In	30 days
Weight	20

Rule 2: Short cache for HTML files

HTML files are what you update when you change the page copy or layout. A short TTL means CDN fetches a fresh copy from OSS within minutes of you uploading a new version.

Field	Value
Type	File Extension
Object	`.html`
Expire In	10 minutes
Weight	10

Rule 3: No cache for the root URL

This ensures the homepage of your landing page always reflects the latest version within minutes.

Field	Value
Type	Directory
Object	`/`
Expire In	0 seconds
Weight	5

A smaller weight number means higher priority. If a request to Alibaba Cloud CDN matches multiple rules, only one rule takes effect. Priority is determined first by weight and then by creation time.

Step 8: Enable Performance Optimisation Features

Alibaba Cloud CDN includes several performance features that reduce the size of what gets delivered to visitors without you having to change your source files.

In the CDN console under Optimisation, enable the following for your landing page domain:

HTML Optimisation: CDN strips comments, extra whitespace, and redundant tags from HTML before serving it.

Configure HTML optimisation, object chunking, and intelligent compression based on your business requirements to improve content retrieval efficiency. For a typical landing page HTML file, this reduces the delivered file size by 10 to 20 percent.

Intelligent Compression (Gzip/Brotli): CDN compresses text-based files including HTML, CSS, and JavaScript before sending them to visitors whose browsers support compression (which is virtually all modern browsers).

Compression ratios of 60 to 80 percent are common for CSS and JavaScript files.

Image Processing: If your CDN plan includes image processing features, configure automatic WebP conversion for browsers that support it. WebP images are typically 25 to 35 percent smaller than their JPEG equivalents at equivalent quality.

Parameter Filtering: Landing pages often receive traffic with tracking parameters in the URL, such as ?utm_source=google&utm_campaign=brand.

Without parameter filtering, CDN treats each unique URL as a different resource, meaning a visitor who came from Google and a visitor who came from Facebook would each trigger a separate origin fetch even though the page content is identical.

Enable parameter filtering in the CDN console under Cache > URL Parameter Filtering. Choose to ignore all query parameters for your HTML files. CDN will then serve the same cached page regardless of what tracking parameters are appended to the URL.

Step 9: Set Up Cache Purge for Rapid Updates

When you push a new version of your landing page, you want CDN to serve the updated content immediately rather than waiting for the cache TTL to expire naturally.

Alibaba Cloud CDN provides a Purge and Prefetch feature in the console under Refresh/Prefetch.

To purge a specific file after an update:

Navigate to Refresh/Prefetch > URL Purge
Enter the full URL of the file you changed, for example https://campaign.yourdomain.com/index.html
Click Submit

CDN propagates the purge to all edge nodes within a few minutes. The next request for that URL will fetch the fresh version from OSS.

To purge all files in a directory:

If you have updated multiple files at once (for example, a major copy refresh across the entire page), use Directory Purge and enter https://campaign.yourdomain.com/ to purge everything under the root.

Prefetching for campaign launches:

Before a marketing campaign or product launch, pre-warming your new landing page and its assets ensures a fast experience for the first wave of visitors and reduces the initial load on your origin server.

Use the URL Prefetch feature to push your landing page files to CDN edge nodes before your ads go live. Submit your HTML URL and all major asset URLs. CDN will proactively cache them so the very first visitor gets a cache hit.

Step 10: Automate Deployments with ossutil

For marketing teams running multiple campaigns, deploying landing pages manually through the console is slow and error-prone. A simple shell script automates the sync and purge steps.

#!/bin/bash

# Configuration
BUCKET_NAME="brand-summer-campaign-2026"
OSS_ENDPOINT="oss-ap-southeast-1.aliyuncs.com"
CDN_DOMAIN="campaign.yourdomain.com"
LOCAL_BUILD_DIR="./build"

echo "Syncing landing page files to OSS..."
ossutil cp -r "$LOCAL_BUILD_DIR/" "oss://$BUCKET_NAME/" \
  --update \
  --meta "Cache-Control:public, max-age=2592000" \
  --include "*.css" \
  --include "*.js" \
  --include "*.png" \
  --include "*.jpg" \
  --include "*.webp" \
  --include "*.woff2"

# Upload HTML with shorter cache headers
ossutil cp -r "$LOCAL_BUILD_DIR/" "oss://$BUCKET_NAME/" \
  --update \
  --meta "Cache-Control:public, max-age=600" \
  --include "*.html"

echo "Purging CDN cache for HTML files..."
aliyun cdn RefreshObjectCaches \
  --ObjectPath "https://$CDN_DOMAIN/index.html" \
  --ObjectType File

echo "Prefetching updated HTML to CDN edge nodes..."
aliyun cdn PushObjectCache \
  --ObjectPath "https://$CDN_DOMAIN/index.html"

echo "Deployment complete."

This script uploads static assets with long cache headers baked into the OSS object metadata, uploads HTML with short cache headers, then purges and prefetches the HTML so the update is live on CDN immediately.

For CI/CD pipelines, add this script as a deployment step that runs automatically when changes are pushed to your landing page's main branch. Every code push produces a live deployment within a couple of minutes.

This kind of fast and reliable delivery workflow is especially important for businesses that depend on uninterrupted access to digital resources and training platforms such as Test Inside, where page speed and uptime directly affect user experience and conversions.

Monitoring Performance After Launch

Once your landing page is live, a few metrics tell you whether the CDN configuration is working correctly.

Cache Hit Ratio: In the CDN console, navigate to Monitoring > Cache Hit Ratio for your domain. A well-configured landing page should have a cache hit ratio above 90 percent.

If it is lower, check whether your HTML cache TTL is set too short, whether parameter filtering is enabled, or whether there are too many unique URL patterns being generated by your campaign tracking.

Time to First Byte (TTFB): This is the time between a browser making a request and receiving the first byte of the response. CDN cached responses typically have TTFB values under 50 milliseconds regardless of the visitor's location.

An TTFB above 200 milliseconds on cached resources suggests a caching misconfiguration.

Bandwidth and Traffic Reports: The CDN console shows traffic volume, bandwidth peaks, and requests per second. Monitor these during campaign launches to catch unexpected spikes.

To prevent bandwidth spikes caused by attacks, configure a bandwidth cap in the CDN console. Setting a bandwidth cap protects you from unexpected bills if your campaign URL gets shared virally or if you experience a traffic spike from an unexpected source.

Origin Fetch Rate: This shows how often CDN has to go back to your OSS bucket for a cache miss. A well-tuned setup sees low origin fetch volumes outside of the initial cache warm-up period. High and sustained origin fetch rates usually indicate cache rules need adjusting.

A Note on Multiple Campaigns

If you are managing multiple campaigns simultaneously, each one can have its own OSS bucket and CDN domain, or you can organise multiple campaigns within a single bucket using directory prefixes.

For teams running many campaigns, the single-bucket-with-directories approach makes billing simpler (one CDN domain, one OSS bucket to manage) but requires careful cache rule configuration to handle different TTL requirements per campaign.

The separate-bucket-per-campaign approach is cleaner from a permissions and lifecycle management perspective. When a campaign ends, you delete the bucket and remove the CDN domain. Nothing from the old campaign can accidentally affect the next one.

Whatever approach you choose, stick to it consistently. The complexity of managing multiple campaigns grows quickly if some use one pattern and some use another.

What to Build On Top of This

The OSS and CDN setup you built here is a high-performance foundation. Once it is running, a few natural extensions add more marketing value.

If your landing page includes a form that captures lead information, the form submission still needs a backend handler since OSS serves only static files.

SPAs often need to call back-end APIs or access third-party resources, which the browser's same-origin policy can restrict. By configuring CORS rules, you can specify allowed origins, methods, and headers to ensure your front-end application can access the necessary API services.

Use Alibaba Cloud Function Compute to handle form submissions serverlessly, keeping the entire stack serverless without provisioning any traditional web servers.

For teams who want to analyse landing page performance alongside campaign data, connect your OSS access logs to Alibaba Cloud DataWorks and visualise page traffic, bounce patterns, and visitor flow in Quick BI.

CDN also exports real-time logs that you can pipe into the same pipeline for a complete view of page delivery metrics alongside business conversion data.

Summary

In this guide you built a production-grade hosting setup for marketing landing pages on Alibaba Cloud, covering:

Creating and configuring an OSS bucket for static website hosting
Uploading landing page files and setting correct content types
Mapping a custom domain and enabling HTTPS
Connecting Alibaba Cloud CDN with OSS as the origin
Configuring cache expiration rules per asset type
Enabling performance optimisation features including HTML minification and Gzip compression
Setting up cache purge and prefetch workflows for rapid updates
Automating deployment with a shell script
Monitoring cache hit ratio, TTFB, and origin fetch rates

The result is a landing page infrastructure that handles traffic spikes without degrading, loads in under two seconds for visitors in any region, and costs a fraction of what traditional server hosting would at the same performance level.

Community

How to Host and Scale Marketing Landing Pages on Alibaba Cloud OSS and CDN

Understanding the Architecture

What You Will Build

Prerequisites

Step 1: Create and Configure Your OSS Bucket

Step 2: Upload Your Landing Page Files

Step 3: Map a Custom Domain to the Bucket

Step 4: Enable HTTPS

Step 5: Add Your Domain to Alibaba Cloud CDN

Step 6: Point Your DNS to CDN

Step 7: Configure Cache Rules for Landing Page Assets

Step 8: Enable Performance Optimisation Features

Step 9: Set Up Cache Purge for Rapid Updates

Step 10: Automate Deployments with ossutil

Monitoring Performance After Launch

A Note on Multiple Campaigns

What to Build On Top of This

Summary

Related Resources

Read previous post:

Read next post:

Kalpesh Parmar

You may also like

Comments

Kalpesh Parmar

Related Products

Intelligent Robot

ApsaraVideo Media Processing

CDN(Alibaba Cloud CDN)

Realtime Compute for Apache Flink