In today modern website development right now, there many tools can we use, from these many choices, of course we must be able to choose what tools are good for use to use. In this article we will discuss a framework to create a static website with Gatsby JS, lets’s review below.
Introducing Gatsby JS
Gatsby JS is one of Static Site Generator (SSG) which compared to others, this framework is built with React JS, where React is one of most popular frontend frameworks at the moment. With that, Gatsby JS certainly has very good features compared to other SSG. Because It was built using React JS, of course, Single Page Application (SPA) is one of the advantages of this framework which is that we don’t need to do traditional reloading to switch pages, You can open the official Gatsby JS site here https://gatsbyjs.com.
Do I have an example of a website built using Gatsby JS?
Yes, of course, this article was made based on my experience and research on Gatsby JS, you can visit my portfolio website here https://dickaismaji.com, feel of speed experience 😆.
How does it work?
Gatsby will generate all pages into separate HTML, CSS, and JS file at build time. All the data needed by website is obtained during the build process by fetching it to the data source, then it will generate HTML, CSS and JS file, of course with React JS which can make the website run super fast, and that is the main static rendering of the Gatsby JS.
What can you make by using Gatsby JS?
Deciding to choose Gatsby JS has a correlation with the website are you going to create. There several case of websites that you can create:
- Personal Website
- Blog website
- JAM stack website
- Landing page
- Agency website
- Super fast business page
- and others…
You can visit example of website that was created on official Gatsby JS page https://www.gatsbyjs.com/showcase/
Why you should using Gatsby JS?
Speed
On the official Gatsby JS page it claims that “Maybe it’s time your CMS had a faster frontend”, and also 60% faster page load, 10x faster build time, 100% faster content creation. and I tried to do a test using GT Metrics on my website, and the results are very good, the results obtained are Grade A which is the best level of website performance.
Search Engine Optimization (SEO)
Since Gatsby JS is a static site generator, of course it will generate each page into its own html, css, and js files, which can give optimal results to get top rankings in search engines. and also gatsby js allows us to optimize in code with many techniques and also gatsby provides plugins that can help with this.
Plugins
There are many amazing plugins provided by gatsby js to help in the development process and of course to help build a website that has a good quality, as in normal projects, you can install the plugin with npm install or yarn add if using yarn. some useful plugins like:
- gatsby-plugin manifest: Can easily turn your site into a PWA.
- gatsby-image: For image optimization on the site.
- gatsby-plugin-sitemap: Generates a sitemap for your site, but this plugin only runs in a production environment.
- gatsby-plugin-offline: Makes your site run on poor networks or even offline.
- gatsby-plugin-google-analytics: this plugin lets you easily add google analytics.
You can visit the following link to find out the plugins provided by Gatsby JS https://www.gatsbyjs.com/plugins.
React Based
If you are a React Js Developer, maybe Gatsby Js will suit you, because it is built with react js, so of course it supports various libraries that react js can use as well. the react community is very large so there are lots of libraries and components that already exist with copy and paste .
Markdown Support
For now in making a static website, it’s too complex if you want the same page but only different content, as is the case on blog sites, therefore Gatsby also provides convenience to create pages just by writing a very simple markdown. Every time you want to create a new page or a new article, you only need to create a file with an .md extension and write the content in markdown language and then push the code, during build time, the file will be converted into a static page, easy enough?
Why not to using Gatsby JS ?
Slow build time
As a website develops. there should also be many pages, therefore if there are too many pages, it will take a lot of time for Gatsby JS to generate pages.
Not suitable for complete dynamic website
If your website has pages whose content changes all the time, I don’t recommended Gatsby JS to handle that. Gatsby is more suitable for websites such as blogs, portfolios, and landing pages. Instead of using a SSG, it more better to use a framework that is not specifically only for SSG, such as Next JS, which has the ability to perform server-side rendering and also has SSG features.
Conclusion
There are so many choices of tools/framework to build a website, and Gatsby JS might be your solution if you want a fast and powerful website. For those of you who used React JS, it will definitely be easier to use Gatsby JS, and for those who are not familiar with React JS, of course it takes time to learn it first.
If there is a writing error or there is an error in the content, feel free to write comment below 😅.
