Personal Website + React

It's almost 2018. I'd like to try something new: re-architecting my personal website with modern web technology!

Recently I started Incepto House, a coummnity house in Menlo Park, CA. I am fortunate enough to live with a few amazing housemates1, such as Jacob Cole, Parnian Barekatain and Andrej Karpathy. Being part of this intellectual community inspired me to transform ideas into words. So I would like to pick up blogging again.

I wrote my first blog post on Wordpress. The year was 2003, when Flash was the dominant media for interactive content… Wordpress was the dominant publishing platform, and it still is - powering 29% of world's websites.

It has been thrilling to see the web stack evolve over the last 15 years. One of the cool, trending frameworks is React.js by Facebook, which allows programmers to re-think web development in a modular way. I decided to re-architecture my personal website using React, with blogging as the first "product feature" to roll out.

Personal Content Delivery

Why bother to set up blogging on your personal website, rather than go to platforms like Medium? Well, you control the "brand", and associated design. Besides, if you think of blogging more than just a series of posts, but a network to engage your audience, then it's really about delivering personal content. For example, as a researcher, I would like to "publish" academic papers on my website; as a photography hobbyist, I wish I could have a responsive gallery on display. I want to aggregate content from Instagram, Facebook, Twitter so that the personal website truly reconstructs my online identity1.

Architecture

The React architecture has three parts: a static site generator, a content management system, and continous deployment to web.

Gatsby: Static Site Generator

I am glad that I come across Gatsby.js. It has the following features:

Gatsby.js - A static site generator for progressive web apps.

  • A static site generator. Transforms the site into static files, and can be deployed efficiently through Content Delivery Networks (CDNs).
  • Progressive web app. Gatsby only loads resources on demand, and pre-fetches resources for other pages so the site feels blazing fast!
  • Built on modern web technology. React, Webpack, and modern CSS.

Contentful: Content Management System

With Gatsby, data can be fetched through GraphQL. GraphQL is a query langauge that is designed to replace REST API calls. We can use modern Content Management Systems (CMS) such as Contentful.

Use Contentful as Content Management System

As you might have noticed, Contentful comes with a Markdown editor. This goes handy with blog post editing.

Continous Deployment

Now, we need a continous deployment pipeline to integrate content with code, and deploy the generated static site to timshi.ai.

Netlify suits this purpose well. After setting it up with your Github repo, every code push will trigger a production build. By adding a Webhook, we can also trigger the build when a piece of content is published / updated on Contentful.

Conclusion

Before migrating to React, my personal website is like spaghetti of raw HTML code. Sure, it's easy at the beginning, but soon with more content it became messy to manage. The idea of React might seem overkill at first thought, but it turns out easier than I imagined. And with the little upfront cost, managing and creating personal content became faster than ever.

1: Fun fact. Housemates are used more colloquially on west coast, whereas on east coast people tend to refer to them as "roommates".

2: Btw, if you just want to start a personal blog that's not on Medium, Jekyll is highly recommended, for various reasons mentioned in Karpathy’s blog.