Static internet pages have made a comeback in recent times as a result of their pace, protection, and ease. One of the crucial major apparatus for building static web pages today is Gatsby, a blazing-fast Static Web site Generator (SSG).
Whether or not or now not you’re a web developer looking to create a private weblog, a portfolio website, or a industry web site, Gatsby will can help you achieve your objectives. This entire knowledge takes you all through the process of making static websites with Gatsby. It covers the entire thing from the basics to complicated topics.
Understanding Static Web sites
Static web pages are web pages containing pre-rendered HTML, CSS, and JavaScript knowledge. By contrast to dynamic internet pages, they don’t rely on server-side processing for each request. As an alternative, all of the content material subject material is generated ahead of time and served right away to the individual’s browser. This implies supplies an a variety of benefits:
- Pace: Static web pages load in brief since there’s no server-side processing.
- Protection: And now not the use of a server-side code execution, static web pages are a lot much less liable to protection threats.
- Scalability: It’s easy to cache and distribute static web pages via Content material subject material Provide Networks (CDNs).
- Simplicity: They’re easier to develop, deploy, and care for.
Now that what static web pages are and their benefits let’s dive into Gatsby.
What Is Gatsby?
Gatsby is an open-source framework in keeping with the React JavaScript library that simplifies the process of making static internet pages. It combines the ability of React parts with GraphQL for info keep an eye on, making it an excellent variety for developers of all levels. Proper right here’s why Gatsby stands out:
- Blazingly Fast: Gatsby optimizes your website online for pace using tactics like code splitting and lazy loading, resulting in near-instantaneous internet web page such a lot.
- Flexible Data Sourcing: It should smartly provide knowledge from reasonably a large number of places, in conjunction with Markdown knowledge, APIs, and databases.
- Rich Plugin Ecosystem: Gatsby’s in depth plugin ecosystem allows you to prolong its capacity with out issues.
- search engine marketing and Potency: Gatsby automatically generates optimized HTML for upper search engine marketing and serve as.
Getting Started With Gatsby
To watch at the side of this data, you are going to have:
- Elementary understanding of HTML, CSS, and JavaScript
- Elementary knowledge of React
- Node.js and npm (Node Package deal Supervisor) or yarn installed for your computer
To get started with Gatsby and create a mission, you’ll use one of the crucial a very powerful many examples throughout the Gatsby Starter Library or create a mission from scratch.
For this data, let’s use the reliable hi there international starter for GatsbyJS as it gives us a certain mission and now not the use of a plugins or additional knowledge.
- First, arrange the Gatsby CLI for your computer thru operating the following command:
npm arrange -g gatsby-cliRun gatsby --version to make sure if the arrange is successful.
- Next, navigate into the folder you wish to have to create your mission and run the following command:
npx gatsby new https://github.com/gatsbyjs/gatsby-starter-hello-worldTrade above to the most well liked identify for your mission.
- Once that could be a hit, navigate into the mission folder and get began the improvement server:
cd
gatsby developThe local development server gets began at http://localhost:8000, where you’ll get admission to your Gatsby website online.
Understanding Gatsby Report Development
While you open your mission in a code editor, you’ll see the following development:
/
|-- /public
|-- /src
|-- /pages
|-- index.js
|-- /static
|-- gatsby-config.js- /public: This record accommodates the output of your Gatsby assemble process. It’s where the generated HTML, CSS, JavaScript, and other assets reside.
- /src: That’s the middle of your Gatsby mission, where you’ll spend most of your time. It accommodates reasonably a large number of subdirectories and data:
- /pages: That’s the position all pages for your mission are stored. Each and every JavaScript record correct right here corresponds to a route for your web site.
- /static: This record is used for static knowledge that you want to include for your website online, similar to images, fonts, or downloadable knowledge. The ones knowledge are served as-is and won’t be processed thru Gatsby.
- gatsby-config.js: This configuration record is where you define reasonably a large number of settings for your Gatsby website online. You’ll specify plugins, website online metadata, and other configurations correct right here.
Rising Pages and Components
In Gatsby, building web pages is a straightforward process. Any JavaScript record you create throughout the /src/pages folder automatically turns right into a internet web page with its corresponding route, as a result of Gatsby’s automated internet web page era.
You’ll create as many pages as you want for your web site thru together with additional JavaScript knowledge to the /src/pages folder. For instance, you’ll create an about.js record for an “About” internet web page.
While you’ll create particular person JavaScript knowledge for each internet web page right away throughout the /src/pages folder, it’s moreover imaginable to organize your pages further. You’ll create subfolders to workforce related pages. As an example, likelihood is that you’ll create a blog folder to organize your whole blog-related pages.
For this mission, that’s what the internet web page development will appear to be:
|-- /src
|-- /pages
|-- about.js
|-- index.js
|-- /blog
|-- index.jsThe use of JSX for Pages
Since Gatsby is built on height of React, its pages and portions are written in JSX (JavaScript XML). JSX is a syntax extension for JavaScript that allows you to define the development and construction of your particular person interfaces in a really readable and expressive approach.
As an example, you’ll create the content material subject material for your Area internet web page (index.js) like this:
import React from 'react';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
);
}Linking Pages in Gatsby
To create a link to each different internet web page, you’ll use the Link aspect as follows:
import React from 'react';
import { Link } from 'gatsby';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
to="/about">About Us
to="/blog">Blog
);
}Throughout the example above, we’ve imported the Link aspect from gatsby and used it to create links to the “About Us” internet web page and a blog. The “About Us” internet web page, as an example, has the route /about. When consumers click on on on the “About Us” link, they’re going to be taken to the /about internet web page.
To create links to external internet pages, you’ll use not unusual anchor () tags with the href function:
import React from 'react';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Learn extra
);
}In this case, the link opens the outside web site in a brand spanking new browser tab as a result of the objective="_blank" and rel="noreferrer" attributes.
Rising Components in Gatsby
Gatsby’s component-based construction allows you to create reusable building blocks for your web pages. As an alternative of duplicating code all through a couple of pages, you’ll encapsulate now not peculiar portions into portions, making your codebase additional organized, maintainable, and atmosphere pleasant.
Suppose your Homepage’s code accommodates the navigation section, primary content material subject material, and a footer:
import React from 'react';
import { Link } from 'gatsby';
export default function Area() {
return (
to="/">Area
to="/about">About
to="/blog">Blog
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Learn extra
Hosted with ❤ thru Kinsta's{' '}
href="https://kinsta.com/static-site-hosting">
Static Internet web site Website hosting
.
);
}Believe having to replicate the navbar and footer code for every internet web page for your website online. That’s the position the ability of portions comes into play. You’ll create reusable portions for the navbar, footer, and every piece of code that can be repeated all through a couple of pages and portions.
To artwork with portions in Gatsby, create a portions folder throughout the src folder to store all portions. Next, create your portions, e.g. Navbar.js and Footer.js. Throughout the Navbar.js record, separate the code this way:
import { Link } from 'gatsby';
import React from 'react';
const Navbar = () => {
return (
);
};
export default Navbar;And in addition your Footer.js:
import React from 'react';
const Footer = () => {
return (
Hosted with ❤ thru Kinsta's{' '}
href="https://kinsta.com/static-site-hosting">Static Internet web site Website hosting
.
);
};
export default Footer;Next, import your portions knowledge into your pages or portions and use this way:
import React from 'react';
import Navbar from '../portions/Navbar';
import Footer from '../portions/Footer';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Learn extra
);
}Rising Structure Phase
A now not peculiar observe in web development is to create a structure ingredient that encapsulates the overall development of your website online. The construction aspect most often accommodates portions that appear on every internet web page, similar to headers, footers, navigation menus, and sidebars.
Create a brand spanking new record known as Structure.js for your /src/portions folder. Next, define the construction development. For this data, the construction development will highest include the navbar and footer:
import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
const Structure = ({ kids }) => {
return (
className="content material subject material">{kids}
);
};
export default Structure;In this construction aspect, we use the portions to wrap the internet web page content material subject material (provided as kids). To use the construction aspect for your pages, import it and wrap your internet web page content material subject material with it. For instance, for your index.js internet web page:
import React from 'react';
import Structure from '../portions/Structure';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Learn extra
);
}By the use of using a construction aspect, you be sure a relentless development and glance all through your whole pages while keeping your code organized and maintainable. It’s an excellent strategy to arrange the standard portions of your website online effectively.
Styling Pages and Components In Gatsby
Styling your Gatsby website online is flexible and allows you to use reasonably a large number of approaches, in conjunction with plain CSS, CSS-in-JS, or CSS preprocessors like Sass. Let’s learn how to create same old and module styling for pages.
CSS Styling
In Gatsby, you’ll merely create a CSS record and link it to regardless of aspect or internet web page, and it is going to artwork utterly well. For instance, you’ll create a varieties folder throughout the src folder and then create a international.css record in conjunction with your CSS code.
For instance, listed here are some elementary international stylings for the portions created earlier:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=trade');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
peak: 200px;
align-items: heart;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: heart;
margin: 100px 0 20px;
}Throughout the code above, you’re importing the Poppins font from Google Fonts and then defining elementary varieties to make use of to your whole portions.
Next, import the CSS record into the portions you wish to have to style, then again for this mission, you’ll add it for your Structure aspect so it applies globally:
import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../varieties/international.css';
const Structure = ({ kids }) => {
return (
className="content material subject material">{kids}
);
};
export default Structure;Module CSS Styling
CSS Modules can help you scope your varieties to express portions or pages. This prevents style conflicts and makes it easier to care for your code. Throughout the varieties folder, create your CSS modules using the format .module.css and add the precise style to the record.
For instance, create area.module.css for the homepage and add the following code:
.home_hero {
display: flex;
justify-content: heart;
align-items: heart;
flex-direction: column;
text-align: heart;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6E7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width:700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}To use module CSS varieties for your Gatsby internet web page or aspect, import the categories from your CSS module as an object at the height of your internet web page or aspect record and use this way:
import React from 'react';
import Structure from '../portions/Structure';
import * as varieties from '../varieties/area.module.css';
export default function Area() {
return (
Enjoy Static Internet web site Website hosting With Kinsta StSH.
Fast, Secure, Unswerving Website hosting Answer.
Learn extra
);
}The usage of Static Data in Gatsby
In Gatsby, static knowledge test with assets like photos, fonts, CSS knowledge, and other property which will also be served right away to the client’s browser without any server-side processing. The ones knowledge are added to the /static record at the root of your mission.
For instance, for many who add an image kinsta-logo.png to the /static record, you’ll display it for your aspect like this:
import { Link } from 'gatsby';
import React from 'react';
const Navbar = () => {
return (
);
};
export default Navbar;Gatsby automatically resolves the ones relative paths to the correct URL when your website online is built. Later in this knowledge, you’ll learn how to optimize photos in Gatsby.
Plugins and Integrations
Gatsby has a rich ecosystem of plugins that can prolong its capacity. You’ll to seek out plugins for search engine optimization, analytics, image optimization, markdown transformation, and much more. Putting in place and configuring plugins is straightforward, and they can a really perfect deal fortify your website online’s purposes.
In this knowledge, we use 4 plugins:
- gatsby-transformer-remark: This plugin allows you to develop into Markdown knowledge into HTML content material subject material, making it easy to create and arrange blog posts, documentation, or any text-based content material subject material.
- gatsby-transformer-sharp and gatsby-plugin-sharp: The ones plugins artwork together to optimize and manipulate photos for your Gatsby mission.
- gatsby-source-filesystem: This plugin lets you provide knowledge from your mission record and cause them to available to query with GraphQL.
To use the ones plugins for your Gatsby mission, run the following command for your mission’s root record to position in them:
npm arrange gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystemNext, configure them for your gatsby-config.js record. Proper right here’s an example of easy methods to organize the plugins:
module.exports = {
plugins: [
// ...other plugins
// Transform Markdown files into HTML
'gatsby-transformer-remark',
// Optimize and manipulate images
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
// Source files from your project directory
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
};Two gatsby-source-filesystem configurations are created, pointing to two folders: posts and photos. Posts will store some markdown knowledge (blog posts) that can be transformed with gatsby-transformer-remark, and images will store photos for the blog and other photos you wish to have to optimize.
Always take into account to restart your local development server while you’re making changes to the gatsby-config.js record.
Rising Blog Posts
Now that we’ve configured our plugins create a posts folder throughout the src record and then create two Markdown knowledge with the following content material subject material:
post-1.md:
---
identify: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its choices."
featureImg: ../photos/featured/image-1.jpeg
---
Welcome to the sector of Gatsby! In this submit, we will introduce you to the basics of Gatsby and its tricky choices.And post-2.md:
---
identify: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Uncover easy methods to optimize photos for your Gatsby mission."
featureImg: ../photos/featured/image-2.jpeg
---
Images play a a very powerful serve as in web development. In this submit, we are going to dive into easy methods to optimize photos in Gatsby using plugins.The ones Markdown knowledge contain frontmatter with metadata regarding the blog posts, in conjunction with titles, dates, slugs, descriptions, and movie paths.
Querying in Gatsby With GraphQL
Gatsby uses GraphQL to query and retrieve knowledge for your web site. GraphQL is an excellent query language that allows you to request exactly the guidelines you want, making it atmosphere pleasant and flexible. Let’s learn how to query knowledge in Gatsby using GraphQL.
While you run gatsby develop for your terminal, you’ll understand that, in conjunction with the link gatsby-source-filesystem, which opens your mission on the internet, you moreover see the http://localhost:8000/___graphql URL. This URL provides get admission to to the GraphiQL editor for your Gatsby mission.
While you open the editor, you notice this interface:
You’ll query as so much information about your website online from this editor. Then again because you’ve were given created markdown knowledge and completed all of the configurations throughout the gatsby-config.js record. Let’s query the Markdown knowledge and their content material subject material thru operating the following query throughout the editor:
query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
identify
slug
description
}
id
}
}
}This query fetches knowledge from all Markdown knowledge using allMarkdownRemark. It retrieves the identify, slug, and description from each record’s frontmatter and also their id.
After writing your query, click on at the “Play” button (a right-facing triangle icon) to execute the query. The effects could be displayed on the right-hand aspect of the editor.
You’ll then use GraphQL to query the Markdown knowledge for your portions or pages. To query this data throughout the blog/index.js internet web page, first import graphql from gatsby. Then, at the bottom of the JSX code, add the following:
export const query = graphql`
query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
identify
slug
description
}
id
}
}
}
`;Throughout the code above, we use the graphql tag to create a GraphQL query known as query. That’s what your blog/index.js record should appear to be:
import { graphql, Link } from 'gatsby';
import React from 'react';
import Structure from '../../portions/Structure';
import * as varieties from '../../varieties/blog.module.css';
const blog = ({ knowledge }) => {
const posts = knowledge.allMarkdownRemark.nodes;
return (
Blog
{posts.map((submit) => (
{submit.frontmatter.identify}
{submit.frontmatter.description}
))}
);
};
export default blog;
export const query = graphql`
query BlogList {
allMarkdownRemark {
nodes {
frontmatter {
identify
slug
description
}
id
}
}
}
`;Throughout the code above, you get admission to the query result by means of the knowledge prop for your aspect. Next, loop all through the posts knowledge using the map() JavaScript approach and then display the titles in a list.
To avoid errors, create a blog.module.css record throughout the varieties folder and add the following code:
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
hollow: 20px;
}
@media (max-width:700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all .5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
Understanding Templates and Generating Dynamic Pages In Gatsby With GraphQL
In Gatsby, templates and dynamic pages are crucial concepts that enable you create flexible and data-driven internet pages. Templates can help you define the development and construction of pages, while GraphQL helps you fetch knowledge to populate the ones templates dynamically.
Creating a Blog Submit Template
Let’s say you want to create a blog where each blog submit has a relentless development, in conjunction with a reputation and content material subject material. You’ll create a BlogDetails template to stipulate this construction. Throughout the src folder, create a templates folder, then create a blog-details.js record:
import React from 'react'; import Structure from '../portions/Structure'; import * as varieties from '../varieties/blog-details.module.css'; const BlogDetails = () => { return (); }; export default BlogDetails;![]()
Establish
className={varieties.html} dangerouslySetInnerHTML={} />In this example, the
BlogDetailstemplate defines the development for particular person blog posts. Next, let’s use GraphQL to fetch knowledge for specific blog posts and transfer it as props to this template.Generating Dynamic Pages
To generate dynamic pages, create a gatsby-node.js record for your mission’s root record. This record allows you to define how pages are created.
On your gatsby-node.js record, use GraphQL to query the guidelines you want to use for dynamic pages. For instance, you probably have Markdown blog posts, you’ll query their slugs:
const path = require(`path`); exports.createPages = async ({ graphql, actions }) => { const { knowledge } = look ahead to graphql(` query Articles { allMarkdownRemark { nodes { frontmatter { slug } } } } `); knowledge.allMarkdownRemark.nodes.forEach((node) => { actions.createPage({ path: '/blog/' + node.frontmatter.slug, aspect: path.unravel('./src/templates/blog-details.js'), context: { slug: node.frontmatter.slug }, }); }); };In this example, we query the slugs of all Markdown posts and create dynamic pages for each submit using the
BlogDetailstemplate. The context object is used to transport knowledge to the template. This knowledge (slug) is what the template uses to fetch other knowledge that aligns with the slug.Let’s first understand how image optimization works in Gatsby forward of together with a GraphQL query to the template internet web page.
Image Optimization In Gatsby
Earlier, you installed and configured the
gatsby-transformer-sharpandgatsby-plugin-sharpat the side ofgatsby-source-filesystemfor sourcing photos.With those plugins, you’ll query and optimize photos with GraphQL. Proper right here’s an example of easy methods to query and display an optimized image using
gatsby-plugin-sharp:export const query = graphql` query { record(relativePath: { eq: "example.jpg" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } `;Throughout the code above, you’re querying an image named example.jpg from the photos provide and using the
fluidproperty of the queried image to turn it with responsive, optimized rendering.You’ll then import
Imgfromgatsby-imagefor working with optimized photos.import React from 'react'; import { graphql } from 'gatsby'; import Img from 'gatsby-image'; const ImageExample = ({ knowledge }) => { const { fluid } = knowledge.record.childImageSharp; return (); }; export default ImageExample;![Example Image]()
Querying Dynamic Pages
Gatsby will use the specified template to create particular person pages for each blog submit. Let’s now add GraphQL query to the template internet web page to fetch the guidelines in keeping with the slug:
import { graphql } from 'gatsby'; import Img from 'gatsby-image'; import React from 'react'; import Structure from '../portions/Structure'; import * as varieties from '../varieties/blog-details.module.css'; const BlogDetails = ({ knowledge }) => { const { html } = knowledge.markdownRemark; const { identify, featureImg } = knowledge.markdownRemark.frontmatter; return (); }; export default BlogDetails; export const query = graphql` query ProjectDetails($slug: String) { markdownRemark(frontmatter: { slug: { eq: $slug } }) { html frontmatter { identify featureImg { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } } } `;![]()
{identify}
Throughout the code above, you’ll understand we’re querying for the optimized image and querying for the blog submit that matches the slug.
You’ll check out the entire provide code for this Gatsby venture on GitHub.
Deploy Gatsby Static Web sites With Kinsta
Kinsta allows you to host as much as 100 static web pages for loose. This may also be completed thru pushing your code for your most popular Git provider (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
Once your repo is in a position, apply the ones steps to deploy your static website online to Kinsta:
- Log in or create an account to view your MyKinsta dashboard.
- Authorize Kinsta in conjunction with your Git provider.
- Click on on Static Web sites on the left sidebar, then click on on Add website online.
- Make a choice the repository and the dept you wish to have to deploy from.
- Assign a singular identify for your website online.
- MyKinsta will come across the assemble settings for this Gatsby mission automatically. You’ll see the following settings prefilled:
- Assemble command:
npm run assemble- Node version:
18.16.0- Publish record:
public
- In spite of everything, click on on Create website online.
And that’s it! You at the moment have a deployed website online inside of a few seconds. A link is provided to get admission to the deployed version of your website online. You’ll later add your customized area and SSL certificates if you wish to have.
As a substitute for Static Internet web site Website hosting, you’ll opt for deploying your static website online with Kinsta’s Software Webhosting, which provides greater web internet hosting flexibility, a much wider range of benefits, and get admission to to additional tricky choices. For instance, scalability, customized deployment using a Dockerfile, and complete analytics encompassing real-time and ancient knowledge.
Summary
This knowledge covers the fundamentals of data sourcing, routing, styling, image optimization, plugins, deployment, and so much additional.
Gatsby’s flexibility, pace, and rich ecosystem make it an excellent variety for building static internet pages. Whether or not or now not you’re rising a non-public blog, a portfolio website online, or a industry web site, Gatsby has you covered.
Now it’s time to put your knowledge into movement and get began building your own Gatsby website online. Have you ever ever carried out Gatsby to build the remainder? Feel free to proportion your duties and opinions with us throughout the comments section beneath.
The submit A Complete Information To Development Static Websites With Gatsby seemed first on Kinsta®.
WordPress Maintenance Plans | WordPress HostingContents
- 0.1 Understanding Static Web sites
- 0.2 What Is Gatsby?
- 0.3 Getting Started With Gatsby
- 0.4 Rising Pages and Components
- 1 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 2 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 3 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 4 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 5 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 6 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 7 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 8 Enjoy Static Internet web site Website hosting With Kinsta StSH.
- 8.1 The usage of Static Data in Gatsby
- 8.2 Plugins and Integrations
- 8.3 Rising Blog Posts
- 8.4 Querying in Gatsby With GraphQL
- 8.5 Blog
- 8.6 Understanding Templates and Generating Dynamic Pages In Gatsby With GraphQL
- 8.7 Deploy Gatsby Static Web sites With Kinsta
- 8.8 Summary
- 8.9 The Quickest Rising Social Media Platforms of 2023 [New Data]
- 8.10 Meet Kinsta at WordCamp Romania 2024
- 8.11 9 Best possible ActiveCampaign Possible choices in 2023 (In comparison)
0 Comments