Let’s build a domain parking page with real-time analytics

It is true that most of the known domain registrars offer a domain parking service. GoDaddy even lets you earn cash with their CashParking solution, but alas, this service will cost $3.99 per month for the basic plan and you better be sure your domain(s) will generate enough traffic to cover this expense.

A screenshot from CashParking (Taken on April 20th, 2019)

Of course, alternatives do exist. We can park our domain for “free” by advertising the registrar. Here’s how the free domain parking looks like on GoDaddy:

A screenshot of one of my domains, parked at GoDaddy

Namecheap isn’t an exception. Here’s how their free domain parking page looks like:

http://parkingpage.namecheap.com/

Now don’t get me wrong — The registrars don’t have to park our domains. Their main business is to register domains and manage DNS. Therefore, it seems there is no simple and free solution for someone who wants to evaluate the usage of a domain name, while the website is under construction.

Amazon Simple Storage Service to the rescue

Full disclosure: I am a big fan of Amazon Web Services.

Because every file (object) stored at Simple Storage Service (S3) has a unique URL, we can host a website on it. What is great about this service, is that it will cost us nothing (or approximately so): As part of the AWS free usage tier, Amazon gives us 20,000 GET requests a free of charge and the next 1,000 requests for as low as $0.0004 (as of writing this story). Let’s do the math:

• If our domain name is a blast and we have 100,000 monthly visitors, we will pay just as little as (100,000–20,000)/1000*0.0004=$0.032
• For the average domain name, we will pay nothing…

Here’s how Amazon describes S3:

[…] Amazon S3 is designed for 99.999999999% (11 9’s) of durability, and stores data for millions of applications for companies all around the world.

Back to domain parking… In order to park our domain at S3, all we have to do is to build a static HTML webpage with some descriptive text (e.g “under construction” or “coming soon”), our domain name written in big and bold letters and initiate Google Analytics script for websites. When the webpage will be uploaded to an S3 Bucket (analogous to a directory on your OS) and having Static Website Hosting enabled, our bucket will have a unique URL, which will look like:

http://www.domain.com.s3-website-us-east-1.amazonaws.com

Before our parking page will go live, there is another optional (but suggested) step we need to perform: Create a CORS configuration for our bucket. Please read the use cases for which CORS is mandatory.

After finishing with configuration, we would create a CNAME record which origin is www.domain.com and which will be mapped to the S3 URL. It is important to notice that, S3 requires the name of the full domain (including subdomain) to match the bucket name, or otherwise, the solution won’t work.

Parking page creation automation

After we figured out how to have a parking page on S3, we will now automate the process, to be able to create a new parking page automatically by doing as few operations as possible.

For this, I have created a boilerplate project which will let you configure your domain name, as well as the descriptive text (see picture below) and connect your Google Analytics account to the landing page, so you won’t miss any visitor.

This is how your parking page is going to look like…

In order to automate the process, we need to:

1. Download and extract the parking webpage from the boilerplate zip.
2. Open a free AWS account here. During the process, Amazon will ask you for a credit card number. But as long as we will have less than 20,000 visitors per month, it won’t cost us a dime [Disclaimer: The author is not responsible for any charges you may receive from Amazon and/or their subsidiaries];
3. Create an IAM user with programmatic access and the following permissions: s3:PutObject, s3:PutBucketWebsite, s3:GetBucketWebsite, s3:GetBucketCORS, s3:PutBucketAcl, s3:CreateBucket, s3:ListBucket, s3:PutBucketCORS, s3:GetBucketAcl, s3:HeadBucket, s3:PutObjectAcl. If you’re unsure how to do that, head to Creating an IAM User in Your AWS Account and Specifying Permissions in a Policy. Once the user is created, write down the Access Key ID and the Secret key — we will need them for the configuration step;
4. Download and install Node.js 10 and npm;
5. Optional: Create a Google Analytics account and write down your Tracking ID (instructions).

Configuration

Now open the terminal and go to the extracted directory containing the boilerplate from step 1. There you will find a config.json file. With your favorite text editor, make the following modifications:

