This issue recommends a free and open source framework based on React that helps developers build super-fast websites and applications.

Gatsby It combines the control and scalability of dynamically presented sites with the speed of static site generation, creating a completely new network of possibilities.

Gatsby characteristics

• Load data from anywhere. Gatsby pulls data from any data source, whether it’s a Markdown file, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Load the data using the source plug-in, and then develop it using the unified GraphQL interface of Gatsby.
• Go beyond static websites. Get all the benefits of a static website without any restrictions. The Gatsby site is a full-featured React application, so you can create high-quality, dynamic Web applications, from blogs to e-commerce sites to user dashboards.
• Select your rendering options. In addition to static site generation (SSG), you can choose alternative rendering options on a page basis, namely delayed static generation (DSG) and server-side rendering (SSR). This type of fine-grained control allows you to optimize performance and productivity without sacrificing one for the other.
• Performance. By default, pass your performance audit. Gatsby automatically performs code splitting, image optimization, inline key styles, lazy loading, prefetching resources, and more to ensure your website is fast – no manual adjustments required.
• Use a modern stack for each site. No matter where the data comes from, Gatsby websites are built using React and GraphQL. Build a unified workflow for you and your team, whether the data comes from the same backend or not.
• Host on a Scale for Pennies. Gatsby sites do not require a server, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby websites can be hosted completely free on Gatsby Cloud and other similar services.

Start to use Gatsby

1. Install GatsbyCLI.

npm install -g  gatsby-cli

2. Create a Gatsby site from the Gatsby initiator.

Set up your Gatsby blog in a single command:

# Create a new Gatsby site using the interactive setup wizard 
# Name it: My Gatsby site 
gatsby new

3.develop a pattern to start the site.

Next, go to the directory of the new site and launch it:

cd my-gatsby-site/
gatsby develop

4. Open the source code and start editing!

Your site is now running at http://localhost:8000. Open the my-Gats-site directory in the code editor of your choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

Operation Guide

Local development

Set up your local environment: Start a new project, use Gatsby’s CLI and development server, customize JavaScript Settings, and debug common errors.

Route

Create unique and template-based pages. Create a shared page layout to include elements such as headers and footers. Write content in JSX, markdown, and CMS.

Style

Use your favorite style system in Gatsby: standard CSS, preprocessors like Sass, CSS-in-JS solutions like Emotion, or emerging methods like Tailwind.

Images and media

Pull images, videos, GIFs, and other media into your website. Optimize page performance and user experience with Gats-Image.

Plugins and themes

Access Gatsby’s rich ecosystem of plug-in features, from CMS integration to image optimization.

Purchasing data

Use source plugins (integrations) to pull content and data from wherever it resides (CMS, file system, spreadsheet, database) into Gatsby and make it available for the pages and components of your website.

Query data

After extracting data into Gatsby, your pages and components specify the data they access through GraphQL queries.

Common features

From e-commerce and search to SEO and A/B testing, add rich features and interactions that users want and controls and optimizations that business stakeholders need.

Render options

Use the render options to tell Gatsby when to build a specific page for your website. Choose between static site generation, delayed static generation, or server-side rendering.

Plugins and themes

Gatsby has a rich ecosystem of plug-ins, which can be used through plug-ins, from CMS integration to image optimization. Themes allow pages and sections to be reused across multiple sites.

Create a universal plugin

The idea of universal plugins is to place more emphasis on the composition of the plugins rather than on specific labels (source, converter, local) chosen based on functionality. As you can see in the What Is a Plug-in documentation, a plug-in is a piece of software that acts as an add-on and provides additional functionality to a Gatsby site.

The plug-in contains a file, usually in the project root, called package.json- a file that contains various metadata related to the project. The package.json file is also used to provide npm with information that identifies the project and allows npm to handle the project’s dependencies.

To initialize a package.json for your project, run the following command:

npm init

After running the command, you will see a series of options listed in the command line interface (CLI). The content you select is stored in your package.json, which contains some of the files Gatsby looked for in the plug-in.

What happens to universal plugins?

In the general plug-in, the Gats-node.js file allows the use of the gatsby node API. These apis, such as createPage, createResolvers, and sourceNodes, are used to operate nodes in the Gatsby site. Node is the smallest data unit in Gatsby. You can create a node using the createNode operation.

You can use these apis to perform functions, Gats-node.js for example:

• Load API key
• Send call to API
• Create Gatsby node using API response
• Create a single page from a node

Generic plug-in example

sourceNodes is a lifecycle API that plug-ins can use to create nodes. A sourceNodes example of how to implement a function is shown below:

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) =>  {
const nodeData = {
title: "Test Node",
description: "Testing the node ",
}
const newNode = {
... nodeData,
id: createNodeId("TestNode-testid"),
internal: {
type: "TestNode",
contentDigest: createContentDigest(nodeData),
},
}
actions.createNode(newNode)
}

The above code block creates a Node that “Test Node” calls from the title argument. If this process is successful, restarting the server will result in allTestNode queries
http://localhost:8000/___graphql, libraries like axios can be used to handle calls in the Gats-node.js file.

Using Gatsby theme

Gatsby themes allow you to break down your website into logical units. Like component libraries, they are an abstraction that allows a team to own and publish a package that is pulled into one or more separate websites. For example, a team can have a product page theme for multiple e-commerce sites. Other teams might have a blog theme, a homepage theme, or a store theme, all as separate packages. Themes allow your Gatsby website architecture to match your team structure.

Installation subject

As with any Gatsby plugin, Gatsby themes are Node.js packages, so you can install them in Node using npm or yarn just like any other published package, including local workspace.

For example, gats-theme-blog is the official Gatsby theme used to create a blog.

npm install  gatsby-theme-blog

Subject options

Depending on the theme, there may be a theme option gats-config.js that can be configured.

For example, gats-theme-blog can take a number of different options. All of this is recorded in the topic’s README file.

module.exports = {
plugins: [
{
resolve: `gatsby-theme-blog`,
options: {
/*
- basePath defaults to `/`
*/
basePath: `/blog`,
},
},
].
}

—END—

Open Source license: MIT license