How to Seamlessly Host Your Personal Portfolio Website on AWS with S3, CloudFront, Route 53, and GitHub Actions

Introduction

1. Hosted Zone Setup

• A public hosted zone is a container that holds information about how you want to route traffic on the internet for a specific domain, such as example.com, and its subdomains (acme.example.com, zenith.example.com).
• Navigate to the Route 53 service in the AWS Console. In the left-hand panel, locate and click on "Registered Domains," then select "Register Domain."
• Consider creating a domain using your first and last name, such as "elliotalderson.com." These domains typically cost around $15 per year. After completing the registration process and receiving approval, you will see your new domain listed under the "Hosted Zones" section in the left-hand panel. This hosted zone is where you will manage the DNS settings for your domain.
• We will come back to Route53 in a later step for routing traffic to Cloudfront.
• Working with public hosted zones
• AWS CDK Hosted Zone Code Snippet:

2. Portfolio Assets

• There are various approaches to building your portfolio, commonly involving files such as HTML, CSS, JavaScript, and images. Personally, I use React and webpack, running npm run build to generate a build directory containing my website assets. However, for simplicity, this tutorial can work with just an index.html file that contains "Hello World".
• Repository for my website

3. S3 Bucket Setup

• Amazon S3 is an object storage service offering industry-leading scalability, data availability, security, and performance.
• Create a general-purpose S3 bucket with ACLs disabled. Be sure to uncheck all public access settings as we want our S3 bucket to be public and internet-facing. You can enable bucket versioning, set the encryption type to Server-side encryption with Amazon S3 managed keys (SSE-S3), and disable the bucket key and object lock.
• After creating the bucket, enable static website hosting at the very bottom of the properties tab in the bucket. Be sure to specify your index document, typically named index.html unless you named it something else or placed it inside a directory.
• Once that's configured, you can upload your website assets to your S3 bucket using the uploader. Notice how my index.html is in the root directory.
• Add the following Bucket Policy in the permissions tab to your bucket. Be sure to replace BUCKET_NAME

• You can validate that you completed this step correctly by navigating to your bucket website endpoint, which is displayed in the static website hosting section in the properties tab. Your website should be displayed there.
• AWS CDK S3 Bucket Code Snippet:

4. ACM (AWS Certificate Manager) Setup

• Use AWS Certificate Manager (ACM) to provision, manage, and deploy public and private SSL/TLS certificates for use with AWS services and your internal connected resources. ACM removes the time-consuming manual process of purchasing, uploading, and renewing SSL/TLS certificates.
• We are now going to request a certificate using the AWS Certificate Manager (ACM) service. You can find this service in the AWS console by typing "Certificate Manager" in the search bar.
• Request a public certificate with a fully qualified domain name using the hosted zone domain name you created in the previous step, such as "elliotalderson.com." Set the validation method to DNS validation and the encryption method to RSA 2048.
• We will use this certificate in the next step for our CloudFront distribution.
• AWS CDK ACM Code Snippet:

5. CloudFront Setup

• Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.
• Create a CloudFront distribution with the origin domain of the S3 bucket you created in the previous step. After selecting your S3 bucket, be sure to choose the option to "Use Website Endpoint." You can leave the default settings as they are for the origin section, but for the Default Cache Behavior, be sure to select "Redirect HTTP to HTTPS" and set the cache policy to Caching Optimized. The remaining origin settings and function associations can also be left as is.
• For the Web Application Firewall, set it to "Do not enable security protections." In the final settings section, set the Alternate Domain Name (CNAME) to the domain you created in the previous step, such as "elliotalderson.com." Also, select the custom SSL certificate you created in the previous step. It may take sometime for the certificate to be issued.
• Modify your S3 Bucket Policy again in the permissions tab to your bucket. Be sure to replace BUCKET_NAME, ACCOUNT_NUMBER, and DISTRIBUTION_ID.

• You can validate that you completed this step correctly by navigating to your Cloudfront distribution domain name, which is displayed in details section in the selected Cloudfront distribution. Your website should be displayed there.
• AWS CDK Cloudfront Code Snippet:

6. Route 53 Setup

• Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. Route 53 connects user requests to internet applications running on AWS or on-premises.
• Create a Route53 an "A" alias record in your hosted zone that routes traffic to your Cloudfront distribution. You can leave the subdomain field blank.

  

• AWS CDK Route53 Code Snippet:

7. GitHub Actions CI/CD Setup

• GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.
• It's assumed that you already have a GitHub repository set up and that you have pushed your newest code changes. In your GitHub project, click the Actions tab and select “set up a workflow yourself.” This will create a main.yml file inside of .github/workflows/.
• Be sure to configure your AWS credentials in your GitHub repository. You can do this by navigating to the repository settings, then to Actions, and selecting Secrets and Variables. Create new repository secrets for AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, WEBSITE_BUCKET_NAME, and DISTRIBUTION_ID.
• You can copy my workflow file directly. Just keep in mind that it utilizes NodeJS with some dependency and build steps that may not be necessary for all applications.
• The crucial step here is using the aws s3 sync command. Make sure to replace "website/build" with the path to your site assets. It's also essential to invalidate the CloudFront cache because the CDN caches your S3 bucket's site contents on servers worldwide.

• You can copy my workflow file directly.
• Now, every time you push a change, GitHub Actions will automatically update your S3 bucket contents and invalidate the CloudFront cache.

Conclusion

• In this blog, we covered the essential steps to host your personal portfolio website on AWS. We started by setting up a hosted zone in Route 53, created a domain, and managed the DNS settings. We then built and prepared our portfolio assets, and set up an S3 bucket to host these assets as a static website. Next, we requested a certificate from AWS Certificate Manager (ACM) to secure our site with HTTPS. We then configured a CloudFront distribution to serve our site globally with optimized caching and security. Finally, we integrated GitHub Actions for continuous deployment, ensuring that any changes pushed to our repository automatically update the S3 bucket contents and invalidate the CloudFront cache.
• Hosting your portfolio on AWS not only ensures high availability and performance but also leverages the powerful features and scalability of AWS services. I encourage you to try hosting your portfolio on AWS. The process might seem complex at first, but with this step-by-step guide, you can achieve a professional, reliable, and secure online presence that effectively showcases your skills and projects. Give it a try, and take your personal branding to the next level!