• trackingId: Google Analytics Tracking ID (optional).
• domainName: Domain name. It will appear in big bold text as shown in the screenshot above. Please use the top-level domain name (without ‘www.’).
• innerHtml: The HTML which will appear under the domain name. In the screenshot above, it was set to: “Coming soon…”.
• accessKeyId: The AWS Access Key ID from step 3.
• secretAccessKey: The Secret Key from step 3.
• awsRegion: AWS default region. We can leave it ‘us-east-1’.
• showRibbon: If you want to support the project and make the ‘Fork me on GitHub’ ribbon visible on the left corner of the landing page, set the field value to true, otherwise set it to false.

We’re almost done. All we have to do now is to execute to commands:

1. npm install
2. npm run deploy

The first command can be run once. For further deployments — modify config.json and run only the second command.

Follow the progress on the screen. If everything went smooth, the last line on your terminal should be: “Please create a new record: CNAME (www.your-domain) ->www.(your-domain).s3-website-us-east-1.amazonaws.com”. But before creating, go to www.(your-domain).s3-website-us-east-1.amazonaws.com and verify your landing page is accessible. If you set Google Analytics Tracking ID, verify that there is at least one active user on the site.

Last step: Update the CNAME record using your DNS provider. Give them some time to propagate the change, then verify your domain now has a landing page.

Parking your top-level domain

Unfortunately, S3 website hosting can’t work with top-level domains. However, using our DNS provider, we can redirect the top-level domain to the www subdomain which is parked on S3. Here are instructions for creating a domain redirection using Namecheap.

Geek alert! What’s under the hood?

The project consists of two parts:

1. The web framework.
2. The AWS deployment script.

For the web framework, Angular 7 was chosen. But why use Angular for a single HTML file? The answer is plain and simple:

1. Flexibility: While one needs a single static page, someone might have additional needs (contact form, advertisements, animations, etc.). Angular lets us easily customize our web application.
2. Personal preference: I work with it on a daily basis.
3. Performance: As we will see shortly, there is no noticeable difference in performance and loading times between Angular and the existing parking pages served by GoDaddy and Namecheap.

In order to report to Google Analytics using a dynamic (configurable) Tracking ID, angulartics2 was the choice which at the first glance might seem like overkill, but again — I wanted to give flexibility. Mixpanel in addition, or instead of, Google Analytics? Change just a few lines of code and we’re all set.

For the AWS deployment script, there are only two external dependencies: aws-sdk and mime. Using the AWS SDK, we create/update the S3 bucket, the CORS configuration, and upload the generated Angular web app to the S3 bucket. It is important to resolve each file’s mime type, or otherwise, our landing page won’t be accessible to browsers.

Benchmark

PageSpeed Insights was used to measure performance.

Namecheap/desktop:

Namecheap/mobile:

GoDaddy/desktop:

GoDaddy/mobile:

S3 Hosting/desktop:

S3 Hosting/mobile:

To summarize the comparison of PageSpeed Insights, we can clearly see who the winner is on desktop browsers… On mobile, GoDaddy is just 2 points above S3. Namecheap was, well… Cheap in all tests. This makes S3 hosting both feasible and even preferable to the alternatives we’ve discussed earlier.

Now go and enjoy your free domain parking! 😍

For your convenience, here is the project repository:

levz0r / s3-domain-parking

Configurable lightweight domain parking page with Google Analytics support.

AWS S3 Domain Parking

This project creates an S3 bucket that is configured to host a static website with CORS enabled. All you have to do is to configure the project and create a CNAME record in your domain.

Prerequisites

1. AWS free tier account;
2. Programmatic access to AWS account with the following permissions: s3:PutObject, s3:PutBucketWebsite, s3:GetBucketWebsite, s3:GetBucketCORS, s3:PutBucketAcl, s3:CreateBucket, s3:ListBucket, s3:PutBucketCORS, s3:GetBucketAcl, s3:HeadBucket, s3:PutObjectAcl.
3. Access to Domain management (Namecheap, GoDaddy, etc.);
4. Google Analytics account (optional).
5. Node.js and npm installed.

Limitations

Because of the way S3 static website hosting works, it is not possible to create a CNAME record of the top level of your domain. Therefore, you can park (subdomain).domain.com (e.g www.domain.com). Having said that, some DNS providers (Namecheap) allow redirecting the top level domain to a subdomain. See question here.

Configuration

Before your parking…

View on GitHub

Thank you for reading! As always, I am happy to receive your feedback and suggestions! If you liked what you’ve read, please share this story with your friends!

-Lev

This article was originally posted on Medium