Setting up a Landing Page

Designing

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.

Illustrator Designs

 

Coding

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.

Step 1

Log into the AWS Services and go to S3

screen-shot-2017-02-07-at-09-59-03

Step 2

Create a Bucket

screen-shot-2017-02-07-at-09-59-20

Step 3

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

screen-shot-2017-02-07-at-09-59-28

Step 4

The permissions need to be changed through the edit bucket policy.

Screen Shot 2017-02-07 at 09.59.48.png

 

Change the bucket policy to…

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “AddPerm”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::hurryhurryhealme.com/*”
}
]
}

screen-shot-2017-02-07-at-09-59-53

Step 5

Static Web hosting needs to be enabled and you can choose which index document and error document you like.

screen-shot-2017-02-07-at-10-00-10

Step 6

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.

Screen Shot 2017-02-07 at 10.09.38.png

 

Step 7

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.

Step 1

Log into the AWS Services and go to Route 53

screen-shot-2017-02-07-at-09-59-03

 

Step 2

Go to your hosted zones tab on the left.

screen-shot-2017-02-07-at-10-17-43

Step 3

Click on Create Hosted Zone

screen-shot-2017-02-07-at-10-17-51

Step 4

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.

screen-shot-2017-02-07-at-10-17-57

Step 5

You can now create a Record Set. 

screen-shot-2017-02-07-at-10-18-23

Step 6

You want to:

  • Name: leave blank
  • Type: A
  • Alias: Yes
  • Target: your S3 website endpoints from the drop down list.

screen-shot-2017-02-07-at-10-18-35

Step 7

Create another Record Set.

Screen Shot 2017-02-07 at 10.26.47.png

Step 8

Your hosted zone should now look like this!

screen-shot-2017-02-07-at-10-18-14

 

Domain Name

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.

 

Step 1

Register a Domain Name – Buy one!

 

Step 2

Got to Manage My Domains

screen-shot-2017-02-07-at-10-31-31

Step 3

Find your domain name and go to Manage DNS by clicking on the little cog.

screen-shot-2017-02-07-at-10-31-52

Step 4

Go to your named servers and change them.

You want to name the servers the same as the ones on your Route 53.

 

Step 5

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

 

Google Console

To make sure that people can search for HurryHurryHealMe.com there is one last thing to do, tell google that you own the site.

screen-shot-2017-02-07-at-10-40-03

Step 1

Click on Add a Property 

screen-shot-2017-02-07-at-10-40-16

Step 2

Type in your website

screen-shot-2017-02-07-at-10-40-34

Step 3

You are then asked to verify your website, download the google file.

screen-shot-2017-02-07-at-10-40-42

Step 4

Then upload it to your S3 bucket.

screen-shot-2017-02-07-at-10-41-41

Step 5

You can now verify your site

screen-shot-2017-02-07-at-10-42-04

Step 6

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.

screen-shot-2017-02-07-at-10-42-40

Step 7

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!

Screen Shot 2017-02-07 at 10.47.23.png

 

One fully working landing site

All done!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s