Loading…

Creating a cheap and scalable landing page on Amazon

Written by Wouter van Lent on February 15, 2017.

Over the years I created many landing pages. They are ideal to gauge interest for a product, improve your SEO or collect leads. Several great products (like Unbounce) popped up to take most of the work out of your hands, just drag and drop your page together.

Unfortunately, they can become quite expensive when you’re churning out pages to validate a few ideas. Especially when you want to use more advanced features like SSL certificates. And let’s be honest, you should really be using these when collecting e-mail addresses or other user information.

Amazon AWS can be used to set up a fast and scalable landing page without breaking the bank. It is my go-to way when validating ideas. You’ll need to have some webdesign experience, but in return you’re not bound to the limits of landing page services.

Design and put the page together

I always start mocking up a landing page in Photoshop. It alows you to drag everything around without writing a bunch of new code. Make sure you design in a high resolution to be able to save the images as retina versions. Need some inspiration? Check out the great Saas CSS and Product Pages.

Designing the Bolstat landing page

Don’t wait too long to open your favorite IDE when you got a general concept ready. Start whipping together the page! I always fall back to the good old Bootstrap in a simple html template. You can also use a theme from Start Bootstrap if you don’t feel like starting from scratch.

Hosting your page

Now let’s get that page online. First step is to create an Amazon AWS account if you don’t have one yet. With Amazon’s free tier you can host a landing page almost for free for the first year.

1) Upload your files and configure S3

Amazon S3 is a static file hosting service. So, you won’t need to set up any servers. Go to the S3 tab and create an S3 Bucket. The region isn’t crucial here since we’re going to put a CDN in front of it. When the bucket is created, open it and click the “Properties” button. We must do two things on this section, make all the website files publicly accessible and set up website hosting for the bucket.

Click the permissions tab and choose “Add bucket policy”. Insert the code below and change YOUR_BUCKET_NAME into the name of the bucket you just created.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}

On the “Static Website Hosting” tab you should choose “Enable website hosting” and complete the Index document with “index.html” and optionally set an error document for 404 errors. Copy the endpoint value shown in the same tab, we will need this later.

You can upload your files to the bucket with the “Upload” button. When you’re updating your files regularly, I recommend using a tool like Cyberduck to simply the process.

2) Setting up Cloudfront

In theory, you could use your S3 endpoint to serve your website now. This will work perfectly fine for a few users near your Bucket location. But if they are farther away and you have more visitors, it will slow down and even drop requests.

Luckily Amazon offers Cloudfront, a global content distribution network (CDN) which has servers in every continent and always close to your visitors. It takes a copy of your bucket and servers the files very efficiently and fast. It also provides extra services like SSL connectivity.

Go to the Cloudfront tab in the Amazon console and click the “Create distribution” button. Choose “Web” as delivery method. The “Origin” is the place Cloudfront will be fetching your website files from. In this case that will be the S3 bucket.

In the origin settings enter your S3 endpoint from step 1 in the “Origin Domain Name”. When completed, the Origin ID will be filled in automatically. Leave Origin Path empty.

Cloudfront settings

Next up are the “Distribution settings”. Decide here if you want to use all Cloudfront servers around the world or only servers in the US and Europe. The latter is cheaper, but slower for people in other continents.

It’s important to enter the domain you are going to host the website on in the “Alternate Domain Names” field. For Bolstat this is the plain “bolstat.com” without the www prefix.

If you want to implement SSL, and I recommend you do. You must select “Custom SSL certificate”. The best option is to request a free certificate from Amazon. If you want to import an existing certificate, check out this article.

Cloudfront distribution settings

To request a fee Amazon certificate, click the “Request or import a certificate with ACM” button. Complete the subsequent steps and make sure you have access to the e-mail address in the WHOIS information of your domain.

After confirming your domain ownership, the certificate will be activated and added to your certificate list in the previously discussed Distribution settings screen. Use the refresh button to fetch the newly created certificate and select it.

Skip the other settings and click the “Create distribution” button. Your Cloudfront CDN will now be set up. It will take approximately 15 minutes for everything to be ready.

3) Linking everything to your domain

There are two options to set up your Cloudfront distribution on your own domain. Host your DNS on Amazon with Route 53 or use your external domain provider DNS service.

Cloudfront distribution settings

If you use your own DNS provider, take the Cloudfront Domain Name from the Cloudfront overview (as shown above) and create a CNAME record as shown below.

1
www.bolstat.com. CNAME de5zu7je3wmad.cloudfront.net.

On Amazon Route 53 you’ll have to create a “Record set” and set “Alias” to yes. Click the “Alias Target” input field and wait for the loading to complete. Select you Cloudfront address now. When using Route 53 aliases you can also host the Cloudfront distribution on your apex domain (without www).

That’s it! You have a very fast and scalable landing page up and running for only a few cents a year!

Bonus

For Bolstat and my other validation pages I also set up e-mail on the domain and use a Lambda function to enable e-mail forms on the static page.

The disadvantage of S3 is that it won’t let you run dynamic code like PHP. Luckily there is a service called Lambda. It lets you run code in the cloud without setting up a server. You can use, for example, Node JS to make an endpoint available to which you can POST contact form data and send it to yourself. check out this article to set it up yourself.

Setting up e-mail addresses for your domain is pretty much a requirement for everyone. There are several options like Google Apps and Office 365. A good free alternative for these is Zoho Mail. They allow your to use your custom domain with one mailbox and unlimited aliases like info@yourdomain.com.

What is your favorite method to create and host landing pages for your ideas? Share it in the comments!

 

Join my journey of getting a side project off the ground.

I'm sharing my experiences, knowledge and the hard-truths about getting from a wantrepreneur to a viable side project!

Thanks for subscribing!

Start
Beta launch
$250
$500
$1000
$1500