The Great Gatsby(JS)

Recently, I’ve had experience with using the static site generator GatsbyJS for creating a portfolio site as well as a simple company site, and I have become a quick convert of the framework. If you find yourself needing to build a static website, look no further than GatsbyJS for fast performance, great SEO, and easy usability for non-technical editors or creators who will be managing the content after deployment. If you’re unsure of whether you’re building a dynamic or static website, examples of static sites include portfolios, company websites, blogs — basically, any site that has a predictable number of pages and unchanging content, and one in which a complex server setup with databases is not required. GatsbyJS loads only necessary JavaScript, HTML, CSS, and prefetches resources for the other pages to which the user can navigate, making for fast load times and a smooth user experience.

static website vs dynamic website

Built on React and GraphQL, the learning curve for setting up a GatsbyJS powered site is insignificant. You’ll be working with mostly the same UI principles as any React app, using components, and relevant CSS and HTML standards. For a general introduction to the framework, this post summarizes the valuable concepts and tools at play with a GatsbyJS build.

(The Gatsby how-to guides and tutorial are very helpful and easy to follow, and I recommend you to read more if you are considering using Gatsby for the first time.)

GraphQL

GraphQL is a query language and when used with Gatsby, allows you to access your data and express your data needs. If you’re curious as to why there is such a need in a simple site that Gatsby generates, check out GatsbyJS’ documentation here.

Structure

After creating a new Gatsby site from the command line, you may see a similar structure in your new project as the following:

The main folder worth mentioning for a high-level overview is the src folder, which contains the pages and templates folders as well as a custom configuration of default .cache/default_html.js.

What’s neat here is that Gatsby generates routes under the hood for the components included in src/pages — they automatically become their own page with paths based on their file name. For instance, if you have an about component exported from src/pages/About.js, once you run gatsby develop (to start the development server), the user can navigate to ‘localhost:8000/about’ and find the about component rendered to the screen. Again, Gatsby docs go into greater detail.

Plugins

Plugins are simply packages that can integrate services for your site — they include various CMS (Content Management Systems) options, design tools, analytics tools, and many more.

Starters

Starters provide you with a default working site that you can customize and modify to your liking and need. Checkout the available templates for a faster development process at the get-go.

Deploying and Hosting

I used Netlify for a CMS and hosting service, and also bought my domain name through the site. Netlify offers continuous deployment (you can also revert back to a previous version as well) after pushing to your Github repository from your local machine (you will have to link your Github beforehand, as part of the setup). Install the Netlify CMS plugin with the following command:

These are just a few features of Gatsby that I think make it worthwhile for its simple solutions and integrations, ultimately another great tool for automating a process that will save you time and heartache in the end.

full-stack developer exploring how software can solve real-world problems | https://sarabastian.com/

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