Karim Elnemr Logo

Karim Elnemr

March 31, 2022

Why I Create My Website Using Gatsby

Gatsby-purple-featuredimg.png

As part of my well-planned web development road map and learning journey, it was so important to me to present myself, my skill and what I learned once I'm able to.

So, right after I learned the basics and fundamentals of (The Internet, HTML, CSS, JavaScript, frameworks (React), Git, GitHub, package mangers, build tools) and I became confident enough, I decided to build my own website.

That’s will help familiarize with learning process challenges, improve problem-solving skills, faster mindset adaptation to programming industry and the most important is that starting a real project will dramatically accelerate the learning process and turn you rapidly from zero to a junior hero 😊.

Now back to the main topic, in this article I'm going to explain why I chose Gatsby to build my first project which is My own website.

What is Gatsby?

Gatsby is an open-source React based framework to build fast, secure, and powerful websites.

It is optimized for faster website build, faster content delivery, Integrations, accessibility, less vulnerabilities and better security, SEO-friendly websites and great developer experience.

It is suitable for generating Portfolio, Blog, Ecommerce or any other website supported by an amazing community and expansive ecosystem of plugins, themes and starters that help you get built and deployed a website in minutes.

Why Gatsby?

Now, let me break down the strongest points of using Gatsby.

Starting Gatsby Project

Gatsby has excellent documentation and tutorials, I highly recommend to head over to https://www.gatsbyjs.com/docs to discover more.

Gatsby has a Starters Library which is maintained officially or by the community includes multiple boilerplate and templates to start your project.

Its starter library has a lot of Gatsby sites with preconfigured functionality, set up and tools for different website uses and purposes. This makes it easy and very quick to kick start your idea.

Even If there is no starter that fits your website purpose, still you can use Gatsby’s default starter, structure your project, add required plugins and follow its use instructions.

Plugins

One of the most important things got me to start with Gatsby is its big Plugins Library contains thousands of different plugins which is maintained officially or by the community, making the developing experience with Gatsby very smooth and save a lot of time coding.

Dream of any functionality that you want to drop into your website, sourcing data, integrations, responsive images, dropping in analytics libraries, performance enhancements, style enhancement, and any other website functionality.

Flexibility

I read a lot of articles mentioning that Gatsby is an opinionated framework, but I doubt it, because Gatsby itself is built upon some of the fastest-growing web technologies today: React, GraphQL, and Webpack.

Gatsby has different rendering options to serve a website It can happen at build time (Static Site Generation - SSG), choose to defer building certain pages until the first time a user requests it (Deferred Static Generation – DSG) or during HTTP request (server-side rendering - SSR) which is extremely useful when you need to scale your project in the future.

Performance

"Instead of waiting to generate pages when requested, Gatsby pre-build pages" - Gatsby.

When the user accesses a page through an HTML file, the browser renders the content. Without any cache or JavaScript.
Using an anchor tag will load another HTML file when clicked.

As a result, the user might have to wait or worse, see a blank page while rendering the content.

But Gatsby uses powerful pre-configuration to build a website, provide enough content for the first render, looks for links with prefetch attributes to download them, creates a JavaScript runtime after HTML has loaded, minify all file, Generate responsive images and more...

This performance achieved by using webpack configuration, minification and unique filenames, reach Router, code split and cache, service workers, server-side rendering, intelligent image optimization, asset optimization, and data prefetching.

Gatsby cares about performance optimization so it's incredibly fast.

Data Handling

Gatsby uses GraphQL to enable page and Static Query components to declare what data they and their sub-components need.

Then, Gatsby makes that data available in the browser when needed by your components.

Gatsby can collect data from any number of sources (filesystem, spreadsheet, markdown, JSON, CMS, database, third party APIs),

then during the build time data is fetched and combined into a GraphQL schema with a static snapshot of all data your site needs.

Data returned by GraphQL comes back in the exact same shape that you asked for it, without having to travel across the network because it was already gathered at build time.

Since all data is combined in the data layer, it’s even possible to query multiple sources at the same time.

Your components can pull in whatever data they need from any source in the data layer, also GraphQL enables you to select only the data you need, not whatever an API returns.

GraphQL is a query language, invented at Facebook to help product engineers pull needed data into React components.

If you are not familiar with GraphQL don’t worry, I just discovered it when I started learning Gatsby and it took me a few days to fully understand it.

Search Engine Optimization (SEO)

SEO is a critical factor for your site to be noticed by users and perform will in search engines (eg. google).

And building your websites from scratch usually will have poor SEO and low performance compared to websites built with a framework like Gatsby.

With the help of Gatsby and react-helmet, you can easily add your meta data to your site pages such as page title, description, site name, image and alt text which helps search engines understand your content and when to show your pages in search results.

As I said before Gatsby cares about performance optimization, helping your site be lightning-fast by default, so no worry about performance at all.

Security

Gatsby’s serverless rendering generates static HTML at build time, which result a better security for a website.

So, No server, No reachable database and No sensitive customer data stored on the server means no malicious requests, DDOS attacks, or accidental exposure.

A Gatsby site’s attack surface is non-existent.

Progressive Web Apps (PWAs)

Progressive Web Apps is built to be fast and highly accessible across all devices, in all hardware and network context.

Then there are the three baseline criteria for a site to qualify as a PWA.

1- It must run under HTTPS

Running your site under HTTPS is a highly recommended security practice, no matter the content of your site.

Specifically concerning progressive web apps, running under HTTPS is a criterion for many new browser features that are required for Progressive Web Apps to work.

2- It must include a Web App Manifest

A Web App manifest is a JSON file that provides the browser with information about your web app, and makes it possible for users to save to their home screen.

It includes information like the Web App’s name, icons, start URL, background-color and more.

Gatsby provides a plugin interface to add support for shipping a manifest with your site — gatsby-plugin-manifest.

3- It must implement a service worker

A service worker provides support for an offline experience for your site, and makes your site more resilient to bad network connections.

Gatsby also provides a plugin interface to create and load a service worker into your site — gatsby-plugin-offline.

Gatsby recommend using this plugin together with the manifest plugin.

And for the third time and as I said before Gatsby is designed to provide the best performance possible, its performance features are a big part of supporting the progressive web app approach.

Final Thoughts:

Personally Gatsby gives Me that enough space for creativity as well as a solid control over my project and variety of solutions for a perfect result.

Gatsby is evolving rapidly and growing strongly, I really can't express enough how it's a futuristic framework, blazing fast, flexible, quite easy to learn and it doesn't get the hype which it deserves!

 

Thanks for reading!