Hosting a static website on AWS and implementing CI/CD

A static website is a website that does not require any server-side processing. This means that the website's content is stored in files and served directly to the user without any need for a web server to process the files. Static website hosting: S3 provides a simple and easy way to host static websites. You can simply upload your website's files to an S3 bucket and configure S3 to serve your website.

For this project, I want to show the benefits of using the following services: Github, AWS Code Pipeline, AWS S3, and Cloudfront to speed the process to set up a website and allow different developers to provide modification to the features.

Github: is a popular code hosting platform that offers a number of benefits for developers, including version control, collaboration, documentation and security.

Create a new GitHub repo for this project.

AWs S3 offers a number of features that make it ideal for hosting static websites, such as: is a fully managed object storage service that provides a durable and scalable storage solution for static websites. Scalability: S3 is a highly scalable service that can easily handle large volumes of traffic.
Durability: S3 is a durable service that provides 99.9999999999% durability for objects stored in S3.

Create a Bucket add a name and keep all the other default options.

Once the Bucket is created, go to the properties tab of that bucket and below click where the option is to edit Static website hosting. Enable it and add the index file name containing the HTML code.

Since the bucket can be access from the public, it does not mean your object is also accessible. At the object level, it should also be accessible else it will throw an error in S3 URL. So here we will define the policies at the object level as shown below.

Please, on the Resource field, add your Bucket name.

Now upload your files to your bucket as shown and after uploading your files, click on the S3 URL.

AWS CloudFront is a content delivery network (CDN) that can be used to improve the performance and security of static websites. CloudFront caches your website's content in edge locations around the world, which can significantly improve the loading time of your website for users in different regions. CloudFront also provides a number of security features, such as:

SSL/TLS encryption: CloudFront can encrypt all traffic between users and your website, which helps to protect user data.
DDoS protection: CloudFront can help to protect your website from distributed denial-of-service (DDoS) attacks.

By using AWS S3 and CloudFront together, you can easily create a highly scalable, durable, and secure static website. Below are some of the benefits of using AWS S3 and CloudFront to host a static website:

Scalability: S3 and CloudFront are both highly scalable services, so you can easily add more capacity as your website grows.

Durability: S3 and CloudFront are both highly durable services, so your website will be up and running even if there is an outage at your web host.

Security: S3 and CloudFront both offer a number of security features, so you can be confident that your website is safe from attack.

Cost-effectiveness: S3 and CloudFront are both very cost-effective services, so you can save money on hosting your website.
If you are looking for a reliable and affordable way to host a static website, then AWS S3 and CloudFront are a great option.

Now, Go the CloudFront and create a distribution and for the origin, it will automatically pop out the S3 URL when you drop down. Unmark the Block all public access and check the Acknowledge box.

CloudFront uses cache content it might delay in displaying your changed content. Therefore, I will be disabling caching as shown above.

After this is created, you will get the Distribution domain name. Open your browser and check if your website is up and running.

AWS CodePipeline is a continuous delivery service that helps you automate your release pipelines for fast and reliable application and infrastructure updates. It provides a visual pipeline editor that makes it easy to model your software release process.

Now, I will create a pipeline to automate release process of the code or any developer can add new features.

In the Source section, you can choose your repository. For me, I have uploaded it on GitHub so I will be linking my Github repo here.

Click on Next, Review the configs and click to create your pipeline. You make some changes to your source code and push it to repo. CodePipeline will automatically detect it and trigger the pipeline.

After creating the pipeline, I added some file to the GitHub repository and went to check out the new release on the pipeline where successfully added the new updates to the pipeline.