How to Upload Website to Amazon S2

How to Host your Static Website with AWS - A Beginner's Guide

When I created my outset portfolio terminal yr, I based it on what I had learned from freeCodeCamp (HTML, CSS and a piddling JavaScript).

At that point, I had only viewed my portfolio on localhost by viewing the files on my local computer. I didn't know anything nearly how to host a website online.

Learning how to host my first website wasn't piece of cake just it was a great learning feel. If you're an aspiring web developer or just interested in launching your ain static website, and so I promise you lot volition discover this guide useful.

Who is this guide for?

This guide is aimed at consummate beginners who want to host a static website (a site with fixed content). I volition provide a how-to-guide for the following:

How to buy a domain.
How to configure your domain for an external hosting provider.
How to host your website with Amazon Spider web Services (AWS).
How to make your website secure (SSL certification) using Amazon Certification Manager.

There might be some terminology that'due south new to you lot. Delight go alee and look up terms that are not familiar. I've put in useful links and explanations where I thought appropriate.

What is a domain proper name and DNS (Domain Proper name System)?

A domain proper noun is your website address. For instance thecodinghamster.com. Just for a computer, a domain name is actually a serial of numbers (an IP address). An IP address looks like this: 123.321.0.1

Information technology's not like shooting fish in a barrel for us to recall a long string of numbers. Then your calculator refers to a DNS to interpret a text based website address into an IP accost which it can so empathize. A DNS is similar a directory.

I watched this great video which explains domain name, DNS and how this works in under five minutes. Delight watch the first five minutes of the video if you're interested:

Where can you lot buy your domain name?

You can buy a domain name from a domain proper noun registrar. Prices offset from a few dollars. Your domain name is unique. Each domain name registrar offers different levels of services/back up. Merely you can register your domain with whatsoever registrar.

What is a hosting provider?

"An Internet hosting service is a service that runs Internet servers, assuasive organizations and individuals to serve content to the Internet. There are various levels of service and various kinds of services offered."

When I was looking for a hosting provider for my website, I explored different options. The prices ranged from £ii.00 — £5.00 per month with diverse storage options from 0.5GB to 10GB. The prices seemed reasonable merely all I wanted to exercise was host a static website. Information technology had a few images, HTML, CSS and JavaScript files. No dynamic content.

Why AWS?

After some further enquiry, I constitute AWS. AWS offers a gratuitous tier choice. Essentially, y'all get lots of free products. Some of them expire later 12 months and others are free in perpetuity. The only cost that you will incur for hosting a static website is the cost of setting up a hosted zone. This cost $0.50 per month. So I went with AWS and ready my account.

The great affair nigh AWS is the price and it's a reliable hosting provider. But one thing to bear in mind is that you lot're reliant on their documentation. As I started reading about what services AWS offered, it quickly became confusing! I used the official AWS guide provided for setting up static websites. But I found myself getting lost with clicking on a link to another link and so forth. I started researching other guides to brand up for cognition gaps.

I found this this fantabulous guide by Victoria Drake.

I followed Victoria Drake's guide alongside the AWS one and managed to muddle through. Just there were still a few things that were non explained which I hope to flesh out.

Before we keep, here is your to do list:

Do some inquiry on domain registrars and buy your domain name.
Sign up for a free business relationship with AWS.
Have both the documentation from AWS and Victoria Drake'southward guide open up. Apply my guide to guide you through the documentation (hope that makes sense!).

Hither nosotros go!

AWS: Create a Hosted Zone on Road 53.

Route 53 is where all your DNS requests are handled.

The first thing y'all must gear up upward is your hosted zone with Route 53. This is really piece of cake if you bought your domain through AWS. A hosted zone is created automatically once you lot've purchase it. If you've done this then but skip to the next section (Set your S3 Buckets).

However, if you were similar me and bought your domain name via some other registrar and so delight practise the following.

This next part is how to create a Hosted Zone on Route 53 if you haven't bought your domain proper noun from AWS:

Become to Route 53 in your console and click on "Create Hosted Zone". Fill in your domain address, comment is optional and choose a "Public Hosted Zone". Click on "Create".

2. Once your hosted zone is created, you need your NS (Proper name Servers) records:

3. Go to your domain name registrar and login. Depending on your registrar, y'all should detect a section in your settings called "Nameservers" which yous can edit. You lot need to copy across the AWS NS records and alter the existing NS records in your domain settings.

Please note, don't copy the full stop/menstruum at the cease of the NS record. For case, is should exist "ns-63.awsdns-07.com", not "ns-63.awsdns-07.com."

It will take up to 24 hours to propagate.

Set upwards your S3 Buckets

In the meantime y'all tin can set up your S3 Buckets. The S3 Saucepan is the storage for your files such every bit your alphabetize.html.

You must configure ii buckets for your website: 1) yourdomainname.com and 2) www.yourdomainname.com.

The first saucepan is your main bucket where yous will upload all your documents, such as your index.html. The second bucket redirects to the first bucket. To set up your S3 Buckets, delight follow the AWS documentation on how to set your S3 bucket ( ii: Create and Configure Buckets and Upload Data).

In addition to the documentation, there are a few things to notation:

