Creating a Low-Cost Landing Page

Published in

Bouncelytics Blog

6 min readJan 30, 2016

So you want to create an online presence for your business? No prize guessing that the first step will be creating a landing page. There are lots of tools that can assist you in making and hosting one but would you like to put some effort in making it without much cost? In this post, I’ll cover how you can go about creating, hosting and managing your landing page for almost zero cost.

In the first part, we are going to cover how to design a landing page. For illustrative purposes, I’ll be creating a landing page for a marketing agency.

Using a template

Unless you are willing to bang your head by designing the page from scratch, you will probably prefer the next best thing — using a template. Web templates are ready-to-use web designs which make your job much easier. There are lots of free templates to choose from and if you are willing to pay a little, you can choose from a lot more from ThemeForest.

Here are some of the free resources you can choose from -

For my landing page, I’ll be using Creative, a free Twitter Bootstrap Template.

Editing the page

After downloading the template, the next step is to edit its text and images. Depending on your experience, you can either edit HTML yourself or hire someone from Fiverr to do it for you (YMMV). Begin by extracting the archive and opening index.html in browser -

Bingo! You have successfully setup landing page on your local machine. Let’s start editing.

I use my favourite text editor Sublime Text for everything but it is just a matter of preference, you can choose from Notepad++, Netbeans or Dreamweaver (if you have a license).

I begin by changing the headline, subheading and CTA. This is fairly straightforward and only involves replacing text in the HTML. I also wish to change the background image and I go to the /img folder and replace header.jpg with another stock photo I got from a free stock photo website Pexels.com.

After doing the additional tweaks, landing page looks somewhat like this. Not bad! Although I am not sure if the tag-lines are ridiculous. 🤔

Integrating Mailchimp

We have successfully created a landing with information about our business but we need a lead-grabbing form. The best way to do it will be by using Mailchimp. The service provides extensible HTML forms for getting subscribers’ information and is free for upto 2000 subscribers. If you can do without marketing part and prefer something without those limits , you can use Google Forms which has allows you to collect information directly into spreadsheets.

Signup for a Mailchimp account and begin by creating a mailing list. With each list, you can run email campaign for your leads and get more information using surveys. Patrick Mckenzie wrote a great piece about how to use them to know more about your customers.

Once you are done with creating the list, you can start creating a form. From Lists, choose your list you want to create a signup form for and then go to Signup Forms > Embedded Forms. Here we will choose “Naked Forms” so that we can customise and match it with our theme.

We copy the code and paste it in our HTML. I know it looks pretty ugly. To fix it I’ll pull CSS magic on it.

Much better 😎! Here is the zip file of the finished page.

Hosting the page

We have a semi-decent landing page ready which will drive customers to our business but how do we make it make available on the internet? The layman answer is to let someone host it who likes to keep his computer on for long time and charges customers for it, i.e, hosting providers. You must have heard of them — Hostgator, Bluehost and others charging north of 9$ a month.

But you can avoid a lot of that cost because what you need is a very scaled-down host which will just serve your files quickly and nothing more. Amazon S3 just fits the bill. Even if you are serving thousands of pageviews a day, it is very unlikely that you will be billing more than a few pennies a month.

Creating bucket

Begin by registering your AWS account and logging into your console. Goto S3 under “Storage & Content Delivery” and create an S3 bucket with a unique name. If you are planning to use a domain, the bucket name should be the domain name you are going to use. Ideally, the region should close to your targeted visitors but if you are confused, just use the default.

Once the bucket is created, you will notice lots of options on the sidebar for it. We will need to enable static website hosting for it so that our files are accessible over the internet.

Adding Files

Enabling it will make my landing accessible over here. But hey, we haven’t added any files yet. Click on your bucket name (ramblr.bouncelytics.com) and select upload. With the greeted box, drag and drop your files and start the upload. Once you have uploaded your files, select all the files’ checkbox and choose “Make Public” to make the files accessible. Confirm the dialogue box and your landing page is ready.

Updating the page

Unfortunately, Amazon S3 doesn’t allow editing individual files. The way to go about updating anything is by deleting the file and re-uploading it again.

Using custom domains

We have our landing page in the realms of the internet but a thirty character long URL is not something anyone would find pleasing to use. To use a custom domain, we have to create a record which tells — “Hey server, subdomain ramblr is same as ramblr.bouncelytics.com.s3-website-us-west-2.amazonaws.com”. This goes by the name of CNAME record.

Every Domain Provider has a different interface for creating a record. If you not sure where this option exists, try reading documentation or contacting their support.

Doing this with CloudFlare is a matter of few steps. I click Add Record, wait for a few seconds and ta-dah! the landing page I created is accessible via ramblr.bouncelytics.com.

Conclusion

I have illustrated one of the cost effective ways to host a landing page. Although, it can be argued that a point-and-click interface like Unbounce could be more worthy of the time spent in doing this, but I believe people should aware about choices they have. To draw an analogy, even if Photoshop is a better tool for professional use, people using it must know something like GIMP exists.

Shubham Jain is the co-founder of Bouncelytics — a tool that helps track when and where you are losing your visitors.