GirishBhatia AWS S3 Static Website Hosting and CICD Pipeline using GitHub 2023 AWS Communtity Day Midwest 2023

1. <@your social handle>

2. AWS S3 static web site hosting
&
CICD Pipeline using GitHub
Girish Bhatia | 2023
AWS cloud technology enthusiast
Technology Program Manager
http://girishbhatia.tech

3. About Girish Bhatia
IT Experience:
§ 20+ years in IT
§ Tech Program Delivery – Tech Mod/Cloud transformation
§ Software Development using Java, .NET, Oracle, APIs, BI tools in telecom,
public/state system, banking/finance domain.
§ Onshore/offshore software delivery
§ Tech Program/Project Management
§ Journey to Cloud, Tech Modernization
§ On Prim to Cloud Migration
§ Cloud/API integration B2B
§ Data center planning/Mainframe Relocation
Qualifications:
§ Master of Science in Computer Information Systems
§ AWS Certified Developer Associate | Amazon Web Services
§ AWS Certified Solution Architect Associate ǀ Amazon Web Services
§ AWS Certified Cloud Practitioner ǀ Amazon Web Services
§ AWS badges: Serverless, Solution Architecture
§ Microsoft Certified: Azure Fundamentals ǀ Microsoft
§ Microsoft Certified Professional: Solution Architecture ǀ Microsoft
§ Microsoft Certified .NET Solutions Developer ǀ Microsoft
§ Project Management Professional (PMP) | Project Management Institute
§ Certified Scrum Master | Scrum Alliance)

4. Girish’s Tech Journey

5. AWS S3 Static Website Hosting & CICD Pipeline using GitHub
• AWS S3 Static Website Hosting
• CICD Pipeline using GitHub
• Update S3 Website using CICD Pipeline

6. AWS S3 Static Website Hosting
• What is S3?
• Simple Storage Service
• Object Storage
• 99.99% availability
• Setup Budget
• Familiarize yourself with cost explorer

7. S3 Bucket AWS Budget AWS Cost Explorer

8. Steps for S3 Web Site Hosting
o Create S3 bucket for static contents
o Enable static web site hosting
o Upload site contents
o Organize html, CSS, image and other contents files
o Identify index and error pages.

9. See it in action!
o Create S3 bucket for static contents
o Enable static web site hosting
o Upload site contents
o Organize html, CSS, image and other contents files
o Identify index and error pages.

17. http://chicago-aws-meetup.s3-website.us-east-2.amazonaws.com

18. Got the website endpoint, what’s next?
o Buy a Domain (use Route 53 or similar service )
o Configure S3 bucket end point for your domain. Configure CNAME entry
o Public Hosted Zones are meant to be used for people requesting your website through the Internet. Finally, NS
records must be updated on the 3rd party Registrar.
o Optional: Use ACM to generate SSL/TLS Certificate
o Install certificate to enable HTTPS
o Use CloudFront (you cannot use https/certificate directly with S3 static web site)

19. AWS Services used thus far:
o AWS Budget
o AWS Cost Explorer
o AWS S3
o AWS Route 53
o AWS ACM
o AWS CloudFront

20. Upload site contents - Multiple Way to upload contents
o Use AWS Console to load the contents
o Use IDE/AWS tools like VS Code. ( this is my preferred way )
o Use CLI

22. VS Code + AWS Toolkit Extension
o VS Code View
o Updating the content via VS Code
o Refresh the site

23. VS Code + AWS Toolkit Extension
o Show VS Code View

24. Backup your website code in your local folder
o CLI Command to backup/fetch contents to your local folder
o aws s3 cp s3://chicago-aws-meetup/ ./ --recursive

25. CICD Pipeline

26. CICD Pipeline using GitHub
o VS Code + GitHub
o AWS Code Commit
o AWS Code Build
o AWS Code Deploy
o AWS Code Pipeline
o AWS S3

27. Current State: Basic Architecture ( on prim )

28. Current State: Improved Architecture ( on prim )

29. Future State: AWS Cloud enabled Architecture

30. See it in action!
o Create Code Pipeline
o Commit change
o Push to GitHub
o Code Pipeline gets triggered and update S3 Bucket
o Updated website is published!

31. Create Code Pipeline

32. Create Code Pipeline

33. Add source Repo

34. Connect to GitHub

35. Code pipeline deploy stage

36. Code pipeline Review before creation

37. Code pipeline Created!

38. Code pipeline Manual Approval Action

39. S3 Bucket

40. GitHub

41. AWS Services used:
o AWS Budget
o AWS Cost Explorer
o AWS S3
o AWS Route 53
o AWS ACM
o AWS CloudFront
o AWS Code Deploy
o AWS Code Pipeline
o VS Code
o GitHub

42. Thank you!
LinkedIn: https://www.linkedin.com/in/girishbhatia/
Website: http://girishbhatia.tech
Twitter: https://twitter.com/BhatiaGirish/
Code/slide available: GitHub
http://girishbhatia.tech