Hosting Landing Pages In AWS

How To Host Landing Pages On Amazon S3 + CloudFront

When it comes to landing pages, load speed is crucial. Load speed is essential for any web property, but for landing pages, time is of the essence. Think about it for a minute. You’ve deployed a fantastic marketing campaign, potential buyers are clicking your ads and getting to your landing page and…. your money page takes forever and a day to load. Result? A whole load of lost sales.

People have very short attention spans for anything online, and if your landing page doesn’t load, there are plenty of other places for your potential buyers to try.

Page load speed is crucial to the success of your campaigns. Accept that as a fact of digital marketing. And now read on to see how to host your pages for performance.

This walk-through will deal with one of my preferred landing page hosting solutions, Amazon S3, and CloudFront.

So Why Amazon S3 And CloudFront?

For a start, Amazon S3 is instantly scalable, plus only ever pay for what you use. Their prices are very competitive, and you can even get a Free tier for a full year. Amazon is pay-as-you-go, so you’re never paying for resources you don’t use.

Amazon has multiple data centers around the world, making anything hosted on S3 fast by design. Combine that with their CloudFront CDN (Content Delivery Network), and you have a winning combination with anything up to 80% faster load speeds compared to other solutions.

How To Setup Amazon S3 And CloudFront

So, to get started. You have a domain name on a registrar account (Namecheap, for example – my personal favorite) and an AWS account. If you don’t use Namecheap, you’ll need to figure out the appropriate steps on your domain registrar.

As of May 2019, Amazon requires SSL domain validation. SSL certificates are available inside your AWS account, but for this, to work, you need the registrar steps. What we will be doing here is setting up an email redirect so we can verify the Amazon SSL certificate via email.

1: Setup Email Forwarding

  • Login to your Namecheap account
  • On the domain you’re setting up S3 hosting for, click Manage
  • On the Domain tab, scroll down to the Redirect Email section
  • Click ADD CATCH-ALL, type in your email, and click the green checkmark.

That’s it. You’ve now created a catch-all email you can test by sending an email to [email protected], replacing the yourdomainname with your actual domain, of course!

2: Generate SSL Certificate

Log in to your Amazon AWS account and go to the ACM Dashboard (Amazon Certificate Manager)

  • Enter your domain name and your domain name with a * for wild-card certificates (yourdomain.com and *.yourdomain.com). This step creates the SSL certificate for the primary domain plus any sub-domains you might need to use.
  • Select email for the certificate validation
  • Amazon will send validation emails to your domain email, which we forwarded via the catch-all to your personal email. Click the approval links there, and your certificate will be issued.

3: Setup An S3 Bucket For A Static Site

  • In your AWS account go to the S3 Dashboard and click Create Bucket
  • Give the bucket a name and click Create

4: Set Bucket Permissions

By default, AWS buckets are private. That is, only you, the account holder, has access to these. We need to set the bucket to be public for your landing pages to be public (viewable).

  • Select the bucket you just created and click the Permissions
  • Click Edit on the Public Access Tab, un-check the last two options, then click Save.
  • Go to the Bucket Policy and past in the lines from Amazon help files below, replacing your bucket name in the Resource part:

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “AddPerm”,
“Effect”: “Allow”,
“Principal”: “”, “Action”: “s3:GetObject”, “Resource”: “arn:aws:s3:::mydomain/”
}
]
}

5: Setup Static Website Hosting

We now need to configure our S3 to host the website files for our domain. This is done in the S3 dashboard.

  • Choose the relevant bucket in your S3 Dashboard
  • Navigate to the “Properties” tab
  • Choose “Static Website Hosting”

The default setting for this option is “disabled,” but the options will appear on click.

  • Select “use this bucket to host a website.”
  • Use index.html for index and error document
  • Click “Save”

6: Setup CloudFront Distribution

  • Navigate to the CloudFront Dashboard and click “Create Distribution.”
  • Click “Get Started” in the Web section
  • Your Origin Domain Name is the Endpoint from the Static Website settings
  • Select the Redirect HTTP to HTTPS protocol policy
  • In the Distribution Settings, enter your domain names in the CNAME section
  • Select Custom SSL Certificate
  • Select the SSL certificate you set up earlier
  • Click “Create Distribution”

Make a note of your CloudFront Domain Name!

7: Add the CNAME Record To Your Domain

  • Login to your Namecheap account and click Manage on the domain you are adding to CloudFront
  • Navigate to Advanced DNS and go the Host Records section
  • Click Add New Record, select CNAME. Enter @ in Host type and for the Target, use your CloudFront domain name
  • Click the green checkmark
  • Wait for propagation (usually about an hour)

That’s it!

You’ve set up AWS and CloudFront hosting.

All you need to do now is go to your S3 bucket and upload your landing page files

Enjoy the speed!

Categories: Affiliate Marketing

Share this Entry:

Share on facebook
Share on twitter