{"id":30,"date":"2023-12-12T12:40:28","date_gmt":"2023-12-12T12:40:28","guid":{"rendered":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?p=30"},"modified":"2024-07-30T08:58:12","modified_gmt":"2024-07-30T08:58:12","slug":"from-zero-to-live-gatsby-js-static-sitein-just-5-minutes","status":"publish","type":"post","link":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/","title":{"rendered":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"900\" height=\"469\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/image.png\" alt=\"\" class=\"wp-image-31\"\/><\/figure>\n\n\n\n<p>In this blog, we&#8217;ll walk through the process of creating a static website using Gatsby.js and <br>deploying it on Netlify. Gatsby is an open-source framework that combines the power of<br>React, GraphQL, and Webpack to create lightning-fast, static websites with an excellent<br>developer experience.<\/p>\n\n\n\n<p><strong>Prerequisites<\/strong><\/p>\n\n\n\n<p>Before diving into Gatsby.js, ensure you have the following prerequisites:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A good understanding of HTML, CSS, JavaScript, and React.<\/li>\n\n\n\n<li>Node.js (version 18 or newer) installed on your machine.<\/li>\n\n\n\n<li>Gatsby CLI<\/li>\n<\/ul>\n\n\n\n<p><strong>Installing Gatsby Locally<\/strong><\/p>\n\n\n\n<p>Let&#8217;s start by installing Gatsby.js on your local machine. The process is straightforward; you<br>can use the following command:<\/p>\n\n\n\n<p>npm install -g gatsby-cli<\/p>\n\n\n\n<p>To check if Gatsby is installed correctly, run the following command, and make sure you<br>have version 3 or newer:<\/p>\n\n\n\n<p class=\"has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-e1d5c56d803238b7c8e086f3fffec4cd\"><strong>gatsby &#8211;version<\/strong><\/p>\n\n\n\n<p>Creating a New Gatsby Project<\/p>\n\n\n\n<p>With Gatsby installed, you can create a new Gatsby project using the following command:<br>gatsby new my-first-gatsby-site<br>Provide project details as prompted. Once your project is created, navigate to the project<br>directory:<\/p>\n\n\n\n<p class=\"has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-d10edae222ea558427987948d72eb4c1\"><strong>cd my-first-gatsby-site<\/strong><\/p>\n\n\n\n<p>Now, you can start the local development server with the following command:<\/p>\n\n\n\n<p class=\"has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-30fcc7bbd9ef856f9e38ad5f979b22ed\"><strong>npm run develop<\/strong><\/p>\n\n\n\n<p>Your Gatsby site will be accessible at http:\/\/localhost:8000\/<\/p>\n\n\n\n<p>Creating Static Pages<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"264\" height=\"364\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/gatsby-folder.jpg\" alt=\"\" class=\"wp-image-32\"\/><\/figure>\n\n\n\n<p>Creating pages in Gatsby is a breeze. You just need to create a file in the <code><strong>src\/pages<\/strong><\/code><br>directory, and Gatsby will automatically recognize it. For instance, to create an &#8220;About&#8221; page,<br>you can create a file named <strong><code>about.js<\/code>.<\/strong><\/p>\n\n\n\n<p>In these files, you can use any pre-built HTML and CSS templates and add your content.<br>Gatsby will handle routing and page generation for you.<\/p>\n\n\n\n<p><strong>Deploying to Netlify<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"350\" height=\"525\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/netlify1.jpg\" alt=\"\" class=\"wp-image-33\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1505\" height=\"351\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/netlify2.jpg\" alt=\"\" class=\"wp-image-34\"\/><\/figure>\n\n\n\n<p>Now that your Gatsby site is up and running locally, it&#8217;s time to deploy it to the world. Netlify<br>provides a straightforward process for hosting static websites.<\/p>\n\n\n\n<p>Here&#8217;s what you need to do:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a Netlify Account<\/strong>: If you don&#8217;t already have one, sign up for a Netlify account.<\/li>\n\n\n\n<li><strong>Build Your Gatsby Project<\/strong>: In your code editor and terminal, navigate to your Gatsby<br>project directory and run the build command:<br>npm run build<br>This command will generate a <code>public<\/code> folder in your project directory.<\/li>\n\n\n\n<li><strong>Deploy to Netlify<\/strong>:<\/li>\n\n\n\n<li>Go to the Netlify website.<\/li>\n\n\n\n<li>In the &#8220;Sites&#8221; menu, you&#8217;ll find an option that says, &#8220;Want to deploy a new site without<br>connecting to Git? Drag and drop your site output folder here.&#8221;<\/li>\n\n\n\n<li>Drag and drop the <code>public<\/code> folder from your Gatsby project.<\/li>\n\n\n\n<li><strong>Wait for Deployment<\/strong>: Netlify will begin the deployment process. It will build your site<br>and host it.<\/li>\n\n\n\n<li><strong>Site is Live<\/strong>: After successful deployment, you&#8217;ll receive a unique URL. Your Gatsby<br>static site is now live and accessible to the world.<br>Congratulations, you&#8217;ve successfully built and deployed a Gatsby.js static site on Netlify in<br>just a few steps. Your website is now live and ready for visitors!<br><strong>Happy coding and deploying!<\/strong><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we&#8217;ll walk through the process of creating a static website using Gatsby.js&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>From Zero to Live: Gatsby.js Static Site in Just 5 Minutes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes\" \/>\n<meta property=\"og:description\" content=\"In this blog, we&#8217;ll walk through the process of creating a static website using Gatsby.js&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61552217825863\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-12T12:40:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-30T08:58:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/image.png\" \/>\n<meta name=\"author\" content=\"BlogAdmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BlogAdmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/","og_locale":"en_US","og_type":"article","og_title":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes","og_description":"In this blog, we&#8217;ll walk through the process of creating a static website using Gatsby.js&hellip;","og_url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61552217825863","article_published_time":"2023-12-12T12:40:28+00:00","article_modified_time":"2024-07-30T08:58:12+00:00","og_image":[{"url":"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/image.png"}],"author":"BlogAdmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"BlogAdmin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#article","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/"},"author":{"name":"BlogAdmin","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43"},"headline":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes","datePublished":"2023-12-12T12:40:28+00:00","dateModified":"2024-07-30T08:58:12+00:00","mainEntityOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/"},"wordCount":460,"commentCount":0,"publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/image.png","articleSection":["FrontEnd"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/","name":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#primaryimage"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/image.png","datePublished":"2023-12-12T12:40:28+00:00","dateModified":"2024-07-30T08:58:12+00:00","breadcrumb":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#primaryimage","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/image.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/image.png","width":900,"height":469,"caption":"Gatsby"},{"@type":"BreadcrumbList","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/from-zero-to-live-gatsby-js-static-sitein-just-5-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/200oksolutionssandbox.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"From Zero to Live: Gatsby.js Static Site in Just 5 Minutes"}]},{"@type":"WebSite","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61552217825863"]},{"@type":"Person","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43","name":"BlogAdmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","caption":"BlogAdmin"},"sameAs":["http:\/\/blog.200oksolutions.com"],"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/author\/blogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":4,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}