Personal Website 2018

This is a case study of my personal website's redesign and redevelopment in January 2018, which took me a grand total of about 2-3 weeks (design, development, deployment, and learning 2 new skillsets because why not). The requirements were to create a modular website that has low maintenance, can easily scale in the future, and perform well for SEO while using the latest web technology. I needed the website to not only to get a job, but to also build my personal brand and someday a passive income source.

• Visit Website

• Web Design
• HTML
• CSS
• Bootstrap
• VueJS 2
• NuxtJS
• GhostJS
• Docker
• Logo Design
• Project Manager

What I Did

Prior to this, my personal website was based on a custom Wordpress theme I designed and developed. It was hosted on DigitalOcean with the help of Serverpilot. It was great and all, but I ran into the restrictions and limitations of the Wordpress framework thanks to the new requirements. Plus, Wordpress is very heavy in performance.

So I decided to go with a Node.js architecture. Because I understand the importance of blogging in terms of building a personal brand, trust, and SEO, I can't overlook that functionality. I could go with a Wordpress submodule microservice solution, but I didn't want to double my work by having to create a matching Wordpress theme. Plus, there was the issue of performance. I wanted to avoid making a CMS and worry about security, so I opted for GhostJS.

GhostJS was clean, simple, elegant, and it was based off of a Node.js framework. Plus, it had all the SEO elements I needed while being super lightweight. The themeing system was also very easy to learn compared to the complexity of Wordpress. The plan was that once I had everything launched, I would then create a corresponding matching theme for GhostJS so it fits the rest of the website's design.

It's a new year, 2018, so I decided to learn some new skills - VueJS and Docker, and to really drill in the knowledge, I decided to apply these technologies to my new personal website! I chose to go with VueJS, specifically NuxtJS because of SEO and that it's lighter weight compared to ReactJS (or NextJS for fair comparison). Due to the project requirements, I went with Docker since I never have a lot of time to redesign or redevelop my personal website compared to other projects I work on. By going with Docker, it basically makes deployment way easier, scalable, and solves all of my maintenance worries and challenges I run into.

The Technology Stack

• Nuxt.js (aka Vue.js)
• Express.js
• GhostJS (blogging module)
• MongoDB (noSQL)
• Docker

Challenges

Because this project involved the use of new technology and a microservice approach, I had a lot of challenges. The thing that delayed me the most was learning the new technology. The biggest challenge was during deployment.

Deployment

On the deployment side of things, I faced a lot of challenges, which mainly had to do with Docker, Nginx, and LetsEncrypt specifically. This also had to do with the architecture I decided to go with. Because I was on a tight budget, I am only able to use a single VPS instance based on the lowest tier on DigitalOcean. The challenges is as follows:

• LetsEncrypt Docker Instance
• Using the Official Nginx Docker Image separate from LetsEncrypt
• Hiding the ports for the other Node.js Docker instances so they don't show up (e.g. www.eric-liang.com:2368 should show up invalid.)

The Result

The end result is I was able to get most of the desired results without any hacks or unplanned modifications.

What I Would Do Differently

It is now July, 6 months since I deployed the website. Looking back, I probably wouldn't do anything much differently. If I had more time, the one thing that would satisfy my techy OCD side would be to create a custom CMS solution that will handle both blogging and other future aspects of the website without relying on a 3rd party solution such as GhostJS.