{"id":43150,"date":"2024-04-01T18:40:25","date_gmt":"2024-04-01T21:40:25","guid":{"rendered":"\/tutoriais\/?p=43150"},"modified":"2025-12-18T11:37:25","modified_gmt":"2025-12-18T14:37:25","slug":"site-estatico","status":"publish","type":"post","link":"\/br\/tutoriais\/site-estatico","title":{"rendered":"O que \u00e9 um site est\u00e1tico, como ele funciona e como criar um"},"content":{"rendered":"<p>Um site est&aacute;tico consiste em p&aacute;ginas com a apar&ecirc;ncia fixa, mantendo seu estilo sempre que acessado. Ele pode ser desenvolvido em<strong> Linguagem de Marca&ccedil;&atilde;o de Hipertexto<\/strong> <strong>(HTML)<\/strong>, Folha de Estilos em Cascata (CSS) e JavaScript.<\/p><p>Os sites est&aacute;ticos s&atilde;o mais r&aacute;pidos e f&aacute;ceis de criar do que os din&acirc;micos, embora os est&aacute;ticos tenham menos funcionalidades. Mesmo com suas limita&ccedil;&otilde;es, o site est&aacute;tico &eacute; a op&ccedil;&atilde;o mais popular para portf&oacute;lios e curr&iacute;culos. Neste artigo, explicaremos sobre sites est&aacute;ticos, incluindo como eles funcionam e se diferenciam de p&aacute;ginas din&acirc;micas. Tamb&eacute;m exploraremos as etapas para criar uma p&aacute;gina est&aacute;tica e mostrar cinco exemplos de sites est&aacute;ticos para sua inspira&ccedil;&atilde;o.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-website-in-9-easy-steps-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/public\" alt=\"\" class=\"wp-image-30342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n\n<\/p><p><\/p><p>\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O Que &eacute; um Site Est&aacute;tico?<\/h2>\n                    <p>Um site est&aacute;tico &eacute; uma galeria de p&aacute;ginas cujo conte&uacute;do permanece igual sempre que os usu&aacute;rios o acessam. Sites est&aacute;ticos podem ser criados com HTML, CSS e JavaScript sem linguagens de script do lado do servidor, como PHP. Apesar da funcionalidade limitada, eles s&atilde;o excelentes para casos espec&iacute;ficos, como portf&oacute;lios.<\/p><p>O c&oacute;digo fonte dos sites est&aacute;ticos pode ser simples, sendo assim, &eacute; poss&iacute;vel come&ccedil;ar o seu site usando um editor de texto b&aacute;sico.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-sites-estaticos-vs-sites-dinamicos\"><strong>Sites Est&aacute;ticos vs Sites Din&acirc;micos<\/strong><\/h3><p>Ao contr&aacute;rio de p&aacute;ginas est&aacute;ticas, os sites din&acirc;micos podem mudar automaticamente de acordo com fatores como localiza&ccedil;&atilde;o dos usu&aacute;rios, fusos hor&aacute;rios e atividades anteriores.<\/p><p>Para alterar o conte&uacute;do da p&aacute;gina, os sites din&acirc;micos usam linguagens de script do lado do servidor como <a href=\"\/br\/tutoriais\/o-que-e-php-guia-basico\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>PHP<\/strong><\/a> junto com HTML, CSS e JavaScript. Isso permite que eles se conectem a um banco de dados para buscar informa&ccedil;&otilde;es que ser&atilde;o adicionadas ao site.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Importante!<\/strong> Sites din&acirc;micos muitas vezes usam linguagem de script do lado do cliente, como JavaScript. Essa linguagem permite que o conte&uacute;do do site mude com base nas informa&ccedil;&otilde;es dos usu&aacute;rios no site.<\/p><\/div>\n\n\n\n<\/p><p>Um banco de dados permite que os usu&aacute;rios interajam e insiram dados em um site din&acirc;mico. Por exemplo, eles podem usar formul&aacute;rios para criar uma conta, comprar um produto ou comentar em uma postagem.<\/p><p>J&aacute; os sites est&aacute;ticos n&atilde;o podem receber informa&ccedil;&otilde;es de usu&aacute;rios e t&ecirc;m interatividade limitada. Por&eacute;m, eles ainda podem ter anima&ccedil;&otilde;es e elementos clic&aacute;veis como bot&otilde;es de navega&ccedil;&atilde;o ou hiperlinks.<\/p><p>Apesar das diferen&ccedil;as, os sites est&aacute;ticos t&ecirc;m v&aacute;rias vantagens sobre os din&acirc;micos:<\/p><ul class=\"wp-block-list\">\n<li><strong>Melhor desempenho<\/strong>. Devido a menos solicita&ccedil;&otilde;es de banco de dados e linhas de c&oacute;digo, sites est&aacute;ticos carregam mais r&aacute;pido. Como os elementos est&aacute;ticos permanecem os mesmos, eles tamb&eacute;m s&atilde;o mais f&aacute;ceis de armazenar em cache com uma <a href=\"\/br\/tutoriais\/o-que-e-cdn\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>rede de entrega de conte&uacute;do<\/strong><\/a> (CDN).<\/li>\n\n\n\n<li><strong>Mais f&aacute;cil de criar<\/strong>. Sites est&aacute;ticos s&atilde;o menos complicados e mais r&aacute;pidos de criar. Eles podem funcionar corretamente sem um script do lado do servidor ou conex&atilde;o com o banco de dados.<\/li>\n\n\n\n<li><strong>Mais seguro<\/strong>. Cibercriminosos podem invadir conex&otilde;es com bancos de dados ou extens&otilde;es para atacar seu site. Como os sites est&aacute;ticos n&atilde;o os utilizam, eles s&atilde;o mais seguros.<\/li>\n<\/ul><p>No entanto, sites est&aacute;ticos tamb&eacute;m t&ecirc;m algumas desvantagens, como:<\/p><ul class=\"wp-block-list\">\n<li><strong>Uso para casos limitados<\/strong>. Um site est&aacute;tico n&atilde;o tem recursos que necessitam de uma conex&atilde;o com o banco de dados, como finaliza&ccedil;&atilde;o de compra de produtos ou reservas, resultando em casos de uso mais limitados.<\/li>\n\n\n\n<li><strong>Falta de personaliza&ccedil;&atilde;o<\/strong>. Um site est&aacute;tico n&atilde;o pode exibir conte&uacute;do personalizado com base nas necessidades e prefer&ecirc;ncias dos visitantes. Isso pode levar a taxas de engajamento e convers&atilde;o mais baixas.<\/li>\n\n\n\n<li><strong>Atualiza&ccedil;&otilde;es dif&iacute;ceis<\/strong>. Para atualizar um site est&aacute;tico, os desenvolvedores devem alterar manualmente o arquivo de cada p&aacute;gina. Isso &eacute; mais demorado e propenso a erros humanos.<\/li>\n<\/ul><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Em vez de escolher entre est&aacute;tico e din&acirc;mico, combine os dois para criar um site h&iacute;brido. Use o m&eacute;todo est&aacute;tico para se&ccedil;&otilde;es raramente atualizadas e o din&acirc;mico para p&aacute;ginas interativas.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-funcionam-os-sites-estaticos\"><strong>Como Funcionam os Sites Est&aacute;ticos<\/strong><\/h2><p>Sites est&aacute;ticos consistem em v&aacute;rios arquivos armazenados em seus servidores de hospedagem. Esses arquivos s&atilde;o renderizados nos navegadores dos visitantes e desenvolvidos em linguagens de marca&ccedil;&atilde;o do lado do cliente, como HTML e CSS.<\/p><p>Quando os visitantes acessam seu site est&aacute;tico, os navegadores deles solicitam os arquivos do servidor de hospedagem. O servidor, por sua vez, responde enviando os arquivos solicitados para exibir o site.<\/p><p>Devido &agrave; aus&ecirc;ncia de linguagens de programa&ccedil;&atilde;o do lado do servidor, os arquivos n&atilde;o mudam antes de serem enviados. Isso significa que todos os visitantes recebem arquivos id&ecirc;nticos, exatamente como armazenados no servidor de hospedagem, e veem o mesmo site.<\/p><p>Existem tr&ecirc;s maneiras comuns de criar um site est&aacute;tico:<\/p><ul class=\"wp-block-list\">\n<li><strong>Desenvolvendo do zero<\/strong>. Programar manualmente o site est&aacute;tico usando HTML, <a href=\"\/br\/tutoriais\/o-que-e-css-guia-basico-de-css\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>CSS<\/strong><\/a> e JavaScript. Este m&eacute;todo &eacute; adequado para desenvolvedores familiarizados com as linguagens de programa&ccedil;&atilde;o e marca&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Usando geradores de sites est&aacute;ticos<\/strong>. Essas ferramentas permitem que voc&ecirc; gere arquivos de site HTML est&aacute;ticos usando modelos. Embora voc&ecirc; ainda precise escrever c&oacute;digos, esse &eacute; um m&eacute;todo mais r&aacute;pido do que criar o site do zero.<\/li>\n\n\n\n<li><strong>Criando um site est&aacute;tico com Criador de Sites<\/strong>. Um Criador de Sites oferece um editor visual para criar sites est&aacute;ticos sem programa&ccedil;&atilde;o. Recomendamos este m&eacute;todo para iniciantes aprenderem a criar seus primeiros sites.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-criar-um-site-estatico-em-4-passos-simples\"><strong>Como Criar um Site Est&aacute;tico em 4 Passos Simples<\/strong><\/h2><p>Nesta se&ccedil;&atilde;o, vamos focar em criar um site est&aacute;tico usando o <strong>Criador de Sites da Hostinger<\/strong>. Embora os passos possam variar se voc&ecirc; usar outro construtor de sites, o processo geral ser&aacute; semelhante.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-compre-uma-hospedagem-um-dominio\"><strong>1. Compre uma Hospedagem + um Dom&iacute;nio<\/strong><\/h3><p>Todos os sites precisam de uma <a href=\"\/br\/hospedagem-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>hospedagem de sites e um dom&iacute;nio<\/strong><\/a> para serem acess&iacute;veis atrav&eacute;s da internet. Com o <a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Criador de sites<\/strong><\/a> da Hostinger, voc&ecirc; n&atilde;o precisar&aacute; compr&aacute;-los separadamente, pois eles est&atilde;o inclusos gratuitamente.<\/p><p>Para outras plataformas de constru&ccedil;&atilde;o, voc&ecirc; pode precisar compr&aacute;-las separadamente, o que pode levar mais tempo para configurar e ser mais caro.<\/p><p>Por outro lado, os <a href=\"\/br\/hospedagem-gratis\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>servi&ccedil;os de hospedagem gratuitos<\/strong><\/a> podem ser suficientes para sites est&aacute;ticos por serem sites mais leves.<\/p><p>Ao escolher um nome de dom&iacute;nio, certifique-se de que ele seja f&aacute;cil de lembrar e represente o prop&oacute;sito do seu site. Isso ajuda os visitantes a lembrar do seu site e a gerar mais tr&aacute;fego org&acirc;nico.<\/p><p>Recomendamos o uso de um <a href=\"\/br\/registro-de-dominio\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>verificador de dom&iacute;nio<\/strong><\/a> para conferir se o endere&ccedil;o desejado est&aacute; dispon&iacute;vel. Se o dom&iacute;nio j&aacute; estiver registrado, use outra <a href=\"\/br\/tutoriais\/o-que-e-tld\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>extens&atilde;o de dom&iacute;nio<\/strong><\/a> ou procure um nome alternativo.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Sugest&atilde;o de Leitura<\/h4>\n                    <p>Recomendamos que voc&ecirc; confira os seguintes tutoriais se estiver criando seu primeiro site:<br>\n <a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\">Como Criar um Site<\/a>.<br>\n<a href=\"\/br\/tutoriais\/como-criar-uma-landing-page\">Como Criar uma Landing Page<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-2-selecione-um-modelo-de-site\"><strong>2. Selecione um Modelo de Site<\/strong><\/h3><p>Ap&oacute;s criar um novo site com o Criador de Sites da Hostinger, voc&ecirc; ser&aacute; direcionado para a biblioteca de modelos. Voc&ecirc; pode escolher um design de site pronto ou usar um modelo em branco.<\/p><p>Para ver como o modelo fica no seu site, passe o mouse sobre ele e clique em <strong>Visualizar<\/strong>. Selecione uma categoria ou use a barra de pesquisa para encontrar o melhor modelo para seu neg&oacute;cio e clique em <strong>Selecionar Modelo <\/strong>para confirmar sua escolha.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfcaf8c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"582\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-11.27.02.png\/public\" alt=\"Galeria de Templates do Criador de Sites\" class=\"wp-image-43157\" style=\"object-fit:contain;width:1024px;height:563px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-11.27.02.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-11.27.02.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-11.27.02.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-11.27.02.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Ap&oacute;s selecionar um modelo, voc&ecirc; ser&aacute; redirecionado para a tela do editor para criar seu site. Explore a p&aacute;gina para verificar alguns dos <a href=\"https:\/\/www.hostinger.com\/website-templates\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>modelos de design de sites<\/strong><\/a> dispon&iacute;veis.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-personalize-as-paginas\"><strong>3. Personalize as P&aacute;ginas<\/strong><\/h3><p>Nosso Criador de Sites permite que voc&ecirc; personalize v&aacute;rios elementos do site, incluindo texto, cores e bot&otilde;es. Voc&ecirc; pode simplesmente arrastar e soltar os elementos para outras &aacute;reas para alterar o layout.<\/p><p>O primeiro passo &eacute; personalizar a p&aacute;gina inicial do modelo padr&atilde;o. Ela &eacute; a primeira coisa que seus visitantes veem quando acessam seu site, por isso, &eacute; importante ter um design bem pensado da sua p&aacute;gina inicial para garantir uma boa primeira impress&atilde;o<\/p><p>Ao personalizar seu site, considere os seguintes aspectos:<\/p><ul class=\"wp-block-list\">\n<li><strong>M&iacute;dia<\/strong>. Use m&iacute;dia de alta qualidade para melhorar o engajamento. No entanto, n&atilde;o adicione muitas imagens ou v&iacute;deos para evitar que seu site fique lento.<\/li>\n\n\n\n<li><strong>Navega&ccedil;&atilde;o<\/strong>. Use cores com contraste e coloque seu menu de navega&ccedil;&atilde;o em um local de f&aacute;cil visibilidade para melhorar a experi&ecirc;ncia do usu&aacute;rio.<\/li>\n\n\n\n<li><strong>Layout<\/strong>. Para dar destaque a informa&ccedil;&otilde;es e detalhes importantes, evite coloc&aacute;-los perto de elementos muito chamativos ou ao final da p&aacute;gina.<\/li>\n\n\n\n<li><strong>Otimiza&ccedil;&atilde;o de mecanismo de busca (SEO)<\/strong>. Adicione um meta t&iacute;tulo e uma meta descri&ccedil;&atilde;o ao seu site para ajudar a gerar mais tr&aacute;fego org&acirc;nico.<\/li>\n<\/ul><p>Ap&oacute;s finalizar o design, v&aacute; em <strong>P&aacute;gina e Navega&ccedil;&atilde;o <\/strong>e clique no &iacute;cone de engrenagem ao lado da p&aacute;gina rec&eacute;m-criada. Selecione <strong>Definir como P&aacute;gina Inicial<\/strong> para definir como a p&aacute;gina inicial do seu site.<\/p><p>A partir deste menu, voc&ecirc; tamb&eacute;m pode criar v&aacute;rias p&aacute;ginas para o seu site. Voc&ecirc; pode remover outras partes do modelo se o seu site est&aacute;tico usa apenas <a href=\"http:\/\/tutoriais\/site-de-pagina-unica\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>uma &uacute;nica p&aacute;gina<\/strong><\/a>.<\/p><p>Observe que seu modelo pode ter elementos interativos, como um formul&aacute;rio de inscri&ccedil;&atilde;o. Como os sites est&aacute;ticos geralmente n&atilde;o t&ecirc;m esses elementos, talvez seja necess&aacute;rio clicar e pressionar Backspace para remov&ecirc;-los.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfcda7e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"173\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/P5.png\/public\" alt=\"Imagem do editor de site do Criador de Sites com o &iacute;cone Adicionar elemento destacado \" class=\"wp-image-43178\" style=\"object-fit:contain;width:1024px;height:173px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/P5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/P5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/P5.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/P5.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Para adicionar novos elementos, v&aacute; para a barra lateral e clique no bot&atilde;o <strong>Adicionar Elemento<\/strong>. Voc&ecirc; pode inserir v&aacute;rios elementos desse menu, incluindo imagens, v&iacute;deos, formas, textos e bot&otilde;es.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-publique-o-site-estatico\"><strong>4. Publique o Site Est&aacute;tico<\/strong><\/h3><p>Ap&oacute;s terminar o design, clique em <strong>Visualizar <\/strong>no canto superior direito da tela do seu editor. No modo de visualiza&ccedil;&atilde;o, aproveite para usar o site e identificar quaisquer problemas de design ou usabilidade.<\/p><p>Voc&ecirc; tamb&eacute;m pode alternar entre os modos de visualiza&ccedil;&atilde;o para desktop e celular. Com o Criador de Sites da Hostinger, voc&ecirc; n&atilde;o precisa criar um novo design ou criar configura&ccedil;&otilde;es adicionais no seu site para torn&aacute;-lo compat&iacute;vel com dispositivos m&oacute;veis.<\/p><p>O Criador de Sites salvar&aacute; automaticamente as altera&ccedil;&otilde;es, para que voc&ecirc; possa publicar sua p&aacute;gina imediatamente. Para fazer isso, clique em <strong>Publicar site<\/strong> ao lado do bot&atilde;o <strong>Visualizar<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-exemplos-de-sites-estaticos\"><strong>Exemplos de Sites Est&aacute;ticos<\/strong><\/h2><p>Como inspira&ccedil;&atilde;o, vamos apresentar cinco exemplos de sites est&aacute;ticos com diferentes casos de uso.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-bootstrap\"><strong>1. <\/strong><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Bootstrap<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfd1378\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"514\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.53.53.png\/public\" alt=\"P&aacute;gina inicial do Bootstrap\" class=\"wp-image-43165\" style=\"object-fit:contain;width:1024px;height:571px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.53.53.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.53.53.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.53.53.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.53.53.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Bootstrap &eacute; um framework que fornece modelos de design em HTML, CSS e JavaScript para acelerar o processo de desenvolvimento de sites. Seu site &eacute; est&aacute;tico e hospedado no <a href=\"https:\/\/pages.github.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>GitHub Pages<\/strong><\/a>.<\/p><p>Os elementos interativos desse site incluem bot&otilde;es de navega&ccedil;&atilde;o e hiperlinks. Ele tamb&eacute;m tem um modo escuro e usa &iacute;cones para os bot&otilde;es de redirecionamento para as m&iacute;dias sociais.<\/p><p>O site do Bootstrap consiste principalmente em um texto sem anima&ccedil;&otilde;es ou muitos elementos visuais. Essa simplicidade resulta em uma velocidade de carregamento mais r&aacute;pida, pois arquivos de sites menores s&atilde;o mais r&aacute;pidos para baixar.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-twitchcon\"><strong>2. <\/strong><a href=\"https:\/\/www.twitchcon.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>TwitchCon<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfd4990\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.56.48.png\/public\" alt=\"P&aacute;gina inicial do Twitch\" class=\"wp-image-43166\" style=\"object-fit:contain;width:1024px;height:571px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.56.48.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.56.48.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.56.48.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-13.56.48.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>A plataforma de streaming Twitch usa <a href=\"https:\/\/jekyllrb.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Jekyll<\/strong><\/a> para criar o site est&aacute;tico do evento de conven&ccedil;&atilde;o anual da empresa. Seu design simples consiste apenas em texto, &iacute;cones e v&iacute;deos promocionais.<\/p><p>Os elementos interativos desse site s&atilde;o principalmente bot&otilde;es de navega&ccedil;&atilde;o na forma de hiperlinks. Al&eacute;m de direcionar os visitantes para uma nova p&aacute;gina, esses links tamb&eacute;m os redirecionam para o blog e o site principal da Twitch.<\/p><p>Como a Twitch apresenta as informa&ccedil;&otilde;es gerais nos outros dois sites, o site est&aacute;tico n&atilde;o tem muitas p&aacute;ginas. Isso mant&eacute;m o site est&aacute;tico leve, permitindo que ele carregue mais rapidamente.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-collins\"><strong>3. <\/strong><a href=\"https:\/\/www.wearecollins.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Collins<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfd7331\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"460\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.00.32.png\/public\" alt=\"P&aacute;gina inicial do site Collins\" class=\"wp-image-43167\" style=\"object-fit:contain;width:1024px;height:571px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.00.32.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.00.32.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.00.32.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.00.32.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>A empresa de estrat&eacute;gia, design e comunica&ccedil;&atilde;o Collins tem um site est&aacute;tico baseado em Jekyll, o que mostra que um site est&aacute;tico pode ser profissional e visualmente atrativo.<\/p><p>Al&eacute;m da navega&ccedil;&atilde;o, esse site tem outros elementos interativos, como os banners e o bot&atilde;o de voltar. Esse &uacute;ltimo &eacute; importante, pois o site apresenta todo o seu trabalho na p&aacute;gina inicial.<\/p><p>O site Collins tamb&eacute;m tem algumas anima&ccedil;&otilde;es acionadas pela intera&ccedil;&atilde;o do usu&aacute;rio. A anima&ccedil;&atilde;o de desvanecer aparece quando os usu&aacute;rios clicam no bot&atilde;o de navega&ccedil;&atilde;o, enquanto os v&iacute;deos pop-up s&atilde;o exibidos quando eles passam o mouse sobre o t&iacute;tulo de uma postagem.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-camilo-holguin\"><strong>4. <\/strong><a href=\"https:\/\/www.camiloholguin.me\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Camilo Holguin<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfd9dcf\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"510\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.13.png\/public\" alt=\"P&aacute;gina inicial do site do desenvolvedor Camilo Holguin\" class=\"wp-image-43168\" style=\"object-fit:contain;width:1024px;height:571px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.13.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.13.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.13.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.13.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>O desenvolvedor web freelancer de front-end, Camilo Holguin, usa um site est&aacute;tico simples para seu curr&iacute;culo. O site &eacute; constru&iacute;do com Gatsby e usa uma &uacute;nica p&aacute;gina para apresentar todas as informa&ccedil;&otilde;es.<\/p><p>Ao acessar o site, os visitantes ver&atilde;o imediatamente o nome do autor e o resumo de sua carreira. Eles tamb&eacute;m encontrar&atilde;o bot&otilde;es de redirecionamento do GitHub, LinkedIn e email &ndash; os &uacute;nicos elementos interativos.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-prism\"><strong>5. <\/strong><a href=\"https:\/\/prism.traction.one\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Prism<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69fff3dfdc63b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"510\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.50.png\/public\" alt=\"Site oficial Prism\" class=\"wp-image-43169\" style=\"object-fit:contain;width:1024px;height:571px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.50.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.50.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.50.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/04\/Screenshot-2024-04-01-at-14.01.50.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Prism &eacute; uma nova linguagem de programa&ccedil;&atilde;o de c&oacute;digo aberto em desenvolvimento. Sua documenta&ccedil;&atilde;o e o site do portal de aprendizado s&atilde;o est&aacute;ticos e constru&iacute;dos com Gatsby.<\/p><p>Esse site consiste principalmente em texto e trechos de c&oacute;digo, sem nenhum elemento visual al&eacute;m do logotipo. Seus elementos interativos incluem bot&otilde;es de navega&ccedil;&atilde;o que redirecionam os visitantes para outra p&aacute;gina e seu reposit&oacute;rio no GitHub.<\/p><p>O Prism &eacute; uma &oacute;tima demonstra&ccedil;&atilde;o do alto desempenho de um site est&aacute;tico. Ele carrega rapidamente, e os usu&aacute;rios podem alternar entre as p&aacute;ginas instantaneamente.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Um site est&aacute;tico &eacute; um conjunto de p&aacute;ginas cujo conte&uacute;do permanece o mesmo sempre que os visitantes o acessam. Esse tipo de site &eacute; constru&iacute;do com HTML, CSS e Javascript sem linguagem de script do lado do servidor.<\/p><p>Vimos que um site est&aacute;tico &eacute; mais r&aacute;pido, mais f&aacute;cil de criar e mais seguro do que o din&acirc;mico. No entanto, &eacute; mais dif&iacute;cil de atualizar, tem funcionalidade limitada e falta personaliza&ccedil;&atilde;o de conte&uacute;do.<\/p><p>Aqui est&aacute; um resumo de como criar um site est&aacute;tico usando uma plataforma de constru&ccedil;&atilde;o de site:<\/p><ul class=\"wp-block-list\">\n<li><strong>Compre um dom&iacute;nio e plano de hospedagem<\/strong>. Isso &eacute; necess&aacute;rio para armazenar seus arquivos de site est&aacute;tico e torn&aacute;-los acess&iacute;veis na internet.<\/li>\n\n\n\n<li><strong>Selecione um modelo<\/strong>. Escolha um modelo da biblioteca para come&ccedil;ar a criar seu site.<\/li>\n\n\n\n<li><strong>Crie sua p&aacute;gina<\/strong>. Ajuste o design do modelo padr&atilde;o, adicione seu conte&uacute;do e crie uma nova p&aacute;gina, se necess&aacute;rio.<\/li>\n\n\n\n<li><strong>Publique seu site<\/strong>. Verifique se h&aacute; erros e publique seu site est&aacute;tico quando terminar.<\/li>\n<\/ul><p>Recomendamos a cria&ccedil;&atilde;o de um site est&aacute;tico se voc&ecirc; n&atilde;o precisa de muitas p&aacute;ginas e recursos. Por exemplo, &eacute; ideal para um portf&oacute;lio ou uma p&aacute;gina de informa&ccedil;&otilde;es de contato.<\/p><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-sobre-site-estatico\"><strong>Perguntas Frequentes sobre Site Est&aacute;tico<\/strong><\/h2><p>Responderemos a duas perguntas comuns sobre sites est&aacute;ticos para te ajudar a entender mais sobre eles.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694411a577da0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Quando Usar um Site Est&aacute;tico vs um Site Din&acirc;mico?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Use um site est&aacute;tico se voc&ecirc; raramente atualiza o conte&uacute;do da sua p&aacute;gina e n&atilde;o tem elementos interativos como formul&aacute;rios.<br>Evite um site est&aacute;tico se o seu conte&uacute;do for atualizado em tempo real ou se o idioma depender da regi&atilde;o. Al&eacute;m disso, ele &eacute; ideal para quem tem poucas p&aacute;ginas.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694411a577da3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Para que Servem os Sites Est&aacute;ticos?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sites est&aacute;ticos s&atilde;o ideias para uso pessoal, como curr&iacute;culos ou portf&oacute;lios. Menos comumente, eles tamb&eacute;m s&atilde;o usados para <a href=\"\/tutoriais\/site-para-empresas\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>sites de pequenas empresas<\/strong><\/a>, cartazes de eventos e sites de campanha.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Um site est&aacute;tico consiste em p&aacute;ginas com a apar&ecirc;ncia fixa, mantendo seu estilo sempre que acessado. Ele pode ser desenvolvido em Linguagem de Marca&ccedil;&atilde;o de Hipertexto (HTML), Folha de Estilos em Cascata (CSS) e JavaScript. Os sites est&aacute;ticos s&atilde;o mais r&aacute;pidos e f&aacute;ceis de criar do que os din&acirc;micos, embora os est&aacute;ticos tenham menos funcionalidades. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/site-estatico\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":433,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Aprenda como um Site Est\u00e1tico pode ser efici\u00eante para certos projetos. Desenvolva sua presen\u00e7a online com nosso passo-a-passo.","rank_math_focus_keyword":"site est\u00e1tico","footnotes":""},"categories":[4941],"tags":[7632],"class_list":["post-43150","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-site-estatico"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/static-website","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-estatico","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/site-web-statique","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/pagina-web-estatica","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/website-statis-adalah","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/static-website","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-a-static-website-how-does-it-work-and-how-to-make-one","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-a-static-website-how-does-it-work-and-how-to-make-one","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/pagina-web-estatica","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/pagina-web-estatica","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/pagina-web-estatica","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-estatico","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/static-website","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/static-website","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/static-website","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/static-website","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/43150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/433"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=43150"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/43150\/revisions"}],"predecessor-version":[{"id":51612,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/43150\/revisions\/51612"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=43150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=43150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=43150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}