Introduction

AWS, a prominent provider of cloud services, provides unrivaled scalability, flexibility, performance, and security. As more websites migrate to static formats based purely on HTML, CSS, and JavaScript, mastering these basic programming languages becomes increasingly crucial for real-world applications.

Even though there are many cloud service providers, I chose AWS because

When added to their already affordable prices, their "Free Tier" is a major advantage. The scale, adaptability, performance, and security of their services are unsurpassed. When you apply it to real-world scenarios, it is one of the simplest concepts to understand.

Using the hosting of a static website on Amazon Simple Storage Service (S3) as a real-world example, this post will teach you more about Amazon Web Services (AWS). You can have a static website hosted on S3 in just five quick and straightforward steps.

The following are the five steps involved in hosting a static website on S3:

1. Create an S3 bucket: Go to the AWS website and sign in to your AWS account using your email and password. Once you are signed in to the AWS Management Console, navigate to the S3 service. You can do this by typing "S3" in the search bar at the top of the console or by finding "S3" under the "Storage" category in the list of all services. Once you are in the S3 console, click on the "Create bucket" button. This will bring up a dialog box where you can configure your new bucket. In the "Create bucket" dialog box, you need to choose a globally unique name for your bucket. The name should not contain any capital letters, underscores, or special characters. You also need to choose a region for your bucket, which will determine the physical location of your bucket. In the next section of the "Create bucket" dialog box, you can configure options for your bucket, such as versioning, logging, and encryption. For a basic static website, you can leave these options at their default settings. In the "Set permissions" section of the "Create bucket" dialog box, you can choose how your bucket is accessed. For a basic static website, you can leave the default settings that allow public access to your bucket content. Finally, review your bucket settings and click the "Create bucket" button. Your new S3 bucket is now created and you can start uploading your static website content to it.

2. Enable static website hosting: In the S3 console, click on the name of the bucket that you want to enable static website hosting. Once you are in your S3 bucket, click on the "Properties" tab at the top of the console. Under the "Properties" tab, scroll down until you see the "Static website hosting" section. Click on this section to open the static website hosting settings. In the "Static website hosting" section, choose the "Use this bucket to host a website" option.

   In the "Index document" field, enter the name of the index document for your website. This is the file that will be served as the default page when someone visits your website. For example, if your index document is named "index.html," enter "index.html" in this field. In the "Error document" field, you can enter the name of a custom error document to display if someone tries to access a page on your website that does not exist. This is an optional setting. Once you have configured the static website hosting settings for your bucket, click the "Save changes" button to apply the changes.

3. Upload your static website content: In the S3 console, click on the name of the bucket where you want to upload your website content. Once you are in your bucket, click on the "Upload" button at the top of the console. In the "Upload" dialog box, click on the "Add files" button to select the files you want to upload. You can select multiple files at once by holding down the Ctrl key (Windows) or the Command key (Mac) while clicking on the files. After selecting the files you want to upload, choose the appropriate access permissions for each file. By default, uploaded files will be private, which means they can only be accessed by the owner of the bucket. For a static website, you will want to make sure that all files are publicly readable so that anyone can access them. To do this, select each file and click on the "Permissions" dropdown menu, then choose "Make public". Once you have selected your files and set the access permissions, click on the "Upload" button to start the upload process. The files will be uploaded to your bucket and will be available for viewing once the upload is complete. After the upload is complete, you can verify that your website content has been successfully uploaded to your bucket. Navigate to the endpoint URL provided in the "Static website hosting" section of your bucket properties to view your website.

4. Set permissions: In the S3 console, click on the name of the bucket where you want to set permissions for your files. In your bucket, select the file(s) that you want to set permissions for by clicking on the checkbox next to each file.

   Once you have selected the file(s), click on the "Permissions" dropdown menu at the top of the console. In the "Permissions" dropdown menu, choose the appropriate permission settings for your file(s). You can choose from the following options: This will make the selected file(s) public, meaning that anyone can access them without needing any special permissions. Note that making a file public also makes it accessible to search engines and other web crawlers.

   This option is similar to "Make Public," but it only grants read access to the selected file(s), meaning that users can view the file(s) but cannot modify them.

   This option grants both read and write access to the selected file(s), meaning that anyone can view and modify the file(s). This option allows you to set custom permissions for the selected file(s) by creating a new access policy. You can specify which users or groups have access to the file(s), and what level of access they have (read-only or read/write). After choosing your permission settings, click on the "Save" button to apply the changes to the selected file(s).

5. Test your website: In the S3 console, click on the name of the bucket where you have enabled static website hosting. In the "Static website hosting" section, you will find an endpoint URL that you can use to access your website. Copy this URL to your clipboard. Open a web browser of your choice (e.g., Google Chrome, Mozilla Firefox, Safari, etc.) and paste the endpoint URL into the address bar.

   Once you have navigated to your endpoint URL, you should be able to see your website content displayed in the web browser. Verify that all of your website's pages and resources (e.g., images, stylesheets, scripts) are loading properly and that there are no errors or broken links. Once you have verified that your website is accessible, you should test its functionality to ensure that it is working as expected. This may include filling out and submitting forms, clicking on links, testing interactive features, etc. Finally, you should test your website's performance to ensure that it is loading quickly and efficiently. You can use tools like Google PageSpeed Insights or Pingdom to test your website's page load time and identify any areas where you can optimize your website's performance.

Conclusion

I sincerely hope that this post has enabled you to sort through the data and take useful action. In my honest opinion, doing this is the best approach to learning AWS. You were able to learn how to host your static website using AWS S3 in only five easy-to-follow steps.