A Guide to Hosting Landing Pages on Amazon S3 + CloudFront

Load speed is integral to any web property, but particularly for landing pages. Time is of the essence when you’ve deployed an incredible marketing strategy, and prospective buyers are clicking your ads to get to the landing page. If potential buyers visit your landing page and the page takes forever to load, you’re looking at many lost sales.

Since people have a short attention span and you want your landing page to make an impact, consider Amazon S3 + CloudFront as your hosting solution. If you’re using a Mac, you can use Amazon S3 Mac to store large amounts of data and make your workflow smoother. But that’s a discussion for later, and in this article, you’ll learn about how you can host landing pages on Amazon S3 and CloudFront.

Why choose Amazon S3 and CloudFront?

Hundreds of hosting options are available, but Amazon S3 and CloudFront stand apart from the rest when it comes to hosting landing pages because:

  • Amazon’s services are cost-friendly, and you’ll only pay for what you use.
  • They provide a free pricing tier for the first year after you’ve created an account, which can help with cash flow.
  • Amazon offers you speed, which is critical for the success of your landing pages. There are data centers across the globe that make landing pages fast, regardless of what country your visitors are from. While the load is quite fast with the S3 service, combining it with their CloudFront or CDN network can make your landing page 70% faster.

Setting up Amazon S3 and CloudFront

To begin setting up Amazon S3 + CloudFront, you need to create an AWS account, a domain name, and a Namecheap account (or another domain registrar account). After that, follow these steps.

  • Forward emails

As websites today must be secured by SSL, you need to take a few steps before applying for the free SSL certification from Amazon.

Login to your Namecheap account > find the domain name you would want to forward email from and click Manage > scroll to the Redirect Email section on the Domain tab > select Add Catch-all and type your email address in the ‘Forward to’ box.

Please note that you don’t need this step if your Namecheap account already has an email address that you can access.

  • SSL certificate generation

For generating a free SSL certificate, go to the ACM dashboard > click Request a Certificate > pick the public certificate > enter your bespoke domain name and your domain name prepended with ‘*’ > choose Email Validation > click on the approval link sent to your email and click ‘I Approve.’ Then, return to the ACM dashboard, and you’ll see the certificate has been issued.

  • Configuration of S3 bucket for static website

For this, go to the S3 dashboard > select Create Bucket > enter the bucket’s name, and you can use the domain name, but with a ‘-’ instead of a. ‘’ > use N. Virginia for your server region to ensure your SSL works perfectly > click Create.

  • Choose bucket permissions

For fixing bucket permissions, click the bucket you created in the S3 dashboard > select the Permissions tab > click Edit on the Public Access Settings page > uncheck the boxes under Manage Public Bucket Policies for this Bucket > click Save.

On the same Permissions tab, go to the Bucket Policy tab, enter the code “{ “Version”: “2012-10-17”, “Statement”: [ { “Sid”: “AddPerm”, “Effect”: “Allow”, “Principal”: “*”, “Action”: “s3:GetObject”, “Resource”: “arn:aws:s3:::example-com/*” } ] }” and edit the Resource key with the name of your bucket.

  • Allow static website hosting

For enabling static website hosting, you have to select the bucket in the S3 dashboard > click the Properties tab > choose Static Website Hosting > click the radio button saying “Use this bucket to host a website” > click Save.

  • Allow CloudFront distribution

You can enable CloudFront distribution by going to the CloudFront Dashboard and selecting Create Distribution. Then, click Get Started under the Web distribution method and paste your S3 URL in the Origin Domain Name box.

In the Default Cache Behavior Settings, click Redirect HTTP to HTTPS. As for the rest of the settings under this tab, leave them as they are. But, click Yes for Compress Objects Automatically.

After that, you have to enter your custom domain name in the Distribution Settings section and select Custom SSL Certificate. Then, select your SSL Certificate in the text box and scroll to the bottom of the page to select Create Distribution. When returned to the CloudFront dashboard, ensure to make a note of your Domain Name.

  • CNAME from Namecheap to CloudFront

You need to log into your Namecheap account and find the domain name you want to use with CloudFront. Then, click Manage and go to the Advanced DNS tab. You’ll find the Host Records section where you need to click Add New Record and choose CNAME. Type ‘@’ in ‘Host’ and paste your CloudFront Domain Name/URL in ‘Target.’ Then, click the green checkmark and wait for sixty minutes or less.

  • Upload your landing pages

Now you’re at the final step, where all you need to do is upload your landing pages. You’ve already created your server and even configured it to work with a CDN. All that’s left is for your landing pages to be uploaded to the S3 bucket.

You need to go to the S3 dashboard > upload your landing pages and use the folders to keep everything organized > after uploading the landing pages, type the domain name and the folder structure to view them.

So, those are the steps you need to follow to host your landing pages on Amazon S3 and CloudFront successfully. Then, go ahead and enjoy the speed.

We will be happy to hear your thoughts

Leave a reply