In section 2.1 (part 2): click on the link How Do I Create an S3 Saucepan? This is a footstep past pace guide and explain all the settings you demand to choose.
In section 2.1 (role three): y'all don't have to upload your website files yet. You can add a test index.html in the meantime.

Have note of your endpoint. You tin find this in your S3 bucket > "Properties" tab > "Static Web Hosting" box. It should look something like this: http://yourdomainname.com.s3-website.eu-west-2.amazonaws.com

Add the Alias/"A" records in Road 53

Finally become back to Route 53 and open your hosted zone to set up your Alias records. You lot can follow the documentation on "Step iii: Add Allonym Records for instance.com and www.instance.com". Information technology is quite straightforward.

Once the NS settings accept propagated, your site is alive! Yous'll be able to visit your site at the domain address east.one thousand. yourdomainname.com

However, please note that it won't be secure and y'all'll see a http:// prefix in the address bar. I'll get to that in the next section.

How to make your website secure and what is a SSL certificate?

It'southward very of import to brand your website secure and to do this yous'll need to get an SSL certificate. SSL stands for Secure Sockets Layer and information technology uses encryption to securely transfer data between a user and site. Google will also give a rankings heave for websites with HTTPS.

If you secure the website with an SSL certificate, you'll meet https:// and a padlock symbol in your address bar.

In that location are different types of SSL certificates: Extended Validation Certificate and a Domain validated certificate. For a personal website or blog, only a domain validated certificate is required. You also won't meet the name of your company on the left of the bar like the example above. You only get this if you have an Extended Validation Certificate which is more for large companies/enterprises.

How much does it toll for an SSL certificate?

I've seen a range of ways of getting an SSL document. You can pay a premium for a service that will practice this on your behalf or you tin can practise information technology for free with Let's Encrypt. Let's Encrypt is an official Document Authority (CA). But you lot have to renew your certificate every three months and the process is quite complicated.

I didn't desire to pay a premium or want the hassle of renewing every 3 months. Conveniently, AWS tin can issue SSL certificates for a very small fee. You pay $0.75 for each certificate issued and it lasts for one year.

If you cull not to go with AWS, brand sure yous practise your inquiry and choose a trusted CA!

How do you get an SSL certificate with AWS?

Log into your AWS console and navigate to the AWS Certificate Manager (ACM).

Brand sure you change the region from the default (Ohio) to N. Virginia. This is not explicit in the guides and just the N. Virginia region tin can consequence certificates. I learned the hard way and wasted a lot of time!

Then click on "Go Started" under "Provision Certificates".

Follow the documentation with AWS ("Requesting a public certificate using the panel") and use Victoria Drake's guide (nether "SSL certificate").

In addition to the guides at that place are few things that weren't fully explained:

You lot'll need to validate your domain ownership by email or directly with DNS. I would propose to always verify ownership by DNS validation.
One time yous've requested your certificate you'll get something similar this (except the status will be pending). Click on the "Consign DNS Configuration file":

It's an Excel spreadsheet which volition comprise something like this:

You'll demand to add these records to your DNS settings with your registrar. Log in and get to DNS settings. The interface varies with different registrars simply you're looking for your Host records nether your DNS settings.
Click on "Add Tape" > record type is CNAME:

You need to add ii records: i) Hostname should be "@" and Target Proper noun should be the Record value from the DNS configuration file.

2) Hostname should be * (asterisk) and Target Proper name should be the Record value from the DNS configuration file.

If yous desire more information most the CNAME and record types, I found this helpful article.

It's quite long, simply I've pulled out the useful office:

"Notation: Hostname refers to the prefix earlier the domain name. To create a Bare record, utilize an @ in the Hostname field. This represents an empty prefix (then the name exactly matches the domain name; for example divapirate.com). The @ hostname is also referred to as the the root of the domain. An * (asterisk) in the Hostname is a wildcard, and represents any prefix. For example, creating a record for *.divapirate.com will point <any prefix>.divapirate.com at the IP address provided."

You simply need to look for the verification. For me, this took about an hour.

How do you add your SSL certificate?

With AWS you can add SSL certificate to your website through setting upward CloudFront. CloudFront is great for speeding up your website. I used the AWS documentation and Victoria Drake's guide (look out for her useful tips).

Please note, when you create your CloudFront distribution, at that place's a driblet down menu to add your SSL certificate. If y'all take been issued with an SSL certificate already, it will be pre-populated in the driblet down card.

Your state in your CloudFront dashboard should changed to "Enabled". This isn't instant and takes a niggling fourth dimension.

About there…

Finally, you lot need to get your Domain Name from the CloudFront distribution. Information technology should be something like this dsfdser83543.cloudfront.net.

Go dorsum to Route 53 > hosted zone > change both Alias records (Alias Target) to the CloudFront Domain Name.

Voila! You take hosted your outset secure static website with AWS.

Promise y'all found this useful. If you lot take any questions or but want to say hello, find me on Twitter @PhoebeVF

A large thank you to Victoria Drake for her guide. For a more advanced tutorial on this topic, delight check out Victoria's article: "Hosting your static site with AWS S3, Route 53, and CloudFront".

Illustrations courtesy of https://undraw.co

Learn to code for free. freeCodeCamp's open source curriculum has helped more than than twoscore,000 people get jobs as developers. Get started

andrewsprowhy.blogspot.com

Source: https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/