![How to Seamlessly Host Your Personal Portfolio Website on AWS with S3, CloudFront, Route 53, and GitHub Actions](https://assets.community.aws/a/2hW1T1yybHwmyftoiveyQAsGQcb/Arch.webp)
How to Seamlessly Host Your Personal Portfolio Website on AWS with S3, CloudFront, Route 53, and GitHub Actions
Discover the step-by-step process of hosting your personal portfolio website on AWS using S3, CloudFront, Route 53, and GitHub Actions. This guide will help you make your portfolio internet-facing and automate updates and deployments with continuous integration and continuous delivery (CI/CD). Perfect for developers looking to streamline their website hosting with AWS services.
Published Jun 7, 2024
In today's digital age, having a personal portfolio website is more important than ever. It serves as your digital business card, showcasing your skills, projects, and professional journey to potential employers, clients, and collaborators. A well-crafted portfolio can set you apart from the competition, demonstrating your technical proficiency, creativity, and commitment to your field.
For developers and tech professionals, a portfolio website is a dynamic way to present your work, allowing you to highlight projects with detailed descriptions, code snippets, and interactive demos. It offers a platform to share your expertise, blog about your experiences, and connect with a broader audience.
By hosting your portfolio on AWS, you leverage the robustness, scalability, and security of one of the leading cloud service providers. AWS services like S3, CloudFront, Route 53, and GitHub Actions enable you to create a fast, reliable, and continuously updated website with minimal effort. This guide will walk you through the process of setting up and deploying your personal portfolio website on AWS, ensuring it is always accessible and performant.
- 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.
- AWS CDK Hosted Zone Code Snippet:
- 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 anindex.html
file that contains "Hello World".
- 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:
- 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:
- 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:
- 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.
Route53AAliasRecord - AWS CDK Route53 Code Snippet:
- 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
, andDISTRIBUTION_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.
- 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!