Home More tutorials

Architecture of my portfolio website

Initially I just created a simple static HTML and CSS page with some images to serve as my portfolio page - no frameworks, (almost) no javascript - why over complicate it?
After some time I decided that I would also write a few blog posts and tutorials on my portfolio website, but again, I didn't want to over engineer my website.
At first I thought that maybe I would just copy and paste a new page for each article.
This sounds stupid but if you consider that I will only write about one article a month and I will not redesign my site too often, this use-case doesn't really justify the overhead of a back-end and database with more complicated and pricier hosting...

Few word do trick

But you wouldn't hire me if I did this!
So here is what I did instead:

11ty

I converted my website to be compatible with 11ty. 11ty is a static site generate and it can generate static pages from template files. Basically I just had to configure a few things and create a nunjucks template file for my articles. I created a separate file for each of my articles with only the content of the of the post and some metadata for the nunjucks template. Now my website is still just a static site but the design and structure of the article pages is managed from a single template file.

Amazon S3

The website is hosted in an Amazon S3 bucket. For technical reason there are actually two buckets. One contains the actual website file the other bucket just points to the first one. This is needed to support both the www and non-www version of the site.

Amazon CloudFront

The S3 bucket is exposed through a CloudFront distribution. This makes the website load faster and also makes it possible to set up HTTPS.

AWS Certificate Manager

The certificate for HTTPS is provided by AWS Certificate Manager. The certificate is free and is easy to set up with CloudFront.

Amazon Route 53

I've bought my domain from a different registrar but I've set up my domain to use the name servers from my Route53 hosted zone. Using Route53 makes it easy to point the domain to the CloudFront distribution.

Github Actions

Because I didn't want to manually upload my website to S3 every time I make a change or write a new article I've set up a pipeline to run the 11ty build and upload the website to S3 every time there is a commit to the master branch.
Here is the yml file that does all this magic:

The AWS credentials are stored as secrets in the repository settings.

Your feedback is welcome! Please let me know if you think there is something important that should be included in this post or if you find anything wrong!

Comments available on dev.to

Posts and tutorials
Upload docker image to AWS ECR
How to upload a Docker image to ECR using AWS CLI
A quick tutorial on how to upload a Docker image to AWS ECR using AWS CLI. The tutorial also walks you through setting up an IAM user with the necessary permissions to upload to ECR from the CLI.
DevOps AWS ECR Docker
Terraform local file
Simple way to play around with terraform locally without any cloud account
An easy way to start playing around with terraform locally without using any cloud account or any complicated local kubernetes setup.
DevOps Terraform
Encryption at rest
Encryption at rest using EF
Encryption at rest can come in handy when we have some sensitive data that we need to store in our database and we don't want to store it in plain text for everyone to see. In my case I needed to store some API keys in the database...
Entity Framework Security C# .NET
SSL
SSL Certificates - an easy to understand guide
As with any technology, I think it's very important that first we understand the problem that this technology is trying to solve. Let's try to understand the problem through an example...
DevOps Security
Portfolio architecture
Architecture of my portfolio website
Initially I just created a simple static HTML and CSS page with some images to serve as my portfolio page - no frameworks, (almost) no javascript - why over complicate it? After some time I decided that I would also write a few blog posts and tutorials...
11ty Amazon S3 Github Actions CloudFront
SQL add days
Adding business days to a date using SQL
Recently I had a task that seemed very simple at first. I had a table with billing start dates and number of business days to bill. The task was to calculate the end date for each row. Basically to calculate the start date + number of business days...
SQL MS SQL Server

By using our site you agree to our use of cookies to deliver a better site experience.

Got it