How to Build and Deploy a Beautiful Personal Portfolio Site with AWS S3, Route53, and CloudFront

Are you a web developer looking to showcase your skills and projects with a slick online portfolio? While there are many tools and platforms you can use to build a personal website, hosting it yourself using Amazon Web Services provides a great opportunity to demonstrate your technical abilities while keeping costs low.

In this guide, I‘ll walk you through the process of deploying a static portfolio site using a powerful yet affordable stack of AWS services including S3 for storage, CloudFront for content delivery, and Route53 for domain management. By the end, you‘ll have a professional web presence you can be proud of—and you‘ll have leveled up your AWS skills in the process!

Why host your portfolio on AWS?

Before we dive into the technical steps, let‘s consider some of the key benefits of building your personal site on AWS:

1. Full control and ownership of your content, without the limitations or ongoing costs of site builders
2. Industry-leading performance and scalability thanks to CloudFront‘s global content delivery network
3. Custom domain and free SSL certificate for a professional branded site
4. Serverless architecture is secure, reliable, and extremely low-maintenance
5. Minimal expense for a typical portfolio site, and generous free tier for new AWS accounts

Sound good? Let‘s get started!

Step 1: Create your static site

The first step is to develop the actual portfolio site itself using HTML, CSS, and JavaScript. There are a couple of approaches you can take here:

The easy way: Use a template

If you‘re in a hurry to get your portfolio up, consider using a ready-made HTML template as a starting point. I recommend the beautiful designs at HTML5 UP, which are fully responsive, easily customizable, and free to use under a Creative Commons license.

Simply download your chosen template, replace the text and images with your own content, and tweak the styling in the CSS files as desired. You can flesh out the template with additional pages and functionality using your HTML, CSS and JS skills.

The more involved way: Use a static site generator

For those comfortable with React and looking for more advanced control over their site, I recommend building your portfolio as a static site using Gatsby.

Gatsby is a powerful static site generator that lets you create blazing fast websites and apps with React and GraphQL. There‘s a bit of a learning curve, but the performance and flexibility are unparalleled. You can start with one of the many starter templates and build out your dream portfolio.

Whichever approach you choose, be sure to test your site thoroughly and optimize it for all devices before proceeding to deployment. Consider adding a build process using a tool like Grunt to streamline development.

Step 2: Register a domain name

To give your portfolio a professional, branded touch, you‘ll want to register a custom domain name. Choosing a good domain is a topic for another post, but aim for something memorable that incorporates your name or brand.

You can register domains very affordably through services like Namecheap or get.tech. Expect to pay around $10-20 per year, although you can sometimes find great deals. For example, I snagged nickvh.tech for just $25 for a 5-year registration!

Once you‘ve decided on and purchased a domain, hang onto it for now. We‘ll come back to configure it with Route53 after deploying the site itself to AWS.

Step 3: Set up your AWS account and S3 buckets

Now it‘s time to provision the AWS resources needed to host your portfolio site.

First, sign up for an AWS account if you don‘t have one already. You‘ll need to provide a credit card, but don‘t worry—hosting a typical static site is very affordable and often free for the first year under AWS‘s generous free tier.

Once your account is set up, navigate to the S3 console. This is where we‘ll create the storage infrastructure to host your site‘s files.

In S3, create a new bucket to hold your site. It‘s important to choose a bucket name that matches your domain exactly (e.g. myportfolio.com).

Next, configure the bucket for static website hosting:

1. Select the bucket and navigate to the "Properties" tab
2. Click on "Static website hosting" and select "Use this bucket to host a website"
3. Enter "index.html" as the Index document and "404.html" as the Error document (we‘ll upload these files in a later step)
4. Note down the Endpoint URL, which we‘ll need later

Finally, update the bucket policy to allow public read access to your site‘s files:

1. In the "Permissions" tab, click "Edit" under "Block public access"
2. Uncheck "Block all public access" and confirm
3. Click "Edit" under "Bucket Policy" and enter the following, replacing "myportfolio.com" with your bucket name:


{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::myportfolio.com/"
}
] }


We‘re almost there! The final step is to create a second S3 bucket with the same name as your domain prefixed with "www", such as "www.myportfolio.com". We won‘t be uploading any files to this bucket—instead, we‘ll configure it to redirect to the main bucket:

1. Create the "www" bucket just like before
2. Select the new bucket, choose the "Properties" tab, and click "Static website hosting"
3. This time, select "Redirect requests" and enter the Endpoint URL of your main bucket

