Eric Liang

Front End Web Developer

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.

Client: Myself
Date: Jan 2018


  • Web Design
  • HTML
  • CSS
  • Bootstrap
  • VueJS 2
  • NuxtJS
  • GhostJS
  • Docker
  • Logo Design
  • Project Manager
Eric Liang Website Design 2018

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.

Have A Project In Mind?

Interested in working with me? Let's have a quick chat, and see how we can make your project come to life. :)


Let's Do This