[Practice 1] How to Host a Static Website on AWS — Quick Start for Beginner

Allie Hsu
Coder Life
Published in
5 min readApr 13, 2020

--

Co-author: Eileen Chu

The website I host on AWS (username:alpey, password: alpey123)

Background

For my Master’s graduate project, I created an Education-oriented website for parents and their kids who live in Melbourne, aim to educate them about water safety. Therefore, I learned how to host a website on AWS EC2, following a lot of online materials/ tutorials. And I would like to share my experience with those who want to host a website on AWS EC2.

To host your own website, follow the steps below:

  • Launch an EC2 Instance
  • SSH to EC2 Instance
  • Install a Web Server
  • Check whether the website works
  • Set DNS on Freenom for free

Launch an EC2 Instance

EC2 enables on-demand, scalable computing capacity in the AWS cloud. EC2 instances eliminate the up-front investment for hardware, and there is no need to maintain any rented hardware. That is, it allows you to build and run applications faster. You are able to use EC2 in AWS to launch as many virtual servers as you need.

If you ain’t had an AWS account yet, create one first!

Search for ‘EC2’ after you sign in to the AWS console and make sure you select the AWS region you want to launch the instance in. Navigate to the ‘EC2 Dashboard’ and click ‘Launch Instance’.

1. Choose AMIs
You will choose an OS (Operating System) as your VM (Virtual Machine) in this step. Ensure that you choose the Free Tier Eligible option which will allow a user to use EC2 service for 750 hrs per month.

2. Choose the Right EC2 Instance Type
This step is to choose how powerful your VM will be — such as the number of CPUs, the type of storage, the amount of memory, and networking capacity.

3. Configure Instance
In this step, you can just accept all the default options unless you need to set something else.

4. Add Storage
This step is to customize your storage. You can set the drive’s configuration as the default or add the additional hard drive to your VM.

5. Add Tags
Adding tags is to help you administer and manage your AWS resources if you need it.

6. Configure Security Group
In this step, you will decide whether to allow traffic to reach your VM from the outside. You will evaluate all of the rules from all of the security groups associated with the instance.

Here you need to allow 2 types of traffic — SSH (Secure Shell using port 22) and HTTP (HyperText Transfer Protocol using port 80). SSH allows you to log in to the VM, while HTTP allows you to view your webpage through the browser. To be more secure, you can let your website run over HTTPS (Hypertext Transfer Protocol Secure using port 443) in order to transmit data within a connection encrypted by TLS (Transport Layer Security).

Select ‘Create a new security group’ and give it a name. Keep the SSH rule and add more rules (e.g. HTTP, HTTPS) you need.

7. Review the Instance Details
Here you will be asked to select, create, or upload a key pair, which is needed to SSH into your instance securely.

8. Allocate Elastic IP
Elastic IP addresses are used by AWS.

Public IP addresses are dynamic which means the IP address changes frequently. If you stop/start your instance, you will be reassigned to a new public IP.

Navigate to NETWORK & SECURITY and click Elastic IPs to Allocate New Address. After applied, the Elastic IP gets allocated to your account, and stay the same. Now your IP address is static.

SSH to EC2 Instance

Click ‘Instances’ on the sidebar, you will see the new instance on your EC2 Dashboard, and not long later Instance State will become ‘running’. Check the instance information and copy the IPv4 Public IP address of your instance.

Then, execute the following steps in Terminal (if you are using Windows, run the commands in Git Bash):

1. Change the permissions on your key-pair.pem file

Firstly, download your key-pair.pem file to your preferred path. Then change the permission with the following command.

chmod 400 <path_to_KeyPair_file>

2. SSH into your new EC2 instance

ssh -i <path_to_KeyPair_file> ec2-user@<public_IP_from_dashboard>

Click enter and then type ‘yes’ to continue.

Now your Terminal is interacting directly with your EC2 instance (Aka your VM) — rather than your physical machine.

3. Switch to the super/root user (elevate your privileges)

sudo su

4. Update all packages on the EC2 Instance

yum update -y

Install a Web Server

1. Install an Apache Server

yum install httpd -y

2. Start the Webserver

service httpd start

3. Turn on a service for the default run levels (2,3,4,5)

chkconfig httpd on

Check whether the website works

The Apache Web Server will display the index.html file found in /var/www/html root path of your website by default.

cd /var/www/html
nano index.html

Input the content you wanna display on your website.

<html><body>My first EC2 instance</body></html>

Enter your Instance IP address (IPv4 Public IP address) on the browser to check if you can see the expected content. It should show ‘My first EC2 instance’ text on a blank page.

Set DNS on Freenom for free

DNS stands for Domain Name System, which is simply a hierarchy of Name Servers having the intent to translate hostnames into IP addresses on a global scale. For example, it converts human-readable domain names like ‘medium.com/@allie.chiayu.hsu’ into a computer-readable Internet Protocol (IP) address such as ‘104.16.122.127’.

When a user searches a website by using the domain name on the browser, the DNS will identify the matched IP address. Then the browser will display the content.

Input the preferred name and check its availability after you sign in.

Name the website as new-dns-01

Select a free one below and click ‘Checkout’.

Choose .ml as the domain

Before checking out your order, forward the domain to your IP address (IPv4 from your EC2 instance) and select the period (here I chose 12 months for free).

Connect DNS new-dns-01.ml to IP address 53.241.27.168

At this point, you can search your website by entering new-dns-01.ml on the browser.

Support my writing by becoming a Medium member today and getting access to an unlimited number of articles.

--

--

Allie Hsu
Coder Life

A tech enthusiast who is keen to develop new skills