{"componentChunkName":"component---src-templates-tag-js","path":"/tags/gatsby/","result":{"data":{"site":{"siteMetadata":{"title":"Personal Blog","author":"SANYAM AGARWAL","labels":[{"tag":"react","tech":"React","name":"M12 9.861A2.139 2.139 0 1 0 12 14.139 2.139 2.139 0 1 0 12 9.861zM6.008 16.255l-.472-.12C2.018 15.246 0 13.737 0 11.996s2.018-3.25 5.536-4.139l.472-.119.133.468a23.53 23.53 0 0 0 1.363 3.578l.101.213-.101.213a23.307 23.307 0 0 0-1.363 3.578l-.133.467zM5.317 8.95c-2.674.751-4.315 1.9-4.315 3.046 0 1.145 1.641 2.294 4.315 3.046a24.95 24.95 0 0 1 1.182-3.046A24.752 24.752 0 0 1 5.317 8.95zM17.992 16.255l-.133-.469a23.357 23.357 0 0 0-1.364-3.577l-.101-.213.101-.213a23.42 23.42 0 0 0 1.364-3.578l.133-.468.473.119c3.517.889 5.535 2.398 5.535 4.14s-2.018 3.25-5.535 4.139l-.473.12zm-.491-4.259c.48 1.039.877 2.06 1.182 3.046 2.675-.752 4.315-1.901 4.315-3.046 0-1.146-1.641-2.294-4.315-3.046a24.788 24.788 0 0 1-1.182 3.046zM5.31 8.945l-.133-.467C4.188 4.992 4.488 2.494 6 1.622c1.483-.856 3.864.155 6.359 2.716l.34.349-.34.349a23.552 23.552 0 0 0-2.422 2.967l-.135.193-.235.02a23.657 23.657 0 0 0-3.785.61l-.472.119zm1.896-6.63c-.268 0-.505.058-.705.173-.994.573-1.17 2.565-.485 5.253a25.122 25.122 0 0 1 3.233-.501 24.847 24.847 0 0 1 2.052-2.544c-1.56-1.519-3.037-2.381-4.095-2.381zM16.795 22.677c-.001 0-.001 0 0 0-1.425 0-3.255-1.073-5.154-3.023l-.34-.349.34-.349a23.53 23.53 0 0 0 2.421-2.968l.135-.193.234-.02a23.63 23.63 0 0 0 3.787-.609l.472-.119.134.468c.987 3.484.688 5.983-.824 6.854a2.38 2.38 0 0 1-1.205.308zm-4.096-3.381c1.56 1.519 3.037 2.381 4.095 2.381h.001c.267 0 .505-.058.704-.173.994-.573 1.171-2.566.485-5.254a25.02 25.02 0 0 1-3.234.501 24.674 24.674 0 0 1-2.051 2.545zM18.69 8.945l-.472-.119a23.479 23.479 0 0 0-3.787-.61l-.234-.02-.135-.193a23.414 23.414 0 0 0-2.421-2.967l-.34-.349.34-.349C14.135 1.778 16.515.767 18 1.622c1.512.872 1.812 3.37.824 6.855l-.134.468zM14.75 7.24c1.142.104 2.227.273 3.234.501.686-2.688.509-4.68-.485-5.253-.988-.571-2.845.304-4.8 2.208A24.849 24.849 0 0 1 14.75 7.24zM7.206 22.677A2.38 2.38 0 0 1 6 22.369c-1.512-.871-1.812-3.369-.823-6.854l.132-.468.472.119c1.155.291 2.429.496 3.785.609l.235.02.134.193a23.596 23.596 0 0 0 2.422 2.968l.34.349-.34.349c-1.898 1.95-3.728 3.023-5.151 3.023zm-1.19-6.427c-.686 2.688-.509 4.681.485 5.254.987.563 2.843-.305 4.8-2.208a24.998 24.998 0 0 1-2.052-2.545 24.976 24.976 0 0 1-3.233-.501zM12 16.878c-.823 0-1.669-.036-2.516-.106l-.235-.02-.135-.193a30.388 30.388 0 0 1-1.35-2.122 30.354 30.354 0 0 1-1.166-2.228l-.1-.213.1-.213a30.3 30.3 0 0 1 1.166-2.228c.414-.716.869-1.43 1.35-2.122l.135-.193.235-.02a29.785 29.785 0 0 1 5.033 0l.234.02.134.193a30.006 30.006 0 0 1 2.517 4.35l.101.213-.101.213a29.6 29.6 0 0 1-2.517 4.35l-.134.193-.234.02c-.847.07-1.694.106-2.517.106zm-2.197-1.084c1.48.111 2.914.111 4.395 0a29.006 29.006 0 0 0 2.196-3.798 28.585 28.585 0 0 0-2.197-3.798 29.031 29.031 0 0 0-4.394 0 28.477 28.477 0 0 0-2.197 3.798 29.114 29.114 0 0 0 2.197 3.798z","size":20,"color":"deepskyblue"},{"tag":"nodejs","tech":"Node.js","name":"M11.177 25.3a1.94 1.94 0 0 1-.969-.259l-3.086-1.826c-.46-.257-.235-.349-.083-.402.614-.213.739-.262 1.394-.635.069-.038.159-.024.231.018l2.37 1.407a.304.304 0 0 0 .287 0l9.241-5.333a.292.292 0 0 0 .141-.25V7.355a.3.3 0 0 0-.143-.255l-9.237-5.329a.29.29 0 0 0-.285 0L1.803 7.102a.296.296 0 0 0-.146.253v10.666c0 .102.056.198.145.247l2.532 1.462c1.374.687 2.215-.122 2.215-.935V8.265c0-.149.12-.266.269-.266H7.99c.146 0 .267.117.267.266v10.53c0 1.833-.998 2.885-2.736 2.885-.534 0-.955 0-2.129-.579L.969 19.706A1.953 1.953 0 0 1 0 18.02V7.355c0-.693.371-1.339.969-1.684l9.242-5.34a2.023 2.023 0 0 1 1.942 0l9.241 5.34c.599.346.971.992.971 1.684V18.02c0 .693-.372 1.337-.971 1.686l-9.241 5.335a1.942 1.942 0 0 1-.973.259zm2.855-7.348c-4.045 0-4.892-1.857-4.892-3.414 0-.148.118-.266.266-.266h1.195c.133 0 .245.096.265.226.18 1.216.717 1.831 3.164 1.831 1.946 0 2.775-.441 2.775-1.473 0-.596-.234-1.037-3.26-1.334-2.528-.25-4.093-.809-4.093-2.831 0-1.865 1.572-2.977 4.207-2.977 2.961 0 4.425 1.027 4.611 3.233a.27.27 0 0 1-.267.291h-1.2a.266.266 0 0 1-.259-.209c-.288-1.28-.988-1.689-2.886-1.689-2.126 0-2.373.74-2.373 1.295 0 .673.292.869 3.161 1.248 2.84.375 4.19.907 4.19 2.902 0 2.014-1.678 3.167-4.606 3.167z","size":20,"color":"lightgreen"},{"tag":"git","tech":"Git","name":"M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187","size":20,"color":"white"},{"tag":"javascript","tech":"JavaScript","name":"M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z","size":20,"color":"yellow"},{"tag":"css","tech":"CSS","name":"M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z","size":20,"color":"teal"},{"tag":"python","tech":"Python","name":"M14.31.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.83l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.23l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05L0 11.97l.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.24l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05 1.07.13zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09-.33.22zM21.1 6.11l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01.21.03zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08-.33.23z","size":20,"color":"deepskyblue"},{"tag":"angular","tech":"Angular","name":"M9.93 12.645h4.134L11.996 7.74M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z","size":20,"color":"red"},{"tag":"html","tech":"HTML","name":"M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z","size":20,"color":"darkorange"},{"tag":"mongodb","tech":"MongoDB","name":"M17.18 9.518c-1.263-5.56-4.242-7.387-4.562-8.086C12.266.939 11.885 0 11.885 0c-.002.019-.004.031-.005.049v.013h-.001c-.002.015-.003.025-.004.039v.015h-.002c0 .01-.002.018-.002.026v.026h-.003c-.001.008-.001.018-.003.025v.021h-.002c0 .007 0 .015-.002.021v.02h-.002c0 .01-.001.022-.002.032v.002c-.003.017-.006.034-.009.05v.008h-.002c-.001.004-.003.008-.003.012v.017h-.003v.022h-.005v.018h-.005v.021h-.004v.019h-.004v.017h-.006v.014h-.004v.018h-.004v.014h-.005v.013H11.8v.015h-.004c-.001.001-.001.003-.001.004v.01h-.003c-.001.002-.001.004-.001.006v.006h-.002c-.001.003-.002.008-.002.01-.003.007-.007.014-.01.021v.002c-.002.002-.004.005-.005.007v.008h-.004v.008h-.005v.008h-.003v.01h-.006v.014h-.004v.004h-.004v.008h-.004v.011h-.004v.008h-.006v.011h-.004v.008h-.005v.008h-.003v.01h-.005v.008h-.004v.006h-.004v.008h-.006V.76h-.004v.006h-.005v.008h-.004v.011h-.005v.004h-.003v.008h-.006v.004h-.004v.01h-.004v.004h-.004v.008h-.005v.006h-.003l-.002.004v.004h-.002c-.001.002-.002.002-.002.004v.001h-.001c-.001.003-.002.005-.004.007v.003h-.001c-.005.006-.008.012-.012.018v.001c-.002.002-.007.006-.009.01v.002h-.001c-.001.001-.003.002-.003.003v.003h-.002l-.003.003v.001h-.001c0 .001-.002.002-.003.004v.004h-.003l-.002.002v.002h-.002c0 .002-.002.002-.002.003v.003h-.004c0 .001-.001.002-.002.003V.92h-.003v.004h-.004V.93h-.004v.008h-.005V.93h-.005v.004h-.004V.94h-.005v.008h-.005v.004h-.004v.006h-.004v.004h-.004V.97h-.006v.004h-.004V.98h-.005v.004h-.004v.005h-.005v.01h-.002v.004h-.006v.005h-.004v.002h-.004v.004h-.005v.01h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.005v.004h-.004v.004h-.004v.01h-.004v.005h-.006v.004h-.004v.004h-.005v.006h-.004v.004h-.005v.007h-.004v.004h-.006V1.1h-.002v.004h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.003c-.001.001-.001.002-.001.002v.002h-.002l-.004.004s-.002.002-.004.003v.006h-.004v.005h-.004v.004h-.004v.004h-.003l-.003.003v.003h-.002l-.002.002v.003h-.002c-.005.006-.007.01-.014.016-.002.002-.008.007-.012.01-.012.008-.027.021-.039.032-.008.005-.016.012-.022.017v.001h-.001c-.016.013-.031.025-.049.039v.001c-.024.02-.047.039-.074.062V1.34h-.002c-.057.047-.117.1-.186.159V1.5h-.001c-.169.148-.37.338-.595.568l-.015.015-.004.004C9 3.494 6.857 6.426 6.631 11.164c-.02.392-.016.773.006 1.144v.009c.109 1.867.695 3.461 1.428 4.756v.001c.292.516.607.985.926 1.405v.001c1.102 1.455 2.227 2.317 2.514 2.526.441 1.023.4 2.779.4 2.779l.644.215s-.131-1.701.053-2.522c.057-.257.192-.476.349-.662.106-.075.42-.301.797-.645.018-.019.028-.036.044-.054 1.521-1.418 4.362-4.91 3.388-10.599z","size":20,"color":"green"},{"tag":"vscode","tech":"VS Code","name":"M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z","size":20,"color":"deepskyblue"},{"tag":"graphql","tech":"GraphQL","name":"M14.051 2.751l4.935 2.85c.816-.859 2.173-.893 3.032-.077.148.14.274.301.377.477.589 1.028.232 2.339-.796 2.928-.174.1-.361.175-.558.223v5.699c1.146.273 1.854 1.423 1.58 2.569-.048.204-.127.4-.232.581-.592 1.023-1.901 1.374-2.927.782-.196-.113-.375-.259-.526-.429l-4.905 2.832c.372 1.124-.238 2.335-1.361 2.706-.217.071-.442.108-.67.108-1.181.001-2.139-.955-2.14-2.136 0-.205.029-.41.088-.609l-4.936-2.847c-.816.854-2.171.887-3.026.07-.854-.816-.886-2.171-.07-3.026.283-.297.646-.506 1.044-.603l.001-5.699c-1.15-.276-1.858-1.433-1.581-2.584.047-.198.123-.389.224-.566.592-1.024 1.902-1.374 2.927-.782.177.101.339.228.48.377l4.938-2.85C9.613 1.612 10.26.423 11.39.088 11.587.029 11.794 0 12 0c1.181-.001 2.139.954 2.14 2.134.001.209-.03.418-.089.617zm-.515.877c-.019.021-.037.039-.058.058l6.461 11.19c.026-.009.056-.016.082-.023V9.146c-1.145-.283-1.842-1.442-1.558-2.588.006-.024.012-.049.019-.072l-4.946-2.858zm-3.015.059l-.06-.06-4.946 2.852c.327 1.135-.327 2.318-1.461 2.645-.026.008-.051.014-.076.021v5.708l.084.023 6.461-11.19-.002.001zm2.076.507c-.39.112-.803.112-1.192 0l-6.46 11.189c.294.283.502.645.6 1.041h12.911c.097-.398.307-.761.603-1.044L12.597 4.194zm.986 16.227l4.913-2.838c-.015-.047-.027-.094-.038-.142H5.542l-.021.083 4.939 2.852c.388-.404.934-.653 1.54-.653.627 0 1.19.269 1.583.698z","size":20,"color":"hotpink"},{"tag":"gatsby","tech":"Gatsby","name":"M12.001.007C5.326.007.007 5.326.007 12S5.326 23.995 12 23.995s11.994-5.319 11.994-11.994S18.676.007 12.001.007zM2.614 12.105l9.283 9.283c-5.111 0-9.283-4.172-9.283-9.283zm11.473 9.074L2.823 9.915C3.76 5.743 7.516 2.614 12 2.614a9.476 9.476 0 0 1 7.614 3.86L18.259 7.62a7.657 7.657 0 0 0-6.362-3.337A7.555 7.555 0 0 0 4.7 9.393l9.804 9.805c2.4-.835 4.276-2.92 4.798-5.424h-4.068v-1.773h6.154c0 4.485-3.129 8.24-7.301 9.178z","size":20,"color":"rebeccapurple"},{"tag":"markdown","tech":"Markdown","name":"M29.692 25.847h-27.384c-1.274 0-2.307-1.033-2.307-2.307v0-15.080c0-1.274 1.033-2.307 2.307-2.307h27.384c1.274 0 2.307 1.033 2.307 2.307v15.077c0 0.001 0 0.002 0 0.003 0 1.274-1.033 2.307-2.307 2.307 0 0 0 0 0 0v0zM7.692 21.231v-6l3.077 3.847 3.076-3.847v6h3.077v-10.46h-3.077l-3.076 3.847-3.077-3.847h-3.077v10.463zM28.308 16h-3.077v-5.231h-3.076v5.231h-3.077l4.615 5.385z","size":20,"color":"black"}]}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"excerpt":"Building the tech blog seems a bit difficut for bigenners, also when we want to make our tech blog minimalistic and more fast to make it more content-oriented majority get's confused with what…","html":"<p>Building the tech blog seems a bit difficut for bigenners, also when we want to make our tech blog minimalistic and more fast to make it more content-oriented majority get's confused with what technology should be used.\nSo you might have heard about <a href=\"https://www.gatsbyjs.org/\">Gatsby</a> which is a static site generator written in Javascript and backend by React and GraphQL.\nI’m also a newbie to Gatsby, and I thought I’d write up this blog as a guide on, how to setup/build your blog and write your first blog post, as I figure things out.</p>\n<p>You might be thinking that why <a href=\"https://www.gatsbyjs.org/\">Gatsby</a>, why not other technology.  </p>\n<h2>Why Gatsby?</h2>\n<p>According to there <a href=\"https://www.gatsbyjs.org/\">website</a> </p>\n<blockquote>\n<p>\"Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps\" and is \"Fast in every way that matters\".</p>\n</blockquote>\n<p>Gatsby allows you to write in <a href=\"https://www.markdownguide.org/\">Markdown</a>, which is a simple plain text format that is easy to learn and write with. It generates HTML blog posts taking in the Markdown files.\nIt has some great features that differentiate it from other static site generators.:</p>\n<ul>\n<li>Filter blog posts by Tags</li>\n<li>Easy customization</li>\n<li>Using styled-components</li>\n<li>Minimal styles</li>\n<li>Best scoring by Lighthouse</li>\n<li>SEO support</li>\n<li>PWA support</li>\n<li>Offline support</li>\n</ul>\n<h2>Getting Started</h2>\n<p>If you don't have Gatsby CLI Installed yet, then install it's latest version first, it will give you the <code class=\"language-text\">gatsby</code> command:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">npm install -g gatsby-cli </code></pre></div>\n<p><br>\nThen, create your new blog:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog</code></pre></div>\n<p><br>\nAfter a few seconds, you will see something like this in your terminal.\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 767px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c826ad0b13591f147b2d154de39b3c65/6c2f2/output-1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 21%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAAyklEQVQY002O2Q6CUAxEeRKN0bhGiSu4ISAXwq6iETU+qP//OeNtNYaHybRp57RKNktxXx3xdAq8xQ2PTY6rkeLl3lBIzwYCp3HAvtc87Ice1wfN/zn1LkR9CaeqQwlHMS/lMnSeRrxIQarJL3qCyzxG1LEQd20W1WF7C6+xgt9cs+9qxhd4N3MUFNJTnCaBDCfcJ/0dh5Oeg5Bg0vnLoWBg0DJhq3OWo+oMI6iSaYIhVyPjq/S6W1/8l/myDNgV2VdmsKTKs7II+gEUbXUrStJB7AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"output\"\n        title=\"output\"\n        src=\"/static/c826ad0b13591f147b2d154de39b3c65/6c2f2/output-1.png\"\n        srcset=\"/static/c826ad0b13591f147b2d154de39b3c65/772e8/output-1.png 200w,\n/static/c826ad0b13591f147b2d154de39b3c65/e17e5/output-1.png 400w,\n/static/c826ad0b13591f147b2d154de39b3c65/6c2f2/output-1.png 767w\"\n        sizes=\"(max-width: 767px) 100vw, 767px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span>\n<br>\nNow, Change the directory to the site folder:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">cd my-new-blog</code></pre></div>\n<p><br>\nStartup the Gatsby Development Server using <code class=\"language-text\">gatsby</code> command:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">gatsby develop</code></pre></div>\n<p><br>\nAfter a few seconds, you will see something like this in your terminal.\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 743px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d6dfa6fc66f9932a4cd914ab9391af12/f2793/output-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 45.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABdklEQVQoz3VS13LCQAzkIYE0QgdDQjGmuldwoSf5/0/aSPI4Q4bkQSOdbm5ny5XsmoFt20HSsxE2dMRdG1FLh19b0c6B9TiFfj+CUZnAfFBhVtSfme+KXlTJVVT4XQ3HUYQPLcVu4GH35st5/x4g6VrIaBfUV/LArc7hVRd/gglgOJjB78xwGEY4TTY4jTc4q7GAf80z7AmcgbmniotEcUiReQNUgJeSnotM8URq2ncJKJHic7HziFVuhwXneYb1XW6BVDnvBWgpVmxkfU9Y8ONsQHLHEdyXOewnTSqor+G9LmXn15ZSbAH7HDZ1ultcMew7IuUwDIVBMbNvx1GITdugMhE1DWK5lplBth0Tm5YhwfGewxLAdOBKCBmx4yBy/3LJ7GfEDCgEfsTMCol6eSyz9GvJZy3GebIVVp+zPIjLNMaFgA9kQzgM4BPTiAILSYH1eJvsr1Cs1ghOY0LfhVIkL1NKkcFZOstmWewh7+Uf/vP/ivoGQRICorJjf2UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"output\"\n        title=\"output\"\n        src=\"/static/d6dfa6fc66f9932a4cd914ab9391af12/f2793/output-2.png\"\n        srcset=\"/static/d6dfa6fc66f9932a4cd914ab9391af12/772e8/output-2.png 200w,\n/static/d6dfa6fc66f9932a4cd914ab9391af12/e17e5/output-2.png 400w,\n/static/d6dfa6fc66f9932a4cd914ab9391af12/f2793/output-2.png 743w\"\n        sizes=\"(max-width: 743px) 100vw, 743px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Keep your development server running and visit <a href=\"https://localhost:8000\">localhost:8000</a> in your default browser to access your newly created Gatsby Blog.</p>\n<p>You can now deploy your Blog in <a href=\"https://pages.github.com/\">Github Pages</a></p>\n<h2>Deploying to a GitHub Pages subdomain at github.io</h2>\n<p>Acc to the their <a href=\"https://www.gatsbyjs.org/docs\">website</a> the easiest way to push a Gatsby app to GitHub Pages is by using a package called gh-pages. </p>\n<p>so Install <code class=\"language-text\">gh-pages</code> package</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">npm install gh-pages --save-dev  </code></pre></div>\n<p>  <br>\nFor a repository named like <code class=\"language-text\">&lt;username&gt;.github.io</code>  you just need to add a custom script <em>(given below)</em> in your <code class=\"language-text\">package.json</code> file, to makes it easier to build your site and move the contents of the built files to the proper branch(master) for GitHub Pages, this helps automate that process.</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"deploy\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"gatsby build &amp;&amp; gh-pages -d public -b master\"</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><br>\nAfter running command <code class=\"language-text\">npm run deploy</code> you should see your website at <code class=\"language-text\">&lt;username&gt;.github.io</code></p>\n<p><em>It's not the complete but the surely the starting point for development using Gatsby.</em><br>\nVisit <a href=\"https://www.gatsbyjs.org/\">Gatsby Website</a> for more detailed <a href=\"https://www.gatsbyjs.org/docs/\">documentation</a>and <a href=\"https://www.gatsbyjs.org/tutorial/\">tutorials</a>.</p>","id":"f0300219-1f8a-52f4-a218-786d0c68a18c","frontmatter":{"title":"Build and Deploy Gatsby blog in Github Pages","date":"March, 2020","tags":["gatsby","javascript","markdown"]},"fields":{"slug":"/Build-and-Deploy-Gatsby-blog-in-Github-Pages/"}}}]}},"pageContext":{"tag":"gatsby"}}}