How to build your Portfolio Website using AWS

A Beginner’s Guide to building a website using Amazon S3 & Route53

Why do you need a portfolio?

Being a data professional, a recent grad, and a job seeker in the US, I found it difficult to showcase my best works other than a 1-page resume (with too much text/information) or my GitHub profile (too much code). I needed a balance of both, with beautiful photos or visualizations, and without all the underlying code so it’s easily readable by anyone. I also needed this to be accessible by everyone on the internet — so an online portfolio was the way to go. It could make me stand out, display all my professional information (skills/achievements), and my passion projects in one place!

For any budding technologist, I would strongly recommend a website as an addition to your existing online profiles. It could highlight your job application, bring attention to your accomplishments, and ultimately land you that dream role.

How much will it cost? What else do you need for this project?

It took me about $16 to purchase a website template for lifetime access, and $12 every year to register my domain name. I also have a $0.50 charge (plus taxes) each month for AWS to manage my Domain Name. Altogether, I paid about $28 initially, and I pay $0.54 monthly for the DNS management.

So your initial cost will be about $28 to $30. And every year you will have to pay about $18 to $20 in total depending on your sales taxes (for the US).

You’ll also need a credit card to create an AWS account. But don’t worry, it’s completely safe and you will only be charged for what you use. If you follow me correctly, you would also have about the same costs as me.

This took me about 3 weeks to build initially. Then 2 months later, it took me a day to edit some information and change my job status (after I got my Amazon offer) before I could publish this as a LinkedIn post.

What to do before you start?

Before you start, you need to decide how your website is going to look. For absolute novices in HTML, CSS & JavaScript, this may seem daunting at first. However, if you do a quick Google search for website templates, you can find thousands of free or paid (< $20) templates online.

At this stage, be creative — feel free to choose any template you find online. If you don’t like the colors, you can change that later after downloading the files. Some sources I would suggest visiting are: ThemeForest and BootstrapMade.

Amongst these, my personal favorite is BootstrapMade’s templates for Resumes/CVs. They have a crisp layout with clearly defined sections for every component I would like to display on a Portfolio Website. For my own website, I chose the Personal template — it has a dark background with white font, suitable for nighttime reading.

With BootstarpMade, you can either choose to purchase the template (about $15 to $20) to be able to remove the footer credit or you can choose to keep the free version at this point but with the footer credit.

I purchased the template only after editing the entire HTML file and committing to it after 3 weeks. If you can’t commit to it initially, download a few templates you like and experiment with them to see what you want your final website to look like. Purchase it only after you love it!

Edit the template and personalize your website

This part will be the most time-consuming. Download the folder and start editing the .html files. You should have an HTML editor installed on your computer for this. I really like Visual Studio Code and Sublime Text Editor’s UI. They color-code all components of your HTML file, so it is super easy to read.

Edit the information to fill in your details, rename the sections, and edit the theme colors. Add your personality to your portfolio. Edit the .css file too, if needed. A great website for colors and their hex codes is Palleton. If you’re unfamiliar with some HTML tags, visit W3Schools. The easiest way to change images is to switch the existing image file in your folder (main folder/assets/img) with your own images. A great resource for royalty-free images is Pexels.

You should remove the Contact Form if using a BootstrapMade template because we can’t use it while hosting the website on the AWS Platform. You need a static website to host it using Amazon S3, a working form in your website is no longer static, so it wouldn't work, unfortunately.

If you need some inspiration, here’s my website and my friend, Harmeet’s website. We both used BootstrapMade templates.

At this point, you should have an amazing-looking website just waiting to be published online!

Getting started with an AWS account

With a brand-new AWS account, you have the ability to use some services up to a certain capacity for zero or minimal charges for 12 months. This is called the AWS free-tier. We will be using 2 services here for our website deployment, Amazon S3, and Route53. With S3, you get about 5GB of storage space in the free-tier and Route53 is a pay-per-use service. You will also need a credit card when you log in — don’t worry it will not be charged if you don’t use any service. The pending $1 charge on your credit card is to make sure your card works, it will be removed automatically after a few days from your credit card transactions.

So, let’s create a new account! (Or use your existing account if you already have one.)

1. Go to this link.
2. Click on Sign in to the Console on the top right corner.
3. Click on Create a new AWS account.
4. Enter your details in the next few pages.

Once you’re in, your homepage or AWS Management Console should look something like this:

Setting a Monthly Budget Alarm

Before we use any service, we want to create a monthly $10 budget for our account. This will ensure your credit card will not be accidentally charged with any high cost. If you follow just what I did, you should not have more than $12 to $13 in the first month and about $0.50 from the second month onwards.

So first, go to your Billing and Cost Management Dashboard. This can be done by searching for Billing in the search bar above your screen and click on Billing. Now on the left pane, click on Budgets, then Create Budget.

1. Click on Cost Budget, since we want to create a budget based on a 10-dollar amount.
2. Enter the details on the next page. Give it any name like “Monthly 10 dollar Budget”.
3. The period will be monthly and it will be recurring.
4. The amount will be Fixed at 10 dollars or $10.
5. Leave all the other settings as they are and proceed to configure thresholds.
6. For the threshold, you want to define any limit beyond which you will be notified via email that something is costing you more than the threshold amount and you should check your AWS account. I like to put this limit at 80% of my budget, which is $8. And I like to do that for both Actual and Forecasted costs.
7. For now, enter the limit for the first threshold at Actual cost.
8. Enter the email recipient for alerts on the exceeded budget threshold.
9. Repeat steps 7 and 8 by clicking on the Plus sign on the top right side and selecting Forecasted value this time. Don’t forget to enter the email.
10. Then, Confirm Budget.

