Host Your Website on AWS for Free: S3 Bucket and CloudFront
Hello, tech enthusiasts!!! I want to share a part of my experience to hosting website on AWS which I came to know during cloud-resume-challenge. So, in this step-by-step guide, we’ll explore how to host your website for free on AWS using S3 buckets and CloudFront. Whether you’re a beginner or looking for a cost-effective hosting solution, this tutorial is for you. Let’s dive in!
Starting from creating an AWS account.
The journey begins by creating an AWS account. Head over to the AWS website and follow the sign-up process. Provide accurate information and ensure a secure account setup. Once your account is created, undergo the identity verification process. This step adds an extra layer of security to your AWS account and also make sure to enable 2FA for security purposes.
Creating a S3 Bucket
After logging into the AWS Management Console, locate the S3 service. It’s the cornerstone for storing and retrieving your website’s data.
Setting Up S3 Bucket
Click “Create Bucket” and follow the setup steps. Choose a unique name for your bucket, and configure the necessary settings. This is where your website’s files will be stored. Ignore the ‘harshitportfolio’ bucket, it’s not related to this blog.
Hit the Create bucket and give your S3 bucket a unique name and rest go with the default and recommend settings.
Uploading Website Content to S3
Now that your S3 bucket is ready, upload your website files. Organize them into folders based on your website’s structure.
Configuring S3 Bucket for Static Website Hosting
In the properties of your S3 bucket, enable static website hosting. Define the index and error documents, setting the stage for your website’s functionality.
Setting Up CloudFront Distribution
Navigate to the CloudFront service in the AWS Console. CloudFront is a content delivery network that will distribute your website globally.
Click “Create Distribution” and configure settings, origins, and behaviors. This ensures CloudFront knows where to fetch your website’s content.
Choose the origin domain of the same bucket you just created.
Choose the origin access as OAC
Set-up control setting as it help us to generate bucket policy which helps to connect CF to bucket.
The decision to disable AWS WAF while hosting your website on CloudFront for free depends on your specific needs, risk tolerance, and the nature of your website. If security is a top priority, keeping WAF enabled is generally recommended. However, for simple and low-risk websites, you might choose to disable it to minimize costs. Read the documentation carefully.
Save the changes.
Connecting CloudFront to S3 Bucket
Ensure proper configuration to connect CloudFront to your S3 bucket. This step ensures that CloudFront fetches your website’s data from S3.
S3 bucket policy generated, just copy the policy and paste the policy under bucket policy in S3 bucket as below.
Save changes and wait for deployment.
After successfully deployment, visit the Distribution domain name in new tab.
We might get this error, it is just because we maybe upload our files in folder and we did not configured the path properly. We simply can go to the exact path of index page in domain to visit the website properly, like YOUR-DISTRIBUTION-DOMAIN-NAME/folder/index.html.
Just like this…
Congratulations! You’ve successfully hosted your website on AWS for free using S3 and CloudFront.
Please note that the distribution name shown in the above images will not be functional, as I have disabled all associated services.
If you enjoy my posts and find them helpful, consider buying me a coffee! Your support helps me earn relevant certifications and continue sharing valuable insights. Buy Me a Coffee
Conclusion
There’s a vast world to explore in AWS beyond what we’ve covered here. Personally, I haven’t currently hosted my portfolio on AWS due to potential billing costs. Initially, I only needed CloudFront and an S3 bucket, but unintentionally enabled more services. However, through experiences like the cloud-resume-challenge, I’ve expanded my AWS skill set. I’ve learned to leverage Lambda, DynamoDB, and implement CI/CD with GitHub Actions, allow for direct website updates from GitHub and in AWS we can also use our custom domain. Stay tuned for upcoming blogs where I’ll dive deeper into these aspects and share my insights in more detail.
Connect to me, if you have any query, want to share or suggest me anything, here’s my Portfolio or dm me directly on LinkedIn.
Stay tuned and follow me for more chapters of my odyssey, my projects, cybersec stories, and write-ups and also thank you for being part of my story! 🚀
