Deploy secure static website containing an online Resume using code pipeline on AWS and Github
🚀 Overview:
Building a resume on a secure static website and deploying it via a code pipeline on AWS involves creating a personal website to showcase your resume and portfolio securely. This project utilizes static website hosting on AWS S3, along with AWS CodePipeline for automating the deployment process. By leveraging AWS services, you can ensure the reliability, scalability, and security of your website while streamlining the deployment workflow.
🔧 Problem Statement
The goal of this project is to address the challenge of creating and maintaining a secure and professional-looking website to showcase their resume and portfolio. Then, manual deployment processes to avoid time-consuming and error-prone, leading to delays and inconsistencies in website updates. We will be creating a secure static website to host your resume and portfolio, and automating the deployment process using AWS services. By building a resume website on AWS S3 and deploying it via a code pipeline, you can ensure that your website is always up-to-date, secure, and accessible to potential employers or clients. This project will empower you to establish a professional online presence with minimal effort, allowing you to focus on advancing your career or growing your business.
💽 Techonology Stack
We will be using:
Repository: Github
S3: AWS S3
Route 53: AWS Route 53
Code Pipeline: AWS CodePipeline
CloudFront: AWS CloudFront
Certificate manager: AWS ACM
📌 Architecture Diagram
🌟 Project Requirements
Before you get started, make sure you have the following prerequisites in place:
AWS IAM credentials configured in your text editor. In this case we will use VSCODE.
Git installed on your local machine and Github account set up Github
Git for cloning the repository.
Files for the static web site are already dowloaded from internet to our local computer. All files were also modified to our use case.
📋 Table of Contents
Step 1: Create S3 Github repository
Step 2: Clone the repository to the local machine
Step 3: Download files in the repo and push code in github
Step 4: Create S3 bucket and configure to web static
Step 5: Download files and folder in the S3 bucket
Step 6: Register a domain name with Route 53
Step 7: Create record with S3 bucket as endpoint
Step 8: Set up SSl/Https with AWS Certificate Manager
Step 9: Create a cloudfront Distribution
Step 10: Configuration Pipeline
Step 11: Deployment
Step 12: Web page
💼 Instructions of Configuration and
Deployment
Step 1: Github repository creation
Here's a step-by-step guide on how to create a GitHub repository:
Sign in to GitHub:
Open your web browser and go to the GitHub website Github. Sign in to your GitHub account. If you don't have an account, you can sign up for free.
Navigate to Your Profile:
Once logged in, you'll be directed to your GitHub dashboard. Click on your profile icon in the top-right corner of the page to access your profile.
Create a New Repository:
On your profile page, click on the "Repositories" tab. Then click on the green "New" button located on the right side of the page.
Fill in Repository Details:
You'll be taken to the "Create a new repository" page. Enter a name for your repository in the "Repository name" field. Choose a descriptive name that reflects the purpose of your project. Optionally, you can add a description for your repository in the "Description" field. Choose the visibility of your repository (public or private) by selecting the appropriate radio button. If you want to initialize your repository with a README file, check the box next to "Initialize this repository with a README". You can also add a .gitignore file and choose a license for your project from the respective dropdown menus. Create the Repository: In our case the repository will be named " Resume", it will be public and no READMe.
Once you've filled in the necessary details, click on the green "Create repository" button at the bottom of the page. Congratulations!
Your GitHub repository has been successfully created. You'll be redirected to the repository page where you can start adding files, making commits, and collaborating with others. You will get a picture like bellow:
Step 2: Github repository clone to the local machine
If you want to work on your repository locally, you can clone it to your computer using Git. Click on the green "Code" button located on the right side of the page. Copy the URL provided (HTTPS or SSH) and use it to clone the repository using the Git command line or a Git client.Clone the repository in your local machine using the command "git clone"
git clone https://github.com/Joebaho/RESUME.git
You will get image like the bellow
Step 3: Download files and push code to Github
We have the index.html file, javascript and css folders ready in our local machine. We just need to copy and paste them in the local repository. After this process we will be pushing them to remote Github repository created before. These will follow a set of commands.
To check status of the repository and see which branch and what has been made in the repository use
git status
To add all new files of folders or any change made in the repo use
git add .
To commit change or informe your collaborator on what has been made on the repo you use command
git commit -M " Message to commit"
To create a branch to work on use command bellow. In this case we will use branch Master.
git branch -M master
For you first push you mus speecific origin in order to synchronise with the remote repo with the command
git remote add origin https://github.com/Joebaho/RESUME.git
Then push all files in Github with command
git push -u origin master
You will have all files and folders copy in Github repository. Check the image
Step 4: S3 Bucket creation
Here we create the S3 bucket and will configure it as hosting static web site
Sign in to the AWS Management Console:
Open your web browser and go to the AWS Management Console aws/console. Sign in to your AWS account.
Navigate to S3:
In the AWS Management Console, search for "S3" or navigate to the "Storage" section. Click on "S3" to open the Amazon S3 console.
Create a New Bucket:
In the S3 console, click on the "Create bucket" button. Enter a unique name for your bucket in the "Bucket name" field. This name must be globally unique across all existing S3 bucket names. Choose the AWS region where you want to create your bucket. Select the region that is closest to your target audience for improved performance. Click on the "Create" button to create the bucket. Because we creating the bucket for hosting the static web site the bucket name must match with the mane of the domain. So, here our bucket name will be "www.joebahoucloud.com" See image bellow
Configure Bucket Properties:
Once the bucket is created, select the bucket from the list to open its properties. Click on the "Properties" tab and then click on "Static website hosting". Enable Static Website Hosting: In the "Static website hosting" panel, select the option to "Use this bucket to host a website". Enter the name of the index document (e.g., index.html) and optionally, the name of the error document. Click on the "Save" button to save the changes.
Set Bucket Policy:
Next, you need to add a bucket policy to make the contents of your bucket publicly accessible. Click on the "Permissions" tab and then click on "Bucket Policy". Paste the following bucket policy into the bucket policy editor, replacing arn:aws:s3:::www.joebahocloud.com with the name of your bucket:
json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::arn:aws:s3:::www.joebahocloud.com/*"
}
]
}
Click on the "Save" button to save the bucket policy.
Step 5: Downloading files in the S3 Bucket
Upload Website Files:
Go back to the "Overview" tab of your bucket. Click on the "Upload" button to upload your website files to the bucket. Make sure to include your index.html and any other assets (e.g., CSS, JavaScript) needed for your website. Once the files are uploaded, they will be publicly accessible via the bucket's website endpoint. You will have something like image bellow
Access Your Website:
To access your website, find the "Endpoint" URL under the "Static website hosting" panel in the bucket properties. Open a web browser and navigate to the endpoint URL to view your static website.
Step 6: Domain Name Registration
Go back in to the AWS Management Console and navigate to Route 53:
In the AWS Management Console, search for "Route 53" or navigate to the "Networking & Content Delivery" section. Click on "Route 53" to open the Route 53 console.
Register a New Domain:
In the Route 53 console, click on "Registered domains" in the left sidebar. Click on the "Register domain" button.
Search for a Domain Name:
Enter the domain name you want to register in the search box. In this case we will use "joebahocloud.com" Click on the "Check" button to see if the domain name is available. If the domain name is available, you'll see a message indicating that it's available for registration.
Add the Domain to Your Cart:
If the domain name is available, click on the "Add to cart" button next to the domain name. Review the details of the domain registration, including the registration period and pricing. Click on the "Continue" button to add the domain to your cart.
Complete the Registration Process:
Follow the prompts to complete the registration process. Provide the necessary information, such as contact details and payment information. Review and accept the terms and conditions of the registration. Click on the "Complete Purchase" or "Buy Now" button to finalize the registration.
Step 7: Creation of Record
Configure DNS Settings:
Once the domain registration is complete, you'll be redirected to the Route 53 console. Click on "Hosted zones" in the left sidebar to configure DNS settings for your domain. Click on the "Create Hosted Zone" button. Enter your domain name in the "Domain Name" field. Optionally, you can choose to associate the hosted zone with an existing VPC or enable DNSSEC. Click on the "Create" button to create the hosted zone.
Update Name Servers:
After creating the hosted zone, Route 53 will provide you with a set of name servers. Go to your domain registrar's website and update the name servers for your domain to point to the Route 53 name servers. This step may take some time to propagate DNS changes across the internet.
Step 8: Setup ACM Certificate
Go back in to the AWS Management Console and navigate to ACM:
In the AWS Management Console, search for "ACM" or navigate to the "Security, Identity, & Compliance" section. Click on "Certificate Manager" to open the ACM console.
Request a Certificate:
In the ACM console, click on the "Request a certificate" button.
Specify Domain Names:
On the "Request a certificate" page, enter the domain names you want to include in the certificate. You can enter multiple domain names separated by commas. Here our domain will be "joebaocloud.com" Optionally, you can also specify additional domain names (*.joebahocloud.com) using the "Add another name to this certificate" link.
Select Validation Method:
Choose a validation method to prove ownership of the domain(s). You can choose between DNS validation and Email validation. DNS validation requires you to add a DNS record to your domain's DNS configuration. Email validation requires you to respond to email verification requests sent to the domain owner's email addresses.
Review and Confirm:
Review the domain names and validation method you selected. Click on the "Confirm and request" button to submit the certificate request.
Validation:
If you selected DNS validation, ACM will provide you with a DNS record that you need to add to your domain's DNS configuration. If you selected Email validation, ACM will send verification emails to the domain owner's email addresses. Follow the instructions in the email to validate the domain ownership.
Wait for Validation:
Once you've completed the validation process, wait for ACM to validate the domain ownership. This may take a few minutes to several hours depending on the validation method you selected. Certificate Issued:
Once the domain ownership is validated, ACM will issue the SSL/TLS certificate. You can view and manage your certificates in the ACM console under the "Certificates" section.
Step 9: CloudFront Distribution
Go back in to the AWS Management Console and navigate to CloudFront:
In the AWS Management Console, search for "CloudFront" or navigate to the "Networking & Content Delivery" section. Click on "CloudFront" to open the CloudFront console.
Create a Distribution:
In the CloudFront console, click on the "Create Distribution" button.
Choose a Delivery Method:
Select the delivery method for your content. You can choose between: Web: For distributing websites and other HTTP content. RTMP: For streaming media files using Adobe Flash Media Server.
Configure Distribution Settings:
In the "Origin Settings" section, specify the origin of your content. This can be an S3 bucket, an EC2 instance, or a custom origin (e.g., a web server). Configure other settings such as cache behavior, viewer protocol policy, and allowed HTTP methods according to your requirements.
Configure Cache Settings:
Configure caching behavior for your distribution, including TTL (time to live), cache control headers, and query string parameters. You can also configure cache behaviors based on URL patterns.
Configure Distribution Settings:
Configure additional settings such as logging, custom SSL certificate (if required), and price class (the regions where you want your content to be distributed). Review the distribution settings and make any necessary adjustments.
Create the Distribution
Click on the "Create Distribution" button to create the CloudFront distribution. Note the distribution ID and other details provided by CloudFront.
Wait for Distribution Deployment
It may take some time for the CloudFront distribution to be deployed globally. Monitor the status of the distribution in the CloudFront console until it shows a status of "Enabled".
Test the Distribution:
Once the distribution is deployed, you can test it by accessing your content through the CloudFront domain name (e.g., d123456789.cloudfront.net). Verify that your content is being served correctly and that caching behavior is as expected.
Step 10: Code Pipeline Configuration
Go back in to the AWS Management Console and navigate to CodePipeline:
In the AWS Management Console, search for "CodePipeline" or navigate to the "Developer Tools" section. Click on "CodePipeline" to open the CodePipeline console.
Create a New Pipeline:
In the CodePipeline console, click on the "Create pipeline" button. Configure Pipeline Settings:
Enter a name for your pipeline in the "Pipeline name" field. Optionally, you can enter a description for your pipeline. Choose a service role for CodePipeline to use when executing pipeline actions. You can create a new service role or choose an existing one. Click on the "Next" button to proceed.
Add Source Stage:
In the "Source" stage configuration, select the source provider for your code repository. This can be AWS CodeCommit, GitHub, Amazon S3, or Bitbucket. For this case we will use Github as our code is located in Github
Configure the source settings, such as the repository name, branch, and authentication method.We will be promt to link with Github. hit on the link then provide Github credentials and choose which repository to source of the code.
Click on the "Next" button to proceed. We will skip the build stage and go directly to deploy stage
Configure Deploy Stage:
In the "Deploy" stage configuration, select the deployment provider for your application. This can be AWS Elastic Beanstalk, AWS ECS (Elastic Container Service), AWS Lambda, or AWS S3. The configuration here will be for S3 Configure the deployment settings, such as the deployment group, application name, and deployment configuration. Click on the "Next" button to proceed.
Review and Create:
Review the pipeline configuration to ensure that everything is set up correctly. Click on the "Create pipeline" button to create the pipeline. Run Pipeline:
Once the pipeline is created, it will automatically start running. Monitor the progress of the pipeline in the CodePipeline console.
Step 11: Deployment
When everything are well done and no error or mistake you see the deployment of the code in the page. See image bellow:
Step 12: Web page
In the browser type the url address https://www.joebahocloud.com and you will get the web page. See image bellow
🤝 Contributing
Your perspective is valuable! Whether you see potential for improvement or appreciate what's already here, your contributions are welcome and appreciated. Thank you for considering joining us in making this project even better. Feel free to follow me for updates on this project and others, and to explore opportunities for collaboration. Together, we can create something amazing!
📄 License
This project is licensed under the Joebahocloud License
