How I Built my Personal Website in a Weekend —Intro

June 8, 2020 • ☕️ 2 min read

For so long, I have been procrastinating about building my website. Hoping for a career in academia, the personal website seems more mandatory than it might be in other domains. Truth to be told, I have seen so many personal web pages of many researchers. Exploring a wide range of such exemplars did not, however, catalyze my motivation to build one for myself. This is attributed to two related reasons. One is that I didn’t fall in love with Jekyll, Hugo, WordPress, and such, the horsepowers behind plenty of static web pages in academia. The second is that I love and use modern javascript libraries, such as React, Angular, and D3. I use these libraries for all my research and side projects. I was looking for a “clean” stack to ensure a seamless experience with the tools that I enjoy and that I’m already familiar with.

Recently, I landed on Gatsby which is a modern web pages generator based on React and GraphQL. In other words, Gatsby leverage the power of static web pages and React ecosystem to build incredibly fast websites and even apps. What does that even mean? Well, it means that we can create predictable React components to (re)use in our website, write our contents in markdown, and use GraphQL to fetch any type of data, resources, medias, including markdown, in our components. Not only that, but Gatsby comes with tons of plugins to read and transform all types of contents in a website to almost any shape, forme, and size.

As I was really lazy about this project, even after skimming the documentation of Gatsby and grasping its power. I wasn’t ready to start building my website from scratch. I instead googled a combination of keywords, e.g., Gatsby, React, Personal website, Starter 😂. “Starter” was an important one! Fast forward, I stumbled upon blog starter by Gatsby. Further research led me to a fork of Gatsby’s starter by Dan Abramov for his blog, Dan is a very active person in React community and develops React at Facebook, to say the least.

Now, you might guessed it? That’s right! I forked Dan’s blog and started from there. I want to keep this article as an intro. I’ll keep all the detail for an upcoming article. If you are interested to know a bit more about inner details, my website is open-source on GitHub.