4 minute read

Why I moved my personal website to Gatsby.js + Github

Encoder 4 Layers
Decoder 4 Layers
input units
9 units
6 units
4 units
3 units
2 units
3 units
4 units
6 units
9 units
output units
An interactive react component right here inside this blog post! Click a + or - button.

I used to have an old static website (from 10 years ago) for the usual task of keeping track of my work and online presence. Due to how traditional web hosting services work, it has been a challenge (read: not fun) updating it. I recently had some time and decided to make the website more interactive + include a modern development experience (as if december 2019).

Reasons I Moved!

There are many good reasons (quite a bit has been written on this) to use Gatsby + Github Pages, but here are some that made sense for my use case (personal website + blog).

Improved Workflow

With my previous hosting provider, updates were too effortful. Original process -> modify html, test locally, sign in and upload to a hosting server via ftp or upload via hosting provider UI. With Gatsby + Github, updating after the initial setup is more straight forward/familiar and takes advantage of my daily dev workflow -> modify files locally and deploy via a push to Github.

Interactive, Data Driven Views

Building and testing interactive, data driven features where a hassle. The old website used custom html/css built from an era where libraries like React were not a thing. Gatbsy is based on React and brings the power of reactive design (see the filtering on the publications page). Being able to define a data model and render/update views by changing the underlying data model provides an really great workflow. This and a set of other features IMHO distinguishes Gatsby from similar frameworks like Next.js, Hugo, Jekyll and Nuxt.js.

Integrated Website + Blog

I needed a way to consolidate my work into a clear connected story. I have used Github pages to host a few demo applications in the past. The hope is that hosting the website on Github for my website is a chance to connect all these otherwise disjoint dots. By using my domain name victordibia.com as a custom domain name with Github Pages, urls like victordibia.github.io/handtrack.js/#/ now automatically resolve to https://victordibia.com/handtrack.js/#/.

The old website also did not have an integrated blog. In the recent past, I have used medium to write for the datascience audience. However, medium is changing as a platform, and the sheer volume of posts authored there has exploded (hence poor signal to noise ratio). This makes it hard to organize posts and content. By default, Gatsby supports blogs (more like generation of linked pages from static files) and provides quick start examples.

SSL

Github pages provides SSL out of the box and allows you to enforce HTTPS for all connections. This is great as my previous hosting provider did not provide this by default. Gets rid of the annoying connection not secure message my website used to have.

Free

I appreciate tools like Gatsby that are high quality - and free!

React(ive) Components Everywhere!

Did I forget to mention that the nicest part of the experience so far is the ability to build and embed React Components anywhere within the Gatsby website? To explore that, below is a React Component I built as part of the Anomagram demo which is a direct manipulation interface for visually specifying the architecture of an autoencoder.

import { ComposeModel } from " ../components/composeModel.js";
<ComposeModel />;

Right here in this blog post (using the import statements above), you can:

  • Add/Remove layers to the model architecture
  • Add/Remove units from each layer. (you can't train the model here in this blog post, but you can do that in the Anomagram demo, right in the browser!)

Go ahead and try it!

Encoder 4 Layers
Decoder 4 Layers
input units
9 units
6 units
4 units
3 units
2 units
3 units
4 units
6 units
9 units
output units

Getting it Done!

Gatsby

I learned to use React sometime in early 2019 (first project here .. cringe) and have found it to be an excellent tool for authoring interactive web experiences. As always, my approach to learning Gatsby was the learn on demand approach where I do a quick survey (quickstart on the documentation) and then deep dive into aspects as I need them (e.g. modifying gatsby-config.js, gatsby-node.js for backend processing such as extracting file modification dates, optimizing images with gatsby-image etc.). I also started out by searching for an open source template which I can customize to fit my needs.

I was able to get a skeleton going over a weekend.

  • Review Gatsby quick start documentation. I really recommend going through this section to understand the basics - how to setup your Gatsby dev environment, setup up pages, use plugins, query for data etc. If you are not familiar with React already, an introduction to react course is in order.
  • Hunt for a teamplate to start with! Gatsby offers a gallery of templates spanning websites for a tonne of use cases such as education, design portfolio, blogs etc. Jeff Jadulco's template worked great here (it is a personal website template and implements dark mode!).
  • Modify template - build custom layouts as needed. I mainly focused on building pages for my publications and projects and an underlying json data model to support them. It took about a week to really polish and finetune these sections.
  • Push to gh-pages!

Github (Pages)

Building a Gatsby project generates a set of static files (usually in the public folder) which can be then be pushed to Github and hosted on Github pages. Gatsby provides some guidance on how to do this. The one thing to note is to ensure you add pathPrefix to gatsby-config.js and correctly specify the name of the Github repo used to host your content if you are hosting on Github pages domain.

// package.json ...
"deploy": "gatsby build --prefix-paths && gh-pages -d public"

Final piece (optional) was to map Github to my website's custom domain. If you are using a custom domain, you might have to include a CNAME file in your gh-pages commit to ensure it always points to your custom domain. I do this by modifying the npm run deploy script command in package.json - to always copy my CNAME file to the public folder before deploying the gh-pages branch.

// package.json ...
"deploy": "gatsby build && cp CNAME public && gh-pages -d public"

And that's it.

Get in touch!

Interested in discussing topics at the intersection of Applied ML and HCI?

Feel free to reach out! Twitter, GitHub, LinkedIn

.