First things first is designing a landing page, check out our YouTube video showing a screen recording of how this was done.
There are 4 different designs for the website depending on which size you are viewing it at: phone, tablet, laptop, desktop.
These designs now needed turning into code, marking up the text in html then styling using css, you can check out our other process video.
We started with a https://html5boilerplate.com/ to work on top of to help ensure the same experience across different browsers. In the CSS there are 4 different breakpoints for each of the four designs.
Hosting the website
In order make the website live we needed to host it somewhere and have a nice domain name. We used GoDaddy for the domain name provider and AWS to host the static website using S3 (part of the free tier) and Route 53 (about 50p per website).
What is S3?
Amazon Simple Storage Service is storage for the Internet, you can use S3 to store and retrieve any amount of data, at any time, from anywhere on the web.
Setting up S3
This is going to store your landing page, for everyone to see.
Log into the AWS Services and go to S3
Create a Bucket
Name your bucket and choose a region that you want it to be stored. As most of our traffic will be UK based we selected our region to be London.
Note about naming: a bucket name is unique to the amazon server and if you are hosting a website it needs to be exactly the same as your domain name – hurryhurryhealme.com
It is also useful to create another bucket called http://www.hurryhurryhealme.com
The permissions need to be changed through the edit bucket policy.
Change the bucket policy to…
Static Web hosting needs to be enabled and you can choose which index document and error document you like.
Make a second bucket and call it http://www.hurryhurryhealme.com so that traffic that searches for www. and just the url will be directed to the same site.
The Static Website Hosting for this one is slightly different – as you want to redirect all requests to this bucket to your other bucket.
You can check that your website is working by copying and pasting the Endpoint url.
Setting up Route 53
What is Route 53?
Amazon Route 53 is a Domain Name System (DNS) web service. It is designed to route end users to Internet applications by translating names like http://www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other.
Setting up Route 53
This is going to direct anyone who types in your domain name to your aws bucket.
Log into the AWS Services and go to Route 53
Go to your hosted zones tab on the left.
Click on Create Hosted Zone
Enter your domain name (this should be the same as what you called your S3 bucket, e.g. hurryhurryhealme.com, keep it as a public hosted zone.
You can now create a Record Set.
You want to:
- Name: leave blank
- Type: A
- Alias: Yes
- Target: your S3 website endpoints from the drop down list.
Create another Record Set.
- Name: www.
- Type: A
- Alias: Yes
- Target: S3 bucket http://www.hurryhurryhealme.com
Your hosted zone should now look like this!
Now you want a nice domain name for people to type in and access your website, I’m going to talk about the process with GoDaddy.
Register a Domain Name – Buy one!
Got to Manage My Domains
Find your domain name and go to Manage DNS by clicking on the little cog.
Go to your named servers and change them.
You want to name the servers the same as the ones on your Route 53.
Now wait – for .com names it will take up to 24hours and for other’s it could take up to 48hours.
Keep checking to see if your website is up by typing in your url: hurryhurryhealme.com
To make sure that people can search for HurryHurryHealMe.com there is one last thing to do, tell google that you own the site.
Click on Add a Property
Type in your website
You are then asked to verify your website, download the google file.
Then upload it to your S3 bucket.
You can now verify your site
You can also do this process again for the website name with www. in front. You wont need to upload the file again as it is already in your bucket.
You can now check that this works by going to google and searching for the site. Sometimes it takes a little while for this to happen to!
One fully working landing site