Moving to GatsbyJS

What I learned moving my personal website to GatsbyJS

Sanjay Nair
May 21, 2019 · 6 min read

There are lots of tools to build websites freely available to download and use online. You might want to go at it with just plain HTML, CSS, and some JavaScript. This is how I built my first personal website and unless you’re trying to get fancy with frontend features or content, this might have worked well for you.

Overtime, I got the itch to move my website development to something a little more robust in terms of tooling. Not so much because the content there was complex enough to merit a full-fledged frontend framework, but more so I could have a place to practice my web development skills with some modern frameworks, tools, and abstractions. The web development landscape moves so fast, I wanted to make sure I had my own sandbox to experiment and learn easily.

Static Site Generators

I found that static site generators fit my use-case perfectly. In short, I would be able to take advantage of the modern features of a frontend framework during development and publish plain HTML, CSS, and JS to serve to clients. Since I didn’t expect to have any dynamic content on my site, there would be no restriction on what I could build. Moreover, hosting a static site is a lot simpler, as platforms like Github Pages provide easy ways to serve static content for free.

NuxtJS : Moving Beyond HTML/CSS/JS

While researching some popular static site generation tools, I came across NextJS. It is developed and maintained by the Zeit team and provided a full featured static site generation solution. Just what I was looking for. The one tiny issue was that it leveraged React.

After some more stubborn digging, I came across NuxtJS, which unashamedly advertised itself as NextJS with a fronted by Vue instead of React. I happily picked it up and was on my way to modern web development land.

Once I was happy with an initial version, I generated my static assets and pushed it up to my Github repo. Like I mentioned before, Github has excellent support for hosting static sites. Their documentation about Github pages, tight integration with repos, and the gh-pages tool makes it effortless to develop and host static sites.

Website V2 DONE. As I expected, it was a LOT nicer to build having modern tools and features like hot-reloading and bundling available to me. I had the modern web sandbox I was looking for.

GatsbyJS : The New and Shiny

Fast forward a few weeks and I’m hearing some more buzz about Gatsby around the web and among other devs. There was a full-day Gatsby workshop for beginners happening at my workplace that I was interested in signing up. Normally I preferred diving into new frameworks on my own time, but I figured this was an easy jumpstart to something that was clearly picking up steam in the community. There had to be something there I was missing out on, right? After getting a quick intro to the framework, we did some hands on development with Gatsby, and that’s when I finally saw what all the hype was about.

Plugins

Like I said before, the site I built was really quite simple, nothing more than a landing page with links to external sites with my other content. However, Gatsby plugins sparked some cool ideas for enhancements to what I already had. For example, instead of just providing a link to my profile on Medium, I could drop in the gatsby-source-medium plugin with some minimal configuration and I could now have my site automatically display previews of my latest published content.

Similarly, I never thought about how I didn’t integrate Google Analytics into my site to track user traffic. While integrating Analytics is already easy enough, it doesn’t get easier than npm installing gatsby-plugin-google-analytics and dropping a tracking id into your Gatsby config. The framework takes care of the rest during site generation.

Finally, the user experience of browsing through their plugin repository is top notch. Every one links to an info page with easy access to the relevant Github repos in case you need to dive some code or submit an issue.

Progressive Web App Features

Faster load times and more responsive behavior are the main claims to fame in my opinion. Dan Abramov from the React team called this out about the ReactJS site and its freaky fast performance.

Conversion: The Developer Experience

Routing between pages is handled implicitly. If you drop a home.jsx file into your src/pages directory, Gatsby will build it into the /home route automatically. CSS and other static assets like images and build in automatically from the static directory, and Gatsby does a great job bundling and minifying everything behind the scenes for efficient delivery to the client. I only had one page to worry about, and this model was just like Nuxt, so there was no major things to learn here.

Switching my site over to Gatsby basically out of the box provided me with a pretty significant boost in web performance as measured by Google’s Lighthouse analyzer. I tweeted by experience as such.

More and more

  • GraphQL support: Basically anything data-related in your application can be accessed through a full GraphQL server running in your development environment. The Medium plugin I mentioned earlier is driven off this.
  • CMS Integration: I’d like to eventually move my site to a BYOF or Bring Your Own Frontend system where a managed platform could host and serve all my data and API needs while my Gatsby site could continue to run statically. Netlify and Drupal and a couple of these on my radar.

Suffice it to say, I have no regrets converting to Gatsby. I’m pretty convinced the hype was real. Gatsby is here to stay as a remarkably solid choice for modern static and progressive web app construction.

I’m looking forward to improving my site with the suite of tools and plugins offered by Gatsby and well as the fresh developer experience of working with it as my static site framework.

If you have any thoughts or suggestions, please let me know on Twitter. Also keep an eye on my website for upcoming additions!

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store