In this blog, I will be writing a step by step guide on how I created a basic / simple static website hosted on AWS:
The first thing we needed to do is to register a domain. This can be done on Route 53. Route 53 is a scalable and highly available domain name system (DNS) web service offered by Amazon Web Services (AWS). It provides domain registration, DNS routing, and health checking capabilities, allowing users to manage and route internet traffic to their applications or resources.
From this service, I was able to register a domain with the name "RiyazsProject.net"
side note
( While most organisations will use .com as it is the most popular, I opted to go for .net, for pricing reasons ఠ_ఠ … )
One small thing to mention, AWS kindly offers to allow auto renewal on a yearly basis as well as informing you that this option is on closer to the renewal period. This is great for large organisations who plan to have their webpage up and running throughout the years. However in this case, I will not be choosing this option.
After some confirmation and verification (and some patience..), we finally have our official domain name registered to "riyazproject.net".
Now that we have our domain, the next step is to create a bucket on S3. Amazon S3 (Simple Storage Service) is a cloud-based storage service provided by Amazon Web Services (AWS). It offers highly scalable, durable, and secure object storage, allowing individuals and businesses to store and retrieve vast amounts of data over the internet. While S3 is widely used for its various purposes such as content storage, data archival and data lakes, in this case we will be using it for hosting a static webpage.
There are a few key things we need to note when creating our bucket. The first being the region the bucket is created in. Due to my location, I will be creating this bucket in EU (London) eu-west-2 in order to reduce latency as much as possible.
The second important thing to mention is allowing public access to my bucket.
Allowing public access as well as checking the box below allows for the contents of my bucket to be accessible to the public. If my bucket was private, it would not allow anyone to access my webpage (which defeats the whole purpose to why we're here...)
Once our bucket has been created, I am now able to add the contents needed in order for my webpage to be accessible. I will first start by adding a basic html file (which I was kindly gifted), into my S3 bucket.
Now that I have the contents within my bucket, I now need to enable the bucket for static website hosting as well as having the right permissions for users to access it. This can be done by going into the properties of the bucket and editing "static website hosting"
The bucket is now successfully able to host a static website, however we aren't done just yet. We still need to configure the permissions settings before we send it off. This can be configured on the permissions tab of the bucket.
We need to attach a bucket policy that will allow users to only READ the contents within the bucket.
The permission in the image above consists of a JSON file that represents an IAM policy that grants public read access to all objects within the S3 bucket named "riyazproject.net". This means that any user or entity, including anonymous users, can retrieve (read) objects from this specified S3 bucket.
Our website is officially hosted on Amazon S3! But we have one small detail left..
Unfortunately, our website has a URL that is provided by AWS, not our custom URL. In order to tackle this, we need to redirect riyazproject.net to this S3 bucket.
To do this, I will return to Route 53 and add an additional record. This ensures the bucket will be connected to the Route 53 domain name.
We start off by choosing an A record type. Next, I opt to use an Alias, this allows me to route traffic to the S3 endpoint. I select Simple routing as it is directed only one way and now the record has been created.
Once the record has been set, our webpage officially has its URL set to the domain!
Thank you very much for reading my blog post. This small project was to showcase my skills and knowledge of AWS. I appreciate you taking the time to read my work. If you used this to create and host your own static webpage, I hope it helped!
Top comments (0)