Upload a Simple Web Page With Your Personal Information to the Ec2 Instance
When I created my start portfolio last yr, I based information technology on what I had learned from freeCodeCamp (HTML, CSS and a niggling 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 about how to host a website online.
Learning how to host my first website wasn't piece of cake but information technology was a great learning experience. If yous're an aspiring web developer or just interested in launching your ain static website, then I hope you will detect 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 will 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 Web Services (AWS).
- How to make your website secure (SSL certification) using Amazon Certification Manager.
There might be some terminology that's new to you. Please get ahead and expect up terms that are not familiar. I've put in useful links and explanations where I thought appropriate.
What is a domain name and DNS (Domain Proper noun System)?
A domain name is your website address. For example thecodinghamster.com. Only for a calculator, a domain proper name is actually a serial of numbers (an IP accost). An IP address looks like this: 123.321.0.1
It'south not like shooting fish in a barrel for the states to remember a long string of numbers. Then your computer refers to a DNS to interpret a text based website address into an IP address which it can then understand. A DNS is like a directory.
I watched this great video which explains domain proper name, DNS and how this works in under five minutes. Please watch the first five minutes of the video if you're interested:
Where can yous purchase your domain name?
Yous tin can buy a domain proper noun from a domain proper noun registrar. Prices start from a few dollars. Your domain name is unique. Each domain proper noun registrar offers dissimilar levels of services/back up. But you can register your domain with any registrar.
What is a hosting provider?
"An Cyberspace hosting service is a service that runs Internet servers, assuasive organizations and individuals to serve content to the Internet. There are diverse 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 £two.00 — £v.00 per calendar month with various storage options from 0.5GB to 10GB. The prices seemed reasonable but all I wanted to do was host a static website. It had a few images, HTML, CSS and JavaScript files. No dynamic content.
Why AWS?
After some further research, I plant AWS. AWS offers a gratuitous tier option. Essentially, you get lots of free products. Some of them elapse after 12 months and others are free in perpetuity. The only price that you will incur for hosting a static website is the cost of setting up a hosted zone. This cost $0.l per month. So I went with AWS and gear up my account.
The great thing about AWS is the price and information technology's a reliable hosting provider. But one thing to bear in mind is that you'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. Just I establish myself getting lost with clicking on a link to another link so along. I started researching other guides to brand upwards for noesis gaps.
I found this this excellent guide past Victoria Drake.
I followed Victoria Drake's guide alongside the AWS one and managed to muddle through. Only at that place were still a few things that were not explained which I promise to flesh out.
Before nosotros proceed, here is your to do list:
- Do some inquiry on domain registrars and purchase your domain proper noun.
- Sign upward for a complimentary business relationship with AWS.
- Have both the documentation from AWS and Victoria Drake's guide open. Utilise my guide to guide you through the documentation (hope that makes sense!).
Here we go!
AWS: Create a Hosted Zone on Route 53.
Road 53 is where all your DNS requests are handled.
The first thing y'all must fix is your hosted zone with Road 53. This is really easy if you lot bought your domain through AWS. A hosted zone is created automatically once you've purchase it. If you've done this and then only skip to the next section (Prepare your S3 Buckets).
Yet, if y'all were like me and bought your domain name via some other registrar then please do the post-obit.
This next part is how to create a Hosted Zone on Route 53 if you haven't bought your domain proper name from AWS:
- Become to Road 53 in your panel 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 demand your NS (Proper noun Servers) records:
3. Go to your domain proper name registrar and login. Depending on your registrar, you should find a section in your settings called "Nameservers" which you can edit. Yous demand to copy beyond the AWS NS records and change the existing NS records in your domain settings.
Delight note, don't re-create the full stop/menses at the end of the NS record. For instance, is should be "ns-63.awsdns-07.com", not "ns-63.awsdns-07.com."
Information technology will take up to 24 hours to propagate.
Gear up upward your S3 Buckets
In the concurrently you can set up your S3 Buckets. The S3 Bucket is the storage for your files such equally your index.html.
Y'all must configure ii buckets for your website: 1) yourdomainname.com and 2) www.yourdomainname.com.
The first bucket is your main bucket where yous volition upload all your documents, such as your index.html. The second bucket redirects to the first bucket. To ready up your S3 Buckets, please follow the AWS documentation on how to set upwards your S3 bucket ( ii: Create and Configure Buckets and Upload Data).
In add-on 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 Bucket? This is a step by footstep guide and explain all the settings you demand to choose.
- In department 2.1 (part 3): you lot don't have to upload your website files yet. You can add a test index.html in the meantime.
Accept note of your endpoint. Y'all can detect this in your S3 bucket > "Backdrop" tab > "Static Web Hosting" box. Information technology should look something like this: http://yourdomainname.com.s3-website.eu-w-2.amazonaws.com
Add together the Alias/"A" records in Route 53
Finally go back to Route 53 and open your hosted zone to gear up your Alias records. You tin follow the documentation on "Step 3: Add Alias Records for example.com and world wide web.example.com". It is quite straightforward.
Once the NS settings have propagated, your site is live! You'll be able to visit your site at the domain address e.g. yourdomainname.com
Nevertheless, delight note that it won't be secure and you'll see a http:// prefix in the address bar. I'll go to that in the next section.
How to brand your website secure and what is a SSL certificate?
It's very important to make your website secure and to do this you'll need to get an SSL document. SSL stands for Secure Sockets Layer and it uses encryption to securely transfer data between a user and site. Google will also give a rankings boost for websites with HTTPS.
If y'all secure the website with an SSL certificate, you'll see https:// and a padlock symbol in your address bar.
In that location are different types of SSL certificates: Extended Validation Document and a Domain validated certificate. For a personal website or blog, simply a domain validated certificate is required. You lot also won't see the name of your company on the left of the bar similar the example above. You lot only become this if you lot take an Extended Validation Certificate which is more for large companies/enterprises.
How much does information technology cost for an SSL certificate?
I've seen a range of ways of getting an SSL certificate. You can pay a premium for a service that volition do this on your behalf or you can practice it for free with Let's Encrypt. Let's Encrypt is an official Certificate Authority (CA). But yous have to renew your certificate every three months and the procedure is quite complicated.
I didn't want to pay a premium or desire the hassle of renewing every 3 months. Conveniently, AWS can event SSL certificates for a very pocket-sized fee. Y'all pay $0.75 for each document issued and it lasts for 1 year.
If you choose not to go with AWS, make certain y'all do your research and cull a trusted CA!
How do you go an SSL certificate with AWS?
Log into your AWS panel and navigate to the AWS Certificate Manager (ACM).
Make certain yous change the region from the default (Ohio) to N. Virginia. This is non explicit in the guides and only the N. Virginia region can issue certificates. I learned the hard style and wasted a lot of time!
Then click on "Get Started" under "Provision Certificates".
Follow the documentation with AWS ("Requesting a public certificate using the console") and apply Victoria Drake's guide (under "SSL certificate").
In add-on to the guides there are few things that weren't fully explained:
- You'll need to validate your domain ownership past email or direct with DNS. I would advise to always verify ownership by DNS validation.
- One time yous've requested your certificate you'll get something like this (except the status will be pending). Click on the "Export DNS Configuration file":
It's an Excel spreadsheet which will contain something like this:
- You'll need to add together these records to your DNS settings with your registrar. Log in and go to DNS settings. The interface varies with different registrars but yous're looking for your Host records under your DNS settings.
- Click on "Add together Record" > record type is CNAME:
You need to add 2 records: 1) Hostname should be "@" and Target Name should be the Record value from the DNS configuration file.
two) Hostname should be * (asterisk) and Target Name should be the Record value from the DNS configuration file.
If you want more data about the CNAME and record types, I found this helpful article.
It's quite long, just I've pulled out the useful part:
"Note: Hostname refers to the prefix before the domain proper name. To create a Blank record, utilize an @ in the Hostname field. This represents an empty prefix (so the proper noun exactly matches the domain name; for case divapirate.com). The @ hostname is too referred to every bit the the root of the domain. An * (asterisk) in the Hostname is a wildcard, and represents any prefix. For case, creating a record for *.divapirate.com will point <any prefix>.divapirate.com at the IP address provided."
You merely need to wait for the verification. For me, this took about an hour.
How practice y'all add your SSL certificate?
With AWS you can add SSL certificate to your website through setting upwards CloudFront. CloudFront is great for speeding upwards your website. I used the AWS documentation and Victoria Drake's guide (look out for her useful tips).
Please note, when yous create your CloudFront distribution, at that place'due south a drop downward menu to add your SSL document. If you lot accept been issued with an SSL certificate already, it will be pre-populated in the drop downwardly menu.
Your land in your CloudFront dashboard should inverse to "Enabled". This isn't instant and takes a little time.
Nigh there…
Finally, yous need to get your Domain Proper name from the CloudFront distribution. It should be something like this dsfdser83543.cloudfront.internet.
Become dorsum to Route 53 > hosted zone > alter both Allonym records (Alias Target) to the CloudFront Domain Name.
Voila! You lot have hosted your start secure static website with AWS.
Hope you found this useful. If you have any questions or only want to say hello, detect me on Twitter @PhoebeVF
A big thank you to Victoria Drake for her guide. For a more avant-garde tutorial on this topic, delight check out Victoria'south article: "Hosting your static site with AWS S3, Route 53, and CloudFront".
Illustrations courtesy of https://undraw.co
Learn to code for free. freeCodeCamp'due south open source curriculum has helped more than 40,000 people become jobs as developers. Go started
Source: https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/
Post a Comment for "Upload a Simple Web Page With Your Personal Information to the Ec2 Instance"