const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(a){const r={a:"a",code:"code",em:"em",figure:"figure",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",span:"span",...a.components};return l(e,{children:[n(r.p,{children:n(r.em,{children:"Gatsby, put simply, is a static site generator. This means it creates static HTML files that you can load onto a server."})}),"\n",n(r.p,{children:"Unlike many traditional websites, which require querying a database or server-side programming to serve web pages, Gatsby pre-configures everything in advance. This results in static HTML files that are ready to be served, but this does not mean the sites are non-interactive or static in the sense of being boring or unchanging."}),"\n",n(r.h2,{id:"how-gatsby-works",children:n(r.a,{className:"subheading-anchor",href:"#how-gatsby-works",children:"How Gatsby Works"})}),"\n",n(r.h3,{id:"static-site-generation",children:n(r.a,{className:"subheading-anchor",href:"#static-site-generation",children:"Static Site Generation"})}),"\n",n(r.p,{children:"Gatsby generates static sites. This process involves taking your content and building it into static HTML, CSS, and JavaScript files. These files are then served directly to users, making the site extremely fast since there's no need for server-side processing each time a page is loaded."}),"\n",n(r.h3,{id:"dynamic-features-with-static-sites",children:n(r.a,{className:"subheading-anchor",href:"#dynamic-features-with-static-sites",children:"Dynamic Features with Static Sites"})}),"\n",n(r.p,{children:"Even though Gatsby generates static sites, you can still have dynamic features. By loading JavaScript into your static HTML files, you can make API calls and create interactive, rich experiences for users."}),"\n",n(r.h3,{id:"development-and-build-process",children:n(r.a,{className:"subheading-anchor",href:"#development-and-build-process",children:"Development and Build Process"})}),"\n",n(r.p,{children:"When developing a site with Gatsby, you typically run it locally on your computer. You can start by installing the Gatsby CLI and creating a new project:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"bash","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"bash","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Install Gatsby CLI globally"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npm"}),n(r.span,{style:{color:"#A6E3A1"},children:" install"}),n(r.span,{style:{color:"#A6E3A1"},children:" -g"}),n(r.span,{style:{color:"#A6E3A1"},children:" gatsby-cli"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Create a new Gatsby site"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"gatsby"}),n(r.span,{style:{color:"#A6E3A1"},children:" new"}),n(r.span,{style:{color:"#A6E3A1"},children:" my-gatsby-site"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Navigate into your new site’s directory"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F38BA8",fontStyle:"italic"},children:"cd"}),n(r.span,{style:{color:"#A6E3A1"},children:" my-gatsby-site"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Start the development server"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"gatsby"}),n(r.span,{style:{color:"#A6E3A1"},children:" develop"})]})]})})}),"\n",n(r.p,{children:"Gatsby uses Node.js to build your site during development. However, once the site is built, it doesn't require Node.js on the server. This is because the final product is just static files, which can be easily deployed. For instance, you can deploy to Netlify with the following commands:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"bash","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"bash","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Build the site for production"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"gatsby"}),n(r.span,{style:{color:"#A6E3A1"},children:" build"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Deploy to Netlify"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"# Assuming you have the Netlify CLI installed and configured"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"netlify"}),n(r.span,{style:{color:"#A6E3A1"},children:" deploy"}),n(r.span,{style:{color:"#A6E3A1"},children:" --prod"}),n(r.span,{style:{color:"#A6E3A1"},children:" --dir=public"})]})]})})}),"\n",n(r.h2,{id:"key-technologies-behind-gatsby",children:n(r.a,{className:"subheading-anchor",href:"#key-technologies-behind-gatsby",children:"Key Technologies Behind Gatsby"})}),"\n",n(r.h3,{id:"graphql",children:n(r.a,{className:"subheading-anchor",href:"#graphql",children:"GraphQL"})}),"\n",n(r.p,{children:"Gatsby uses GraphQL to fetch data. GraphQL is a query language for APIs that allows you to request exactly the data you need. Here’s an example of a GraphQL query in a Gatsby page component:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"javascript","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"javascript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#CDD6F4"},children:" React "}),n(r.span,{style:{color:"#CBA6F7"},children:"from"}),n(r.span,{style:{color:"#A6E3A1"},children:' "react"'}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" graphql "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:' "gatsby"'}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" const"}),n(r.span,{style:{color:"#CDD6F4"},children:" query "}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" graphql"}),n(r.span,{style:{color:"#A6E3A1"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" site {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" siteMetadata {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#A6E3A1"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#A6E3A1"},children:"`"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"const"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" IndexPage"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#9399B2"},children:" ({"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" data"}),n(r.span,{style:{color:"#9399B2"},children:" })"}),n(r.span,{style:{color:"#CBA6F7"},children:" =>"}),n(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"div"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"h1"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"data"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"site"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"siteMetadata"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"title"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"p"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"Welcome to your new Gatsby site."}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:")"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" default"}),n(r.span,{style:{color:"#EBA0AC"},children:" IndexPage"}),n(r.span,{style:{color:"#9399B2"},children:";"})]})]})})}),"\n",n(r.p,{children:"This makes it easy to pull in data from various sources like Markdown files, databases, CMSs (like WordPress), or even CSV files."}),"\n",n(r.h3,{id:"react-and-css",children:n(r.a,{className:"subheading-anchor",href:"#react-and-css",children:"React and CSS"})}),"\n",n(r.p,{children:"For the user interface, Gatsby uses React, a popular JavaScript library for building user interfaces. Here’s an example of a simple React component used in a Gatsby project:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"javascript","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"javascript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#CDD6F4"},children:" React "}),n(r.span,{style:{color:"#CBA6F7"},children:"from"}),n(r.span,{style:{color:"#A6E3A1"},children:' "react"'}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"const"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" AboutPage"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#9399B2"},children:" ()"}),n(r.span,{style:{color:"#CBA6F7"},children:" =>"}),n(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"div"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"h1"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"About Us"}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"p"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"This is the about page of our Gatsby site."}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:")"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" default"}),n(r.span,{style:{color:"#EBA0AC"},children:" AboutPage"}),n(r.span,{style:{color:"#9399B2"},children:";"})]})]})})}),"\n",n(r.p,{children:"React handles the templates and components of your site, while CSS is used for styling. This combination allows you to create modern, responsive designs. You can import and use a CSS file in a component like this:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"javascript","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"javascript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// src/components/layout.css"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:"body "}),n(r.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" font"}),n(r.span,{style:{color:"#94E2D5"},children:"-"}),n(r.span,{style:{color:"#CDD6F4"},children:"family"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#CDD6F4"},children:" Arial"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#CDD6F4"},children:" sans"}),n(r.span,{style:{color:"#94E2D5"},children:"-"}),n(r.span,{style:{color:"#CDD6F4"},children:"serif"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" margin"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" 0"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" padding"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" 0"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" background"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#CDD6F4"},children:" #f4f4f4"}),n(r.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:"}"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// src/components/layout.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#CDD6F4"},children:" React "}),n(r.span,{style:{color:"#CBA6F7"},children:"from"}),n(r.span,{style:{color:"#A6E3A1"},children:' "react"'})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#A6E3A1"},children:' "./layout.css"'})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"const"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Layout"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#9399B2"},children:" ({"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" children"}),n(r.span,{style:{color:"#9399B2"},children:" })"}),n(r.span,{style:{color:"#CBA6F7"},children:" =>"}),n(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"div"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"header"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"h1"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"My Gatsby Site"}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"main"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"children"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#CDD6F4"},children:")"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" default"}),n(r.span,{style:{color:"#EBA0AC"},children:" Layout"})]})]})})}),"\n",n(r.h3,{id:"plugin-architecture",children:n(r.a,{className:"subheading-anchor",href:"#plugin-architecture",children:"Plugin Architecture"})}),"\n",n(r.p,{children:"One of Gatsby's strengths is its plugin architecture. Plugins let you add complex functionality to your site without writing a lot of custom code. For example, you can add and configure a plugin in gatsby-config.js like this:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"javascript","data-theme":"catppuccin-mocha",children:l(r.code,{"data-language":"javascript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CBA6F7",fontStyle:"italic"},children:"module"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CBA6F7",fontStyle:"italic"},children:"exports"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" siteMetadata"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" title"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#A6E3A1"},children:' "My Gatsby Site"'}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" author"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#A6E3A1"},children:' "Your Name"'}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:" },"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" plugins"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#CDD6F4"},children:" ["})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Example of adding a plugin for sourcing content from the filesystem"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:" {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" resolve"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#A6E3A1"},children:' "gatsby-source-filesystem"'}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" options"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" name"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#A6E3A1"},children:' "src"'}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" path"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#A6E3A1"},children:" `"}),n(r.span,{style:{color:"#9399B2"},children:"${"}),n(r.span,{style:{color:"#CDD6F4"},children:"__dirname"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#A6E3A1"},children:"/src/`"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Example of adding a plugin for transforming markdown files"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#A6E3A1"},children:' "gatsby-transformer-remark"'}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#CDD6F4"},children:" ]"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9399B2"},children:"};"})})]})})}),"\n",n(r.p,{children:"There is a vast ecosystem of plugins available for various tasks, from sourcing data to optimizing images."}),"\n",n(r.h2,{id:"why-use-gatsby",children:n(r.a,{className:"subheading-anchor",href:"#why-use-gatsby",children:"Why Use Gatsby?"})}),"\n",n(r.h3,{id:"speed",children:n(r.a,{className:"subheading-anchor",href:"#speed",children:"Speed"})}),"\n",n(r.p,{children:"Gatsby sites are incredibly fast because they are static. Static files are served directly to users without the need for server-side processing. This makes Gatsby sites faster than many traditional websites, even those with caching."}),"\n",n(r.h3,{id:"security",children:n(r.a,{className:"subheading-anchor",href:"#security",children:"Security"})}),"\n",n(r.p,{children:"Static sites are inherently more secure. There is no database or server-side code to hack, reducing the attack surface. This makes it harder for malicious actors to compromise your site."}),"\n",n(r.h3,{id:"developer-experience",children:n(r.a,{className:"subheading-anchor",href:"#developer-experience",children:"Developer Experience"})}),"\n",n(r.p,{children:"Gatsby offers an excellent developer experience. It uses modern tools and languages, which makes development more enjoyable and efficient. The community is active and supportive, and the documentation is thorough and helpful."}),"\n",n(r.h3,{id:"community-and-support",children:n(r.a,{className:"subheading-anchor",href:"#community-and-support",children:"Community and Support"})}),"\n",n(r.p,{children:"Gatsby is open-source and free, supported by a strong community and a dedicated team of professionals. This ensures ongoing development and a wealth of resources for learning and troubleshooting."}),"\n",n(r.h2,{id:"summary",children:n(r.a,{className:"subheading-anchor",href:"#summary",children:"Summary"})}),"\n",n(r.p,{children:n(r.img,{src:"https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/321ea/deployment-workflow.png",alt:"The workflow for how your code gets from your computer to your users. Extended description below."})}),"\n",n(r.p,{children:"Gatsby is a powerful static site generator that uses GraphQL for data fetching, React for building user interfaces, and a robust plugin system for added functionality. Its primary benefits are speed, security, and a great developer experience. Supported by a solid community and excellent documentation, Gatsby is a fantastic choice for building modern, high-performance websites."}),"\n",n(r.p,{children:"By understanding and leveraging these features, you can create fast, secure, and highly interactive websites with Gatsby. Whether you're a seasoned developer or a beginner, Gatsby provides the tools and support you need to succeed."})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

Static site generation

Building Blazing-Fast Websites ft. Gatsby 🔥