The latest articles on DEV Community by OLUWATOMISIN OWOEYE (@tomisin). https://dev.to/tomisin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1282454%2F3b3aa8be-02c2-42cf-be68-2b50d4ca84d5.png https://dev.to/tomisin en OLUWATOMISIN OWOEYE Fri, 16 Feb 2024 12:40:55 +0000 https://dev.to/tomisin/hosting-a-static-website-using-aws-s3-bucket-1687 https://dev.to/tomisin/hosting-a-static-website-using-aws-s3-bucket-1687 <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffr798u6ulcy78fvtc1xl.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffr798u6ulcy78fvtc1xl.png" alt="Image description" width="800" height="293"></a></p> <p>There are two different types of website namely : Static website and Dynamic website.For the purpose of this article the main focus will be on static website, which is a type of website that is made up of fixed files, such as HTML,CSS, JavaScript, files and images. </p> <p>Introduction</p> <h2> WHY USE AN S3 BUCKET TO HOST A STATIC WEBSITE? </h2> <ol> <li><p>Highly reliable: S3 provides durability and availability for your data.It store multiple copies of your files across different servers and facilities, reducing the risk of data loss.It also offers automatic backups built in redundancy.</p></li> <li><p>Scalable: S3 is highly scalable which means it can handle large amounts of data and traffic without any issues. Either the website has a few visitors or millions.</p></li> <li><p>Cost effective: S3 offers a pay as you go pricing model, which means you only pay for the storage and data transfer you use. It eliminates the need for upfront hardware cost and allows you to scale your storage based on your needs.</p></li> </ol> <p>Step by step illustration on hosting a static website using S3.</p> <p>Create an AWS account so has to have access to S3 service and other AWS service at large.<br> <a href="https://portal.aws.amazon.com">https://portal.aws.amazon.com</a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1af3ywopo6k3tp6ndufc.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1af3ywopo6k3tp6ndufc.png" alt="Image description" width="800" height="431"></a></p> <p>Click "create bucket"</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbuc69ajilpc1ml6s3sjb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbuc69ajilpc1ml6s3sjb.png" alt="Image description" width="800" height="428"></a></p> <p>Use a unique name for bucket, it serves as a globally unique identifier for your bucket. Also select the appropriate region you want the bucket to be hosted.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdb9cq6f10gjzfxy5kc0m.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdb9cq6f10gjzfxy5kc0m.png" alt="Image description" width="800" height="434"></a></p> <p>Scroll down, click on Access control lists (ACLs) and object writer enabled.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87pshp6jflbxiayrpsop.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87pshp6jflbxiayrpsop.png" alt="Image description" width="800" height="428"></a></p> <p>Deselect "Block all public access" </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsu9f8cx2sj72muoer1et.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsu9f8cx2sj72muoer1et.png" alt="Image description" width="800" height="429"></a></p> <p>All other option should be kept on default and click "create bucket" </p> <p>Click on the already created bucket and click upload.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx1z8bnupq9okd9aasjat.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx1z8bnupq9okd9aasjat.png" alt="Image description" width="800" height="366"></a></p> <p>Following, Get your existing files to add the css, javascript files and css and upload in your bucket.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmnbaxr847749yvyqessj.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmnbaxr847749yvyqessj.png" alt="Image description" width="800" height="82"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqhll2d2cpmpvrscx4jb7.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqhll2d2cpmpvrscx4jb7.png" alt="Image description" width="800" height="428"></a></p> <p>Click on properties tab, scroll down to static hosting and select "Enable" to activate static website hosting. Type (index.html). </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7gwfo3dcnmxxhvds2aw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7gwfo3dcnmxxhvds2aw.png" alt="Image description" width="800" height="414"></a></p> <p>In conclusion, Click on objects tab and select all the uploaded website files, then click actions, scroll down and click "Make public using ACL"</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6klbfkwsgkk7qzbp363.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6klbfkwsgkk7qzbp363.png" alt="Image description" width="800" height="432"></a></p> <p>Finally, you have successfully hosted your static website on Amazon S3.To view the result click on properties and scroll down, copy the endpoint and paste on your browser to access your website.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F149bt3tf8mcbig2zbej3.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F149bt3tf8mcbig2zbej3.png" alt="Image description" width="800" height="431"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq6qrrb1idjimymtqcgn.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq6qrrb1idjimymtqcgn.png" alt="Image description" width="800" height="323"></a></p> <h2> As we draw curtains on this discussion, i hope you have learnt how to host a static website using Amazon S3. </h2> aws s3