The Start of Great Gatsby.js
During my time at General Assembly, I learned a number of different javascript frameworks and can build a full stack production ready web app, but just because I can develop full-stack doesn’t mean that I want to. What I do enjoy is the front end. My previous workflow would always be to knock the backend work out so I could then move on and spend my time on the front end. When we started learning React.js and client-side rendering became available, I thought I was in heaven. React Router made defining and creating routes as simple importing and then using it just like any other component in react:
That worked, but I still felt like there had to be an easier way. And that’s where Gatsby.js comes in.
Gatsby.js is an open-source static website generator that uses the front end framework react, Webpack, and GraphQL. At the moment Gatsby.js is very popular and for good reason. When using Gatsby you not only get the benefits of the React’s framework, but also SEO, page load speeds, it’s markdown usability and much more.
The advantage with Gatsby.js is, it gets its data and fetches the files necessary to generate the HTML, CSS, and JS for the webpage all during the build time itself. This results in crazy fast static rendering of web pages.
The speed doesn’t stop there either, deploying to the GatsbyCloud is lightning fast as well, the total build and deploy time for my first website was less than thirty seconds. Simply connect with Github, pick your repo and your all set!
Gatsby’s routing system is simply too easy. All you need to do is create a new JavaScript file in your pages directory and youre set. The route is automatically configured and created, you can then spend more time creating the content for the route.
Similarly to React has Plug-ins that are open source and can be installed to achieve various tasks when developing a web page. After installing the plug in and requiring it in the gatsby-config.js, it can be used throughout your whole project. Some of the plugin’s i’ve found useful so far are:
One of the best, if not the best things about Gatsby.js is its documentation and starter example collection. The documentation to get started is straightforward and easy to follow. Once you have it completed, there are hundreds of examples and template projects to go through. Each template list the plug-in’s and modules used. This gives you a comprehensive collection of the information you need to dive in and get your hands dirty. I loved how fast I was able to go from reading documentation to creating my own project (and with skipping youtube tutorial hell completely!)
For most websites Gatsby.js will most likely be what I end up using from now on, but there are cases where it shouldn’t necessarily be used.
- If you have a lot of content on your site, your just going to lose all that gained lightning fast speed
- When using dynamically generated routes, you wont be able to take advantage of static pages.
- Completely dynamic web pages, Gatsby is more suited for mostly static pages like blogs, portfolio pages, business and landing pages.
There’s definitely a lot to consider when choosing what to build your next project with, but for me with its added benefits of statically generated pages and diverse ecosystem of plug-ins is an easy choice for me.
