
How to create a serverless Landing Page on AWS – Part01
A common way of approaching a digital business, after have chosen the company or solution name and registered the domain name, is to start building the SaaS solution and only when ready start with marketing activities. This approach has the disadvantage to spend money and time developing a solution with requirements not tested on the market. A better approach is to follow the Minimum Viable Marketing Framework (MVMF) starting advertising your future solution ad collecting prospects with a landing page.
In this tutorial, we start hosting a Hello World page on AWS and then we will create and publish a complete Landing Page.
Part 1: Host a Hello World Page on AWS
Architecture
To host a landing page on AWS we will use three AWS services implementing the following architecture:

Amazon Route 53 is the DNS service of the AWS platform and will be used to manage the DNS routing. Amazon CloudFront is a CDN (Content Delivery Network) service and Amazon S3 is an object storage service that can be used also to host a static website.
Create the S3 Bucket
The first step is to create an S3 Bucket. Enter in AWS Console and insert “S3” into the Find Services search field. In the Amazon S3 dashboard click on the “Create bucket” button.

Insert the name of the bucket (any name is fine but it is recommended to use your domain as bucket name), select the region where you want to create the bucket and click on “Create bucket”. Once created, click on the bucket name to access the bucket properties.

Click on “Static website hosting” and then select “Use this bucket to host a website“. Also, add the main file of your web application (generally index.html) and click on “Save” button.

In this window you can notice the bucket endpoint with the following format:
http://[your-bucket-name].s3-website-[Region].amazonaws.com
Now you can create a simple index.html file like the following one:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Hello World</title> | |
| </head> | |
| <body> | |
| <div align=”center”>Hello World!</div> | |
| </body> | |
| </html> |
Upload Hello World file
To upload the file go to the S3 Dashboard, click on the bucket name and then click on the “Upload” button.

then select the index.html file to upload and click “Upload”.
If you try to access to the S3 endpoint you will receive a 403 Forbidden message error because access is denied.
Configure Permissions
To enable public access to the bucket you need to go to the “Permissions” tab and click on “Block public Access“. Then deselect “Block all public access” checkbox and click “Save”.

Then click on the “Bucket Policy” button, insert the following JSON policy (modifying your bucket name) and then click to “Save”:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "Version": "2012-10-17", | |
| "Statement": [ | |
| { | |
| "Sid": "PublicRead", | |
| "Effect": "Allow", | |
| "Principal": "*", | |
| "Action": "s3:GetObject", | |
| "Resource": "arn:aws:s3:::[bucket-name]/*" | |
| } | |
| ] | |
| } |

You can now notice that the bucket has public access.

If you insert the bucket endpoint url in a web browser you will see Hello World!

Create CloudFront distribution
However, the connection to the website is not secure and to protect it you can use the Amazon CloudFront service. In the AWS Console insert “CloudFront” into the Find Services search field and then click on “Create Distribution“.
There are two types of CDN: Web and RTMP. Click on the “Get Started” button of the web distribution, then you will see a page with a long list of parameters to fill.

The parameters to change are the followings.
In Origin Settings:
- “Origin Domain Name“: select the S3 bucket created before.
In Cache Behavior Settings:
- “Viewer Protocol Policy”: select Redirect HTTP to HTTPS.
- “Object Caching“: select Customize and change TTL values (you can set Default TTL to 600 and change it later).
In Distribution Settings:
- “Price Class”: select the best option according to your case (For me is “Use Only U.S., Canada and Europe”)
- “SSL Certificate“: select Default CloudFront Certificate
- “Default Root Object“: add index.html
At the end click on “Create Distribution” and take a coffee (or a cup of tea) because creation time will be about 15-20 minutes.
When the state of the distribution will be Deployed, insert into your browser its url (in my case d3u7d8ugu2qrai.cloudfront.net) and this time the connection will be secure.

Configure DNS in Route 53
In the AWS Console insert “Route 53” into the Find Services search field and then click “Get started now” in DNS management section.

Click “Create Hosted Zone“, insert the name of your domain (you can register a domain in AWS or use your own domain registrar) and click on “Create”.

At the end of hosted zone creation, you will see the following record sets: NS and SOA.

To connect a domain of another domain registrar you need to change the record sets following the registrar documentation and pointing to the AWS NS record.
Request an SSL Certificate
To obtain a certificate (free of charge) for your domain you need to go to the AWS Certification Manager service and click “Request a certificate” and then choose the default option “Request a public certificate“.

Then add your domain name and click on “Next”

Select “DNS Validation” option and click “Next”

Then select the default options until Step 5.

Click continue and you will see your domain in status “Pending Validation“.

Click on your domain name to see the CNAME record to add to DNS configuration to obtain the certificate.

You can just simply click on the “Create record in Route 53” button.
Otherwise, if you want to do it manually, you can go to Route 53 Dashboard, click on “Hosted zones, select your domain and click on “Create Record Set”. Select “CNAME” in the Type dropdown field and fill the Name and Value fields.

Then wait until your certificate will be in the “Issued” status (it may take up to 30 minutes).
Import the SSL Certificate in CloudFront
The final step is to import the SSL Certificate. Go to the CloudFront Dashboard, select the distribution created before and click on “Edit”.
You need:
- Add your domain in the “Alternate Domain Names” field
- Select the “Custom SSL Certificate” option
- Select the certificate created before

Then click “Yes, Edit” and wait until the status of the distribution is “Deployed“.
Routing the traffic to CloudFront
There is the last step to perform, that is to create an A record set to route the queries to your domain towards CloudFront.
Go to Route 53 dashboard, select Hosted Zones and then click on your domain.
Click on “Create Record Set“, then:
- Select “A – IPv4address” in the Type dropdown field.
- Select “Yes” in the Alias field.
- Select the created CloudFront distribution in the “Alias Target” field.
Click on the “Create” button to create the record set.

Finally, you will see the Hello World Page on your domain and with an SSL Certificate active.
Read the second part of this article.