Code diaries – Architecturing my own site

Note: When talking about the site, I’m going to use links from The Internet Archive and its Wayback Machine, so if you’re reading this in the future, then you can see the sites as they were at this time (or even further in the past for some stuff).

GO TO TECHNICAL STUFF

Background

I had finished my first semester in college, and I was applying for the first-year internships offered by FAANG companies. I saw that lots of programmers have their own online resumes. So I decided that it would be cool to have one myself to try to impress more the recruiters from the internships I was applying for.

To graduate from my high school (it is a technical school here in Guadalajara called CETI), I needed to create a project based on the career path I choose at the beginning. In my case, it was software, so I had to develop an entire software that did something. A friend and I created a medical administration platform using PHP, Laravel and we learned about how to host in AWS.

So I knew the basics of AWS and already knew how to create web platforms using PHP+Laravel. Each time I do a new project, I try to learn some new stuff, so I decided to make my online resume using Python+Flask. As a developer, it wasn’t hard to develop the site, but I’m no designer, so I visited some sites for inspiration and did the best I could, and this was the result:

You can visit my original site here!

Fast-forward 2 years into the future

Now we are in 2019; for one of my courses, I had to create and post about my learnings in a blog. My original site had a blog functionality, but it didn’t have a good experience (at most, it was decent enough). So I decided to create this blog in WordPress.com (now discontinued), and I started to use it as my own personal blog and forgot about the blogging functionality I added to my site.

2020

Now it’s 2020, I have grown a beard because of quarantine, and I don’t look any more like the guy in the photo from the original site. The fastest way to solve this, of course, was to create a new one from scratch! Talking seriously, the design of my original site was outdated and not that responsive. Also, I had my blog in WordPress.com, so, technically it wasn’t completely mine because it was in the WordPress free-tier services.

First, I decided that I didn’t really need a backend for my online resumé because I didn’t have complex logic. And for the blog, I was using WordPress, so the easiest way to publish a new blog was to migrate to another WordPress, so I just decided to rent a WordPress server with Amazon.

And this is the new site:

And the blog is this one, where you are reading this post!

Technical stuff!

So now, let’s start the techie talk. You can see the repository with all the code here.

As I already talked about, initially, I had my site as ivanmorett.com. It was an EC2 server that served content through a python application. It was overkill for what I really needed, so I killed that server and decided that I just needed a static site for all my information.

The domain name was too long. On the internet for almost 10 years, I have been using “lima” as my username (the contraction of my full name), so I decided that it would be a better domain. lima.fyi was available, so I decided to purchase it through Route 53 service.

A simple architecture diagram I created to represent the site and the services I’m using. You can see the Figma diagram here

I decided to delete my EC2 server and created an S3 bucket containing all the static website I created. These buckets have the option to serve the content as a website:

One of my main concerns was to have an SSL certification to be a little more sure of its security and because the industry is moving to deprecate HTTP. I initially knew that it was possible to self certify your site for free using Let’s Encrypt (I used it on my original site), but this method wasn’t possible in a static site like the one I wanted to use. I researched how to certify my bucket, and I found that I needed to use Amazon Cloudfront, a CDN that allowed me to autogenerate the SSL certification. Because the requests go through it, I didn’t need to worry anymore.

If I needed to change my static content, it was too much work to do it manually because of all the minification, uglify, concatenating files, etc. So I decided to automatize it using Grunt. This way, I just needed to run my own grunt commands and then, using the AWS CLI, publishing the new build into the bucket.

Because I already had the domain ivanmorett.com, I decided to keep it and redirect it to the lima.fyi domain. The S3 buckets also have a setting for this, so I just created a new bucket and pointed the domain to it:

I used to have a contact form in my original site, and even if it usually isn’t the preferred way to contact someone, I decided I wanted to keep it on the new site. The problem with it was that I didn’t have a backend for it. So I decided to create a serverless function using the Lambda services (you can check my code here), and using mailgun, I just send the form data to my personal email.

Once I had that in place, I needed a way to avoid spam from bots (I didn’t have any in my original site, and I received tons of spam). I’m too lazy to add an alert about cookies (because of the GDPR law), so I decided the easiest way to avoid cookies was to use a service that didn’t use them (so no Google ReCaptcha). I looked everywhere until I found Friendly Captcha. This service is fantastic, is GDPR compliant, doesn’t track, is open-source (so if you want, you can install it on your own server), and it has a free-tier for my use case where I don’t want to create a backend!

The blog – Press enter to continue…

For the blog, I downloaded all the data from the old blog dashboard. And I needed to implement the WordPress service into a new server. I thought about creating a new EC2 instance for it. Still, I concluded that it would involve too much work to set up everything correctly and make sure there is no vulnerability.

So I found that Amazon had a service that offers you ad-hoc servers, Amazon Lightsail. It had a WordPress option, so I just decided to pay for it, uploaded all the information I previously downloaded, and point the blog subdomain to this server.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.