Your new budget should now be visible on your Budgets page like below. My current cost is $0.54 as I am paying for Route53’s DNS Management.

Register a Domain Name with Route53

The next thing we want to do is register a domain name, this is what anyone should type in the address bar of a browser when they want to visit your website. You’ll also have to pay a very small fee ($10 to $15) to purchase and register the domain name for a year.

In the AWS Management Console, type in Route53 in the search bar at the top of the page. This is what it should look like:

I already have 1 domain registered so it shows 1 for me — this should be 0 for you. Type in a domain name that you would like: johnsmith or smithjohn. Click on Check. The next page will show you its availability and the price of each for 1 year. This price, however, does not include the $0.50 monthly management fee. Also, Route53 is a global service so you wouldn’t need to select any AWS region from the top right corner.

Go ahead and add to your cart whichever domain name you like. Then, follow the next steps to purchase and register it. This may take a few minutes for a successful registration, and you will receive an email (which you enter before registering). Now, on to S3!

Create and Fill an S3 Bucket

Type in S3 in the search bar at the top of the page, and click on S3. This will bring us to the S3 Management Console. Choose any AWS region closest to your geographic location from the top right corner.

Now, we need to create a bucket for our website, and it should have the same name as the domain name you purchased and registered.

1. Click on the orange button Create Bucket.
2. Enter the details on the next page.
3. For the bucket name, use your domain name. If your domain name is johnsmith.com, enter johnsmith.com.
4. Choose the region closest to your geographic location. Remember the region you selected here for a later step.
5. We want to allow all public access to our bucket because it should be publicly accessible by anyone on the internet. So uncheck the box that says Block all public access. However, when you want to use a bucket to store private information, always make sure this box is checked.
6. Next, enable bucket versioning. This will allow you to reupload a single file to your bucket and it will automatically have an updated version.
7. Tags are optional. I would recommend adding a Name tag and typing your domain name into it. This will help you later on with Billing, in the highly unlikely chance your credit card incurs an unusually high charge.
8. You can leave the rest of the settings as they are.
9. Finally, click on the orange button that says Create Bucket.
10. You’ll get a warning next, something like this. Check the acknowledgment; this is so AWS can make sure you know that your S3 bucket is publicly accessible by anyone on the internet.

You should now get a green bar on the top of the page that says Successfully created the bucket. Now click on the name of the bucket so we can add your website folder as objects.

Click on Upload and click on Add folder. Browse through your local documents and select your folder and upload them. Now your bucket should have all your files and folders as your website’s folder on your local computer.

Finally, go to the Bucket Properties tab. Scroll down until you reach Static Website Hosting. Edit that to enable it. Then, choose Host a Static Website. Then, enter the homepage of your website, this is usually “index.html”. Leave out the optional settings and click Save Changes.

Making the S3 Bucket Publicly Accessible

Next, we want to change the bucket policies to make sure anyone on the internet has permission to view the contents of your bucket. So, inside your bucket, go to the Permissions tab. Scroll down to Bucket Policy and click on Edit. On the next page, click on Policy Generator which will open a new tab for you.

Go to the Policy Generator. In Step 1, select S3 Bucket Policy.

In Step 2, add the effect Allow (since we want to allow incoming traffic). For Principal, add an asterisk (*) as we don’t want to specify any specific traffic, rather every single traffic. For Actions, scroll down to select GetObject which basically means access every object from the bucket. For Amazon Resource Name or ARN, go back to the S3 Management Console Tab (where we were editing the bucket policy), and copy the Bucket ARN from there and paste it to the ARN section (in the Policy Generator tab). After that add “/*” to the end of the ARN. This means any object in the bucket.

To summarize, with our Bucket Policy that we generated, we are saying that we want to allow any incoming traffic from the internet, and they can view all the objects in our S3 Bucket.

Finally, click on Add Statement and Generate Policy. This will open a pop-up window with JSON text with all our configurations. Copy all the JSON text, go back to the S3 Management Console tab, and paste it on the Policy area. Then, click on Save Changes.

Now all your objects can be publicly accessed. To check this, click on your index.html file, and in the Properties tab, copy-paste the object URL into an Incognito window to see if you can view your webpage with all the images. If yes, then awesome — let’s move on. If not, I would suggest following the Bucket Policy steps again to make sure you haven’t missed anything.

Mapping the Domain Name to the S3 Bucket

Here comes the very last part. Now that our S3 bucket is accessible from anyone on the internet, we need to map that to the domain name we purchased and registered.

So let’s go to Route53. From the navigation bar on the left, select Hosted Zones. Then, click on your domain name. You should see your domain name already there with 2 existing records in it. These 2 records were auto-generated for you when your domain name was registered. We need to add a third record, which points to your S3 bucket with the website.

Click on Create Record. If you are presented with the Quick Create view, switch to Wizard view, find this option on the top right side. Then, choose Simple Routing, then Define Simple Record. Leave the first option blank. For record type choose A. For endpoint, choose the S3 website endpoint, then choose your region and your bucket. Then click on Define Simple Record, then Create Record. Now your hosted zone must have 3 records.

That’s all the settings you have to do! Now, wait for a few minutes and type in your domain name on an Incognito window. Your website is now live. Anyone across the world can view it. It’s time to share it on your LinkedIn!

End Note

Congratulations, you now have your own website!

A big shoutout to Stéphane Mareek’s Udemy course on acing the AWS Certified Cloud Practitioner exam. That’s where I learned how to host a static website on Amazon S3.

Special thanks to my awesome friends and roommates, Harmeet Lamba and Akshay Chaurasia for helping me with Amazon Route53.

I would love to hear your thoughts on this story, it’s my first attempt at writing on Medium. I can also be contacted on my LinkedIn.

Thank you and happy coding! :)