Phew! With the S3 setup out of the way, we‘re ready to deploy the site files themselves.

Step 4: Deploy your site to S3

There are a few different ways you can upload your portfolio‘s HTML, CSS, JS, images and other static files to your S3 bucket. I‘ll cover two of them.

Option 1: Using the AWS CLI

If you have the AWS CLI installed (and you should!), you can sync your site‘s files to S3 with a single command. In the root folder of your site, run:

aws s3 sync . s3://myportfolio.com

Replace "myportfolio.com" with your bucket/domain name. The sync command will only upload new or changed files, making redeployment a breeze.

Option 2: Using a Grunt plugin

If you‘re using Grunt as a build tool, you can automate deployment using the grunt-aws-s3 plugin. Install it in your project with:

npm install grunt-aws-s3 --save-dev

Then configure your Gruntfile.js with your AWS credentials and bucket name:


grunt.initConfig({
aws: grunt.file.readJSON("aws-keys.json"),
aws_s3: {
options: {
accessKeyId: "<%= aws.AWSAccessKeyId %>",
secretAccessKey: "<%= aws.AWSSecretKey %>",
region: "us-east-1"
},
dist: {
options: {
bucket: "myportfolio.com"
},
files: [
{
expand: true,
cwd: "public/",
src: ["**"],
dest: "/"
}
] }
}
});


With the configuration in place, you can deploy your site at any time with:

grunt aws_s3

Whichever deployment approach you choose, your portfolio site‘s files should now be publicly accessible from your S3 bucket‘s static website endpoint. But we‘re not done yet! Let‘s add a CDN and configure your custom domain.

Step 5: Create a CloudFront distribution

To supercharge your portfolio site‘s performance and enable secure HTTPS access for your custom domain, we‘ll set up a CloudFront distribution.

CloudFront is AWS‘s content delivery network (CDN) service. It caches your site‘s static files in a global network of edge locations, allowing users to be served content from a nearby location for the fastest possible load times. It can also handle SSL/TLS termination, so you don‘t need to mess with certificates on your origin server (S3 bucket).

In the CloudFront console, click "Create Distribution". Under "Web", click "Get Started".

Configure your distribution as follows:

• Origin Domain Name: Select your S3 bucket from the dropdown
• Viewer Protocol Policy: Choose "Redirect HTTP to HTTPS"
• Alternate Domain Names: Enter your domain name (e.g. myportfolio.com)
• SSL Certificate: Choose "Request or Import a Certificate with ACM"

In the ACM (AWS Certificate Manager) console, request a new public certificate for your domain name. This will require you to validate ownership of the domain via email or DNS. Once issued, select the new certificate in your CloudFront distribution.

Leave the remaining settings at their defaults (or tweak as desired) and click "Create Distribution". It may take up to 15 minutes for your new distribution to fully roll out.

Step 6: Configure Route53

The final step is to configure your domain name to direct traffic to your new CloudFront distribution. We‘ll do this using Route53, AWS‘s highly available DNS service.

In the Route53 console, click "Hosted zones" and "Create hosted zone". Enter your portfolio‘s domain name and select "Public hosted zone".

In your new hosted zone, create two DNS records:

1. An A record aliasing your apex domain (e.g. myportfolio.com) to your CloudFront distribution
2. Another A record aliasing www.myportfolio.com to the same CloudFront distribution

Use the "Alias" option under "Value" and select your CloudFront distribution from the list of AWS resources.

Finally, update your domain‘s nameservers to use the four Route53 nameservers listed under "Hosted zone details". This step varies by registrar but is typically found under "Custom nameservers" or "DNS settings" for your domain. It may take some time for DNS updates to fully propagate.

Step 7: Test and go live!

With S3, CloudFront, and Route53 configured, your custom domain should now load your blazing fast portfolio site over HTTPS, served from a global CDN. Give it a thorough test on various devices to make sure everything looks and functions as expected.

You did it! Your professional portfolio is now live for the world to see, and you have a slick AWS deployment workflow you can use for future projects. Time to bask in the sense of accomplishment and share your new site with colleagues, friends, and potential employers.

I hope this guide has demystified the process of deploying a static site with AWS and empowered you to take control of your online presence as a developer. The modern web stack is a thing of beauty, and AWS gives us so many powerful tools to build with.

Now get out there and show the world what you can create! And if you found this walkthrough helpful, I‘d love it if you gave my own portfolio a look. Building elegant web experiences is my passion, and I‘m always excited to connect with fellow developers.

Happy coding!