{"componentChunkName":"component---src-templates-post-item-js","path":"/blog/quando-usar-gatsby-js-netlifycms/","result":{"data":{"markdownRemark":{"html":"<p>São muitas as <strong>tecnologias e possibilidades</strong> no <strong>desenvolvimento web</strong>, e escolher qual usar na evolução da sua ideia pode ser complicado. Para <strong>aproximar você dessa importante etapa que é a programação,</strong> estamos escrevendo a <strong>série de artigos \"Quando usar\"</strong>, que abordará algumas  das tecnologias mais modernas e performáticas, e poderemos juntos decidir com qual tecnologia <strong>desenvolver sua aplicação</strong>!</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e970bd44c725b6800368fd596e3239d4/c2d13/0_7XDY9O9FdGaesHhW.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: 29.583333333333332%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAIAAABM9SnKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwElEQVQY03VQ7QqCQBD0ZfvTv3qGoh89g0QvJEpoIvmBaZkGIhlpd7vb3pEoRMOxMLs3w+waNAL5IQIX4qro0EepOlzHpoIx0eoxSgRgD+wpd+sqfJASsud3qn2nYpCIggQ6h872UXhxZ/mJW2/n+81slwdPkQevNLg71ESgowmdYhArIiBLIT7TOypkUgZ2uV6aq4V5ObWyunXFtQmpzVirP4P8G1uxno5WFnulis2Q/2KPhwFSu4E2/j2YvuUEH+a4WWlVMLuQAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Logo do Gatsby ao centro cercado de ícones de tecnologias\"\n        title=\"Gatsby e tecnologias\"\n        data-src=\"/static/e970bd44c725b6800368fd596e3239d4/d9199/0_7XDY9O9FdGaesHhW.png\"\n        data-srcset=\"/static/e970bd44c725b6800368fd596e3239d4/8ff5a/0_7XDY9O9FdGaesHhW.png 240w,\n/static/e970bd44c725b6800368fd596e3239d4/e85cb/0_7XDY9O9FdGaesHhW.png 480w,\n/static/e970bd44c725b6800368fd596e3239d4/d9199/0_7XDY9O9FdGaesHhW.png 960w,\n/static/e970bd44c725b6800368fd596e3239d4/07a9c/0_7XDY9O9FdGaesHhW.png 1440w,\n/static/e970bd44c725b6800368fd596e3239d4/29114/0_7XDY9O9FdGaesHhW.png 1920w,\n/static/e970bd44c725b6800368fd596e3239d4/c2d13/0_7XDY9O9FdGaesHhW.png 2560w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\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<h2>Para desenvolvimento front: Gatsby.js</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/19697c6372e8ee7cd4727388756495de/3684f/gatsby.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAADEElEQVQ4y31UWU8TURSen2HUxKWAoBgWKZr4JAFcQGMQo1CoIls1PigUpcbog0sAIXbaQhdihC5TaiAoYAyLEumUAsbIEtMi8U1FH9RIWNoOHfzuzFBBg5OTmXvuPd/9zjn3u0OtiA+/Eg6H8V2YC3q6/EZ1rybbcXF/MwwDuJjEEgJIGC+BqFUkmRh9MaM5zuTL6NNbG/Auim+CRVwsIUDA8yJeAvNhnqllC3fp83bSVUfsHbqRmfHZn9/mYRh00CNVh21YQgDC+AiY58nXWedRRNHFCUZnHRtc4rD8cfKrp9vv6Z7GAC4mAbuwtylvhxbBhJHnCbO3Z1oZayhOMA0wU3BR3rWj9vN7GvNkNAwDuJjE0uCT9+gC+AEhzIGF0I0TzNntWqaGhe96MIwUwFCeYlGlEsMALmpu144szYdunmwDWJPNAEixz/zYXp1p5UJh7AekCCjbZ46Y6JYkmSozbCWJJlVqc2Gs3t3po4xVfblbGjoNY6BVZ9pAAvBapISXW1RyS2kSkBZkrozVN1b2UtXZjoIYnfXOa4D7bBOosCzF/BczoU00wUqThXeSGa29fsxOYUvYmW0P0Wfg++2T5+IM5STVVWSyGZxX01pEq0hvvXKoRcyFQhBqeHx7UCGj7feGgH/pnFLGGYRSSQpF8Y23clxccDkU4AKLocAS5xv9VJJoxI5UdZZDEaWbfvuFfeo7tbnBWesW+CeUcXqyr9yCDCvSWjq03nat11XvWfgV8I99VkTrUK/UsDbh3PttE1AiU+OW8t9tIORyC+osiNGjtMsHH2EJZwYIgNJRQQZzPxbFnuWCf039yB/8lw40A+99/mGZCxOpymgA/4hEFB2eAcck8A6BH/WDH2UXROtc9cOYgZYQDAgRSUSeyO1V25SIB3/OpnrHfdK/3tbxynSrqEfoFypGsCTPyMWAANFDDOa+k/zZTh8aKWoWT3CRc9ayaB4kuO5irL+SWtSPrs68m8X5oUm2u0NdpjfqDGv+v1dyw58BRC7opzBGn/u/n8EGvyGVoGdN1oa/od9NKfZzpCDy2AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo do framework Gatsby\"\n        title=\"Símbolo do framework Gatsby\"\n        data-src=\"/static/19697c6372e8ee7cd4727388756495de/3684f/gatsby.png\"\n        data-srcset=\"/static/19697c6372e8ee7cd4727388756495de/3684f/gatsby.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>Temos certeza que tecnologias como o Gatsby são o <strong>futuro da WEB</strong>. Esse incrível <a href=\"https://tableless.github.io/iniciantes/manual/js/o-que-framework.html\">framework</a> criado para o desenvolvimento de <strong>sites estáticos</strong>, possuí um rico ecossistema para seu site ter um <strong>excelente carregamento, navegação, <a href=\"https://rockcontent.com/blog/o-que-e-seo/\">SEO</a>, pré-processamento e compressão de assets, compilação de código entre outros</strong>. Tudo isso, de fácil programação, pelo grande número de <strong>funções pré-prontas</strong> nesse ecossistema que <strong>vão deixar o seu site turbinando</strong>! </p>\n<p>Basicamente, ao desenvolvermos nosso site em <strong>React</strong>, o <strong>Gatsby entende todo o código e compila em várias páginas estáticas a partir disso</strong>. Para você entender melhor o que o <strong>Gatsby</strong> faz na prática, <strong>listamos com uma linguagem acessível algumas das tarefas</strong> que são realizadas para <strong>turbinar</strong> o nosso site:</p>\n<ul>\n<li><strong>Compila tudo que é carregado no site (imagens, scripts, estilos...)</strong>, disponibilizando arquivos o mais leve possível e se der em formatos de última geração;</li>\n<li>Transforma cada página de notícia, blog, produto, etc (páginas internas) em uma <strong>página HTML estática e compilada</strong>;</li>\n<li>Ao acessar o site, <strong>identifica qual o tamanho da tela do usuário</strong> e prepara imagens com as dimensões ideais para um carregamento rápido;</li>\n<li>Ao navegar pelo site, <strong>vai carregando as imagens de forma dinâmica</strong>, em geral apenas quando serão de fatos exibidas na tela;</li>\n<li>Ao acessar outro link do site, <strong>não \"recarrega\" a página ao mudar de tela</strong>, tornando a animação com transições animadas e dinâmicas em uma \"página\" só;</li>\n<li>Ao sobrepor o cursos em um link do site, ele já <strong>começa a carregar partes do site mesmo antes de clicar no link</strong>;</li>\n<li>Ao compilar nosso site, <strong>constrói dinamicamente todas as <em>tags</em> do site para o melhor SEO</strong> possível e faz varias melhorias para optimização nos mecanismos de busca;</li>\n<li>Várias outras coisas maneiras que <strong>melhoram a performance do nosso site</strong> por \"trás dos panos\" :)</li>\n</ul>\n<h3>As tecnologias usadas pelo Gatsby</h3>\n<p>Para fornecer todas essas <strong>possibilidades incríveis</strong>, esse <em>framework</em> faz o uso de algumas <strong>tecnologias de ponta</strong>, usadas por muitas <strong>empresas de respeito</strong> ao redor do mundo como <a href=\"Facebook\">Facebook</a>, <a href=\"Google\">Google</a>, <a href=\"https://www.ifood.com.br/\">IFood</a>, <a href=\"https://www.airbnb.com.br/\">Airbnb</a>, <a href=\"https://www.paypal.com/br/\">Paypal</a> ,<a href=\"Khan%20Academy\"> Khan Academy</a> entre muitas outras. </p>\n<p>Algumas dessas tecnologias são:</p>\n<h4>1. React</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5b9a1d90404c66b0d982f24f8f3d1355/3684f/1200px-React-icon.svg.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACrklEQVQ4y22UOWjUQRTGZ7ObWGkRtUupRQSFCNrYeGIsPMBGbFVIZ2FhIjYiIkYxARVJNJiIByoehVooXsELL0Qkyc5/syRYqY2FBs3Oun7vzTezs+DCb9+c3/+9N/PGGPkVHagak1WEnMnQD9hK3tikreOV0M8BY8p/jZmumvpPJsuzFMMC61ZjbC9Ywr4xJRWQtcswtg92jfZF9NOMn2sQzFwT7SbwASLHYF+DAWNrIijz58FLcATz72E3xr0NghqShKMeXAI7uLAFnAR3wT3Qi7UFzu0EI/QyrxEk3olojrm6Crsh5q0oqXBf0J9myIYinXDgcgw75DU5gBYKI0S3Wduf/8j4Uw0xc0fBE/Pxd1i/FZyl4JyoE08ri0mXkJ9DdBjWgm/gJvnKsWHMv4C96PdU6hqJUBcYJW/BbjAJ5mnefO7mcmwPeAeecX1XTAcbA+AhWASawS2e8DYwXzdZ3SztLeCN97gqH5I9D8CgeqpHb0WMX/D2BCiyfQe2hg8Dd5sOTIDjyeU3dKhTDqGDX1zIQwkef+el7ke7pljXx3nMuXMxzMwtoEZH8GgXGGNuloIb4Aw293BTN9rdbPeAU+C6rxrN9bi3GjLrMXPt2DSopyh3zoc9A9aj34Y1bdrO3C/0ZW4KlNRTLVHntXjk+eQ+SjVcUG+tGwIS7mPwiKEPMRKxfUnYeV9+8jdVFdvMyZFYo75/iN72gsOJwDpwhRe7YCZ5oEk5NbGNctKTT0/wB/hZvwnKWnAtlq3MxXqe1MECRU6DAxRaoVXjvTwIXoFVXLdfc25DuC55bUo6GB7WxVpWVl+XUX1VbCVcp+2s7ft8xtq5J/c/wfTFaYVdaSaqSTrohb+by2FbtR/2NAiGNzEsyFy9L+GU8cCOq1DejNVMPb+JWGlWZf4B2hcpZ8WYJKgAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo da biblioteca React\"\n        title=\"Símbolo da biblioteca React\"\n        data-src=\"/static/5b9a1d90404c66b0d982f24f8f3d1355/3684f/1200px-React-icon.svg.png\"\n        data-srcset=\"/static/5b9a1d90404c66b0d982f24f8f3d1355/3684f/1200px-React-icon.svg.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>Criado pelo Facebook, o <a href=\"https://pt-br.reactjs.org/\">React</a> é uma biblioteca Javascript que além de deixar a <strong>navegação do seu site muito fluída</strong> e rápida <strong>sem o famoso \"reload\"</strong> ao trocar de páginas ou navegar pelo site. Essa biblioteca também permite o desenvolvimento de um <strong>código muito componentizado</strong> <em>(separado, em várias partes)</em>, o que facilita também futuras <strong>manutenções e adição de funcionalidades,</strong> além de outros diversos benefícios na programação que tornam tudo mais produtivo.</p>\n<h4>2. Webpack</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/122560bcc6dc030168c87f6d3d9b18ec/3684f/download.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAACyElEQVQ4y41U7U+SURTnS83aMl+2Wn3rQ/VftL632voPWm21Zr6AL8tZprXMLbX1orVaLZlZBoQCivkAJk6sFhI8Ag8SgvAgoKCWoPk896WjSAljzbv74dxzz++ce8/9/a6E5huYUJKxwSAkbxSV5KwJ3YalRDqXJDDB2OnPD/67DWXdK+QJJ+p4NBBCnZzI/dyunZMit3IoRd4F0H2n2GgTNsFBBEabU3wfQHyK5K8M7oV1MsSjdpd4jxVaWKE7QNkEciyh1wHa4hDA2eESh8No8fe/DkjS1qpA5T7UZBdap8UXPjIZpzpn4szjb2c7rUOuxEScPveRVla8ZRd7ZlEy04VtsCGCpxJ4NIq1PNa4li51Ow7VmEqrTSXVpsM1pstyVute0vB4LIqtCWyK4Cxw7yy64xAsi2Q5uVH+1rWvnCmVmY41jMEskZn2VzAyhXsltTG+QCAMmpIFVs6hpu/CwDxt0nlrVB6FNXqua+pglaFIajz/zKacikoVXPPgD3WYQtiHYDYYmgnejzFaq+Ikl/WnO76+svBtjL/D4H85wZ9q+wLO6+oZfXQTrJrLBx6O0Xr1TLHUeKRudG/ZSDvjb9H79pSNHK0bLZYZGwa8g3nBigBqtguwV9HnLrjGnGwchwNf7XVelE9DLlgWlDNSJaeNUAhT5Ry7z49u2IRPi7TfFj1+0wx1CqsMtUoOch3YuvmJRrPGHjMuUAhT5FTuDyJzDFvjeHieWEJr9WpPYSVzpWf6QjdbVGlo6PdY+DV9hMBzwmtpQhlwmitJkWhD+LZDvMsKjzzYHKda1/Kbz2H5JK9zL4/F6UMOwxYEDPE4JZJceka36AkcBJIBH596MbdK3b9olxfDEuj1YIuesXWSh9vpAezvCyBQAnRVG0JwHTDSwghnhEH+I0kgPmiwMy3J4KYkPTskudvPILj7zyArxe6+oT91owYkkn4R7wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo da ferramenta Webpack\"\n        title=\"Símbolo da ferramenta Webpack\"\n        data-src=\"/static/122560bcc6dc030168c87f6d3d9b18ec/3684f/download.png\"\n        data-srcset=\"/static/122560bcc6dc030168c87f6d3d9b18ec/3684f/download.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>Para ter um <strong>ambiente de desenvolvimento optimizado</strong>, o Gatsby faz uso do <a href=\"https://webpack.js.org/\">Webpack</a>. Esse empacotador de código, vai ficar responsável por r<strong>ealizar tarefas repetitivas como unificações, compilações e compressões dos arquivos do nosso site.</strong> Isso <strong>poupa muito tempo</strong> na hora de desenvolver, e principalmente, gerar um site final optimizado e leve. Existem outras opções, mas esta é a <strong>mais moderna e funcional</strong>.</p>\n<h4>3. GraphQL</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/6c9ef109a6b004982ce87ecc2234da47/3684f/GraphQL_Logoo.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC/ElEQVQ4y21VS2sUQRDuyW72IvgLRK8x2WR2en0QjSLBiIIogmhiNPEsCIJeVTwqmjWIB8UnxhiIznSeeoiXSIKP/AXFu6J/QLr96jEzQTPwUdXdVV9Xd1XXGPPPF+JZEzpfG584E5IZEzoWILNh4GyIXRR4Htg/x/K/rzDIEc8DTFLTuUtA8EkGuMveOtqsFhrYjJCkJtg3xjNSEFolslkFJFXobaSDgOZo7QNk8JYJV8hJNiJ72CauSjrbAyY0p1gR50yOKkSHgHmMV4GfWPuB8UeaAw6rTU4ugXVPGxkQkc1OQ96C814YPYZ8D7kLMtW53ZCOJOyWoD8F9mB8E+MhJgTyXfrpnuhokH9geNFLtEPApLcu3/gFxiMa3QW1hQ/8rBuQI0vIp3JCEH1HtIjYbYLxF4y3yQk4GVuANYw3kx/WvoII90tJc0NlhPEnkg+A38BRjfoOcEP1qoJIr0KOq34E8hfko5C8jYTQclbpDuvQn+vRtmP3VR+nNTm6JMALKLsrQLeXyJ/BPyYy6G1EFClhLyZfCaGbhuM5ja7Cd2aZuKJ3O8jJkquZxFqfckRkGKkDJt09EByE8TvNWuR7UlMQxnMk5USJW/BUWtaNg+iAZxsXFQYYdAITIFwE+vTSa1rkFS5k1l27FnEv9EXgJea7dVMcuYfeZUo7tuSJuSdF0Wpk6+FtUbfk85DLBifzXXj/jaJs3EmqJX5e1lHZIJNZCwTjwBj0MR2TvAvZQpTXoH/j2rVUi26Qs6yZ6/dFHfLiEhZPwOEYMArnYWxyBnIUNsexTki9EOWNY8BzYe9Ex2jyfVFhjmFhn9bZFNAR8pIp3+5W4D5w3fMzJB+0tybWd6Db+PYJKDMm7y5lc8iowJel4LNlrb3bFBk27i9sJXnggOwiwjgTSBarXLiWizfvOmvyVvlYn0MzVSLOOLcvrs8GCBvOlK3LagtqKPIGa6XBKq5IMWOtPl/6NUts0MGxUJ9b18Fnqe2PAOfxS2jLn2DoyTb8BfwFf3o0ziabckYAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo da ferramenta Graphql\"\n        title=\"Símbolo da ferramenta Graphql\"\n        data-src=\"/static/6c9ef109a6b004982ce87ecc2234da47/3684f/GraphQL_Logoo.png\"\n        data-srcset=\"/static/6c9ef109a6b004982ce87ecc2234da47/3684f/GraphQL_Logoo.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>O <a href=\"https://facebook.github.io/graphql/\">GraphQL</a> também <strong>começou no Facebook</strong>. Esta é uma ferramenta de consulta de dados <strong>(conectar o nosso front-end ao nosso back-end)</strong>. Ao invés de ter que ficar criando uma API para cada estrutura diferente de dados e/ou ficar manualmente fazendo consultas para cada banco e depois juntar os dados, <strong>o que seria muito custoso</strong>, que tal realizar essas consultas de <strong>forma universal e acessível</strong>? Com essa ferramenta, tudo fica muito mais <strong>produtivo e simples</strong>.</p>\n<h2>Para administração back: NetlifyCMS</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e324c3413894ba3b6c93df01745cc4d4/3684f/YIgPht1s_400x400.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE+ElEQVQ4y31UXWwUVRj9dhYIxCAkygMk1Ad/CKE7O7OzM9vdBfqD1RjFABJTSoI+kDQEMDXBqCGKQDCACgqRGiTE1u12uzNzZ2a7TVqISCo0Ag3YCGJN+amlSNnd7s/M7uy2mPGbrT4okUnuy713zj3fOef7AP7ztd+sBTnDgJLxgJzyUOIdHo4qXuexrmdnkAkvSEmvQ5rwQfSeAJExFh75tY68CFIagTIsyBM81XFtFfRZM0AtMDGlwMTDg02zWsgWBA1QMoIrWS+0j7zy/4DRZADBvCCmvFRkLAB3LQA1z8ralMvSJmlLyjI7eqwlcPTwh8jQ55CTPLRcrnoYKDy6HEQsMZrCUpIC9eWpDRD+vXauUnB322AxXGrRPSBmPbtwr+vEwQPOBhhEpoJDSvNAsjwydU+DfX2xHsjECpDxQEwEHPsim6HXqoDOZNWbWsldnGbnsvChLWqR/lWbqrQkw9MSt56G1oF1IKX8DpL2g5J8ATru1AFE7vOg5HwIKFChoZfwCQvkPE0UkzkjpoRmYnj2i2n3aiVPh2MIZrOVDHdISXPNROcWfju03mZKqai9mkOWtmMk43N23q6HNGpGCu5e7e8fbd1IjmvqtZ7De9xbpEDHVDyLZthPkK0u57jDPdYzsH/rNkyEQOFd2wg/RbJVKPLK+dFx4TW8eLWs2yRt2sBihn1fKdBdask9rhieiJjktnUk+aWRhP91Wfd8o+RZJXRh1WySFkBM8hR0Gy9D+/X1j6kme04r0TkxIWzUJitzsQcuixRcbbLBnow9WGbhWQLL1qL3+Y3hW88vlBLeRjnLHVBLlcNK3tMXGatZELq1AmAmJB1EZ1rLrB5UWqrJ9Ek6+zkyNdr/YN9RivQlOcvvlVLC20qB7cL9AWR9SCs7z1xEh3eLWXZ3NOndcfJ8wxywULfwuHejOOHZJ2W5vRjg01Lat/bkb96n2m5yDbLOfIUg18tuI2vZpM/Khvt4rBwn2ioDl1w5jM9OANmBLVYDrTeqF8kG3U+K9I+R0eCaz8Lr5sRtI8aDa9QcdxyZqfjQOXXSpUsZ3x7FZM/a1fyTUc10X1WSvorOUR4gXghSdg47rtXOxbK2Ep2NR8Y9TZLBfCGlufeQ3Q2SZ0Uxxx7DzO2wK+pMeDehtpJWYobVgru/7eeax7WsABglCnr+9GO7+ZwkjS2X5iuiKW67YtJXNGQg6+xBxXR32WzKTEr0lJjgNuFeL+b0O2y/N8qS3agDNSM44yYDcAoBtYKA7SM4pUR1WVPF9FyY7pDKSYxVE0bm5nQuXSkxxb87bR49FBmpXdh5+1UcEoKz2+QhXsTps3V/Pcg5BDRwZfxOeWQ1iP3Nc7Bn+2yWWtF1WUqw2+1MoquDos4cQk1/+mjnpzPVzAr0IOiM5YMQHauDE7/4p/s5NGyDBfClAGBfUmSsHtp+2Dwbjfi+XHqOPSIX6BAx6cHOu/5GLVW3SJ2oBk0PODWjCmJ5G2jxvyfOLrEGe7EKVB17G/WI3qmBFrlpFrJB0GUWyTJ7o2jaJWsphC804MMBKl7EoYDVzYI6mPfk4ofHWPtIDV7gQNEZey46O25XQ+OSsxQx6AGMldJvLYLz1jxKvlfr6C4th5gRRM03wPwFFY+Y2kOrEJAFkmMhNOqhWq4I0Hykat7HPcwTH4SDcOjMSrg83AdT1h44eNr30P9/AVTG/u+9EhffAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo da NetlifyCMS\"\n        title=\"Símbolo da NetlifyCMS\"\n        data-src=\"/static/e324c3413894ba3b6c93df01745cc4d4/3684f/YIgPht1s_400x400.png\"\n        data-srcset=\"/static/e324c3413894ba3b6c93df01745cc4d4/3684f/YIgPht1s_400x400.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>A <a href=\"https://www.netlifycms.org/\">NetlifyCMS </a>é um painel de administraçao com uma <strong>interface rápida, dinâmica e acessível desenvolvida em React</strong>. É de fácil configuração e totalmente <strong>integrada com a hospedagem</strong> <strong>que iremos usar</strong> (falamos mais sobre ela abaixo). Acreditamos ser a <strong>melhor opção de CMS padronizada e custo-benefício</strong> para websites que não tem conteúdos que fujam do padrão (quase todos, né?). </p>\n<p>Nela é possível determinar quais as <strong>coleções</strong> teremos no nosso site e seus respectivos <strong>dados</strong> (existem vários tipos), podendo também <strong>relacionar</strong> essas coleções entre outras coisas. Como você deve imaginar, isso pode causar algumas limitações, por isso <strong>não aconselhamos para sites com dados muito dinâmicos</strong>.</p>\n<p>De quebra essa CMS <strong>também é integrada com o <a href=\"https://github.com/\">GITHUB</a></strong>, mantendo todos nossos arquivos de fácil acesso e gerenciamento. Pela sua <strong>performance e modernidade</strong>, essa CMS também é conhecida como o <strong>\"Wordpress do futuro\".</strong> Dá uma conferida no painel de administração do nosso site, que foi <strong>totalmente construído com essa stack</strong>:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 960px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/943a122358466f208a2d294f09d04119/cb9f4/netlifyCMS.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: 49.16666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABJklEQVQoz5WRS0/DMBCE8/9/FQeOHJC4VMChEgK1IonfbzvD2k3SFJWqRBp5k9jfzo47HxKYjHAuQmkDbSyMcbDWIaWMGNOqXAqmaULO5fyN6t3bHs8vO/T9iE4IDcYYvPfIBFDKENyjlKkBU85tJQ5e3/d4eHzCx+cRQhqMTDXVWkoLLgy6kRsceoGBwNIEcuhWN7V7VYOSGJf4OgwYCMK4brBlXdT1o8a3CLAJ0KHQ2I46KuomV1lyHCiak9OJ3sMK2wJr3VW7QggUclAfrS2GkdEG3jL1IZ7ySucsjfUXwK26OrckaO1aDysCMs5JYnY3X84MrPVN4MgubZ8C1m3sRc4HGjnSxcW21pxvANWfP39ntNX2Ui6A9x6+tu+qw3s2/Qf4A7u+ALlcxiXGAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Print do painel de administração da Evolve\"\n        title=\"Print do painel de administração da Evolve\"\n        data-src=\"/static/943a122358466f208a2d294f09d04119/d9199/netlifyCMS.png\"\n        data-srcset=\"/static/943a122358466f208a2d294f09d04119/8ff5a/netlifyCMS.png 240w,\n/static/943a122358466f208a2d294f09d04119/e85cb/netlifyCMS.png 480w,\n/static/943a122358466f208a2d294f09d04119/d9199/netlifyCMS.png 960w,\n/static/943a122358466f208a2d294f09d04119/07a9c/netlifyCMS.png 1440w,\n/static/943a122358466f208a2d294f09d04119/cb9f4/netlifyCMS.png 1903w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\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<h2>Para hospedagem: Netlify</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b74a45ceff8ccd896c8c14c1f2ef7a5a/3684f/logomarkl.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: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADRElEQVQ4y42U3YtUdRjHv2fOpkQseKF5IVpCoV0Egt0ZhCD9B/4RQiJIgohQiBa9rEStF7rrvrrztrMz7ovrnHNmzsuskdayVIoWKAghIRaGVxHC8fP85twYih74zPOb5/c8n99zfsuO9KwnC6SVtnTFUdI14tVibbmeEejlnpjCJOhLe4Gv72m+1h5EuMHJMnIZMWU/Dl8gW1uTIgq7gTX4/UmDjYh+hrtM/VYhG3AHW230POlyR2pHUkBBJ/SVtm3SjQh+4RXzPsERctvcgVYTRvLa9F3u/E92qSstkVyOTOoKtRZ5NN5ikhxJzlRDxGW+/8NU2xXZ4dTaINa7FBeyeWQLJBbhUsd30iDaojD8mik+UzcMocX6tDqIIwjDoVKYvuotu0F812sOc6nJx0WYZ2PJibcivc6kOeIHcBSB3ZXFP7mSnL1hJrtN3euFbMA5zKU5PlrdkpqMvJSY9BTkTPuIhpz7qajdOUTMkAwTT8CH7A9rsfutFro7neyiOfoTepqLLW4meZuxv+DUy5Aj/o3GTyAviMnt8xbSQWT7kYX03KR3l5O1cKmaGOuQdknmJB9TdJzif+FLGkPk48TDfG8RF4lVDrbaCd7sJBzTbPwaMGEDYZNXnY0PqBF/hbiB+BTSN2n6gPgN/Ah5wTyiwB0+Bw2ox03NputUTxHWYw+kWrwDriIe4pB3KeR+4900nkUwQ2zDHaY5xMG/U2ci4yF970PfVcg8l6im63n9UdYnyZdpOkb8FVahAcdV7a0nfgQ16n6g/j3XW4tLqnfVF9aLRC21+9ysSnJGFU6vxj+plnxKzAv+Y/9j9v9SOWnpwsorrK3Xd9JZE9piyqaDMhtl4kz8ji4kdyDXDPJyMkO09Q34rsjv0TSyit1/omLK4r/F/tIVJ0SWDNAgTWbbNZn+oak0h4NwH1bhc/b2Otl06lNvA/QdTz2VYsNkU+mAJjJpPHsD/oZ73kR2gtj0yqu+pjOr812tDVFOnvOLM52ajOlgAukYjeezrRrNHkLdG+sNeuM92y+5Wkfygt/EycxkNp0Q+oikcyubNNJ7W6M9y5VKI8WhVvtSz7ibTE52PivpHKKRXn9NzhuzO77yzNYneFxM6/9KltQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Símbolo da hospedagem Netlify\"\n        title=\"Símbolo da hospedagem Netlify\"\n        data-src=\"/static/b74a45ceff8ccd896c8c14c1f2ef7a5a/3684f/logomarkl.png\"\n        data-srcset=\"/static/b74a45ceff8ccd896c8c14c1f2ef7a5a/3684f/logomarkl.png 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\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>Para <strong>hospedar</strong> a nossa aplicação usando essa <em>stack</em>, vamos utilizar a hospedagem em nuvem <a href=\"https://www.netlify.com/\">Netlify</a>. Além de ter um <strong>ecossistema muito rico</strong> (gerenciamento de domínio, contas, e-mails, etc) e uma <strong>interface muito acessível</strong>, é <strong>grátis para até 100 alterações mensais</strong> no seu site. Uma nuvem bem escolhida, além de ter um <strong>papel importante na performance</strong> da nossa aplicação, pode deixar os <strong>custos mensais muito mais barata</strong>.</p>\n<h2>Concluindo</h2>\n<p>O <strong>Gatsby</strong> é sem dúvidas a <strong>opção do futuro</strong> (pra gente, o presente!) para <strong>pequenos e médios sites</strong>, em geral institucionais. Essa ferramenta <strong>turbinará totalmente a performance,  usabilidade, carregamento e SEO do seu website</strong>, que são alguns dos principais fatores para um <strong>website perfeito</strong>.</p>\n<p>A hospedagem <strong>Netlify</strong> e o painel de administração <strong>NetlifyCMS</strong> por sua vez, são o <strong>conjunto perfeito e integrado</strong> para uma hospedagem e gerenciamento <strong>rápido e acessível</strong>, além do seu <strong>fantástico custo-benefício</strong>.</p>\n<p><strong>Por outro lado,</strong> se o seu website precisa de um <strong>painel de admnistração personalizado ou páginas com atualizações de dados em tempo real ou muito frequentes</strong> (lojas virtuais, sistemas de gerenciamento, redes sociais e outras plataformas de interação entre usuários, etc), <strong>existem stacks melhores</strong> como <em>React &#x26; Node Rest API, Node MVC</em> entre outras.</p>\n<p>Para finalizar, nos colocamos a disposição para uma <strong>consultoria personalizada e trocarmos uma ideia sobre o potencial da sua ideia e escolher a melhor stack. Conta com a gente pra tudo ;)</strong></p>","timeToRead":6,"fields":{"slug":"/blog/quando-usar-gatsby-js-netlifycms/"},"frontmatter":{"title":"Quando usar: Gatsby.js & NetlifyCMS","category":"misc","image":{"publicURL":"/static/1c7925917ab634288627f592fb6c95a5/add-new-admin-field-to-gatsby-netlify-cms.jpg"},"description":"O Gatsby para muitos é o futuro da web moderna. Mas quais são os benefícios, como funciona seu ecossistema e quando não usar?","date":"14 de março de 2020"}}},"pageContext":{"slug":"/blog/quando-usar-gatsby-js-netlifycms/"}},"staticQueryHashes":["1342666553","2249152690","3023333919","3737124155","4076689451","515424126","698804963","94195747"]}