1"use strict";(self.webpackChunkhandsonreact=self.webpackChunkhandsonreact||[]).push([[814],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>m});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),c=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return a.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),u=c(n),g=r,m=u["".concat(s,".").concat(g)]||u[g]||d[g]||i;return n?a.createElement(m,l(l({ref:t},p),{},{components:n})):a.createElement(m,l({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=g;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[u]="string"==typeof e?e:r,l[1]=o;for(var c=2;c<i;c++)l[c]=n[c];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}g.displayName="MDXCreateElement"},6453:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>i,metadata:()=>o,toc:()=>c});var a=n(7462),r=(n(7294),n(3905));const i={title:"Tooling"},l=void 0,o={unversionedId:"gatsby/concepts/Tooling",id:"gatsby/concepts/Tooling",title:"Tooling",description:"Installing the Gatsby CLI",source:"@site/docs/gatsby/concepts/01-Tooling.md",sourceDirName:"gatsby/concepts",slug:"/gatsby/concepts/Tooling",permalink:"/docs/gatsby/concepts/Tooling",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Tooling"},sidebar:"someSidebar",previous:{title:"Overview",permalink:"/docs/gatsby/concepts/Overview"},next:{title:"Components",permalink:"/docs/gatsby/concepts/Components"}},s={},c=[{value:"Installing the Gatsby CLI",id:"installing-the-gatsby-cli",level:2},{value:"Creating a Gatsby Project",id:"creating-a-gatsby-project",level:2},{value:"Using Starter Projects",id:"using-starter-projects",level:2},{value:"Generated Project File Structure",id:"generated-project-file-structure",level:2},{value:"Configuration Files",id:"configuration-files",level:2},{value:"Building Projects",id:"building-projects",level:2},{value:"Static Site Hosting",id:"static-site-hosting",level:2},{value:"Review",id:"review",level:2}],p={toc:c};
1function u(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",{id:"installing-the-gatsby-cli"},"Installing the Gatsby CLI"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre"},"npm install gatsby-cli --global\n")),(0,r.kt)("h2",{id:"creating-a-gatsby-project"},"Creating a Gatsby Project"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre"},"gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]\n")),(0,r.kt)("h2",{id:"using-starter-projects"},"Using Starter Projects"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"The Gatsby CLI tool lets you install starters"),(0,r.kt)("li",{parentName:"ul"},"Boilerplate Gatsby sites maintained by the community"),(0,r.kt)("li",{parentName:"ul"},"Intended for jump-starting development quickly"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://www.gatsbyjs.com/starters/"},"https://www.gatsbyjs.com/starters/")," (hundreds)")),(0,r.kt)("h2",{id:"generated-project-file-structure"},"Generated Project File Structure"),(0,r.kt)("p",null,"A quick look at the top-level files and directories you'll see in a Gatsby project."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre"}," .\n \u251c\u2500\u2500 node_modules\n \u251c\u2500\u2500 src\n \u251c\u2500\u2500 .gitignore\n \u251c\u2500\u2500 .prettierrc\n \u251c\u2500\u2500 gatsby-browser.js\n \u251c\u2500\u2500 gatsby-config.js\n \u251c\u2500\u2500 gatsby-node.js\n \u251c\u2500\u2500 gatsby-ssr.js\n \u251c\u2500\u2500 LICENSE\n \u251c\u2500\u2500 package-lock.json\n \u251c\u2500\u2500 package.json\n \u2514\u2500\u2500 README.md\n")),(0,r.kt)("h2",{id:"configuration-files"},"Configuration Files"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"gatsby-config.js")," defines",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"your site\u2019s metadata"),(0,r.kt)("li",{parentName:"ul"},"plugins"),(0,r.kt)("li",{parentName:"ul"},"other general configuration."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"gatsby-browser.js"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Interacting with the client-side of Gatsby"),(0,r.kt)("li",{parentName:"ul"},"Respond to actions within the browser (client route changes)"),(0,r.kt)("li",{parentName:"ul"},"Wrap your site in additional components (Ex. Layout)"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"gatsby-node.js"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Run once in the process of building your site"),(0,r.kt)("li",{parentName:"ul"},"Use its APIs to:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Create pages dynamically"),(0,r.kt)("li",{parentName:"ul"},"Add data into GraphQL"),(0,r.kt)("li",{parentName:"ul"},"Respond to events during the build lifecycle")))))),(0,r.kt)("h2",{id:"building-projects"},"Building Projects"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre"},"gatsby build\n")),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"build")," command produces a directory of static HTML and JavaScript files"),(0,r.kt)("li",{parentName:"ul"},"deploy to a static site hosting service")),(0,r.kt)("h2",{id:"static-site-hosting"},"Static Site Hosting"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Gatsby Cloud"),(0,r.kt)("li",{parentName:"ul"},"Azure"),(0,r.kt)("li",{parentName:"ul"},"Netlify"),(0,r.kt)("li",{parentName:"ul"},"AWS Amplify"),(0,r.kt)("li",{parentName:"ul"},"S3 & Cloudfront"),(0,r.kt)("li",{parentName:"ul"},"Vercel"),(0,r.kt)("li",{parentName:"ul"},"Surge")),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("a",{parentName:"p",href:"https://www.gatsbyjs.com/docs/deploying-and-hosting/"},"https://www.gatsbyjs.com/docs/deploying-and-hosting/"))),(0,r.kt)("h2",{id:"review"},"Review"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},"How do you create a Gatsby application?"),(0,r.kt)("li",{parentName:"ol"},"How do you build a Gatsby application and what is the output?"),(0,r.kt)("li",{parentName:"ol"},"Where can you host a Gatsby site?")))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.