Jamstack: Construa sites mais rápidos e mais eficientes hoje

Sep 13, 2025
Como
JAMstack main
(Crédito da imagem: Futuro / Joseph Ford)

A Jamstack é um método de criar e servir sites com carga mínima exigida pelo servidor. Obtém seu nome das tecnologias usadas no processo de construção, JavaScript, APIs e Markup. As páginas são construídas na linguagem de marcação antes do tempo e atendem como arquivos HTML estáticos como um usuário solicita-os. Para construir um site e trazer essas tecnologias, você precisa das ferramentas certas. Certifique-se de verificar nossa Melhores editores de código Postar para ajudar a decidir o melhor ambiente de desenvolvimento para você.

Tradicionalmente, quando um usuário clica em uma página da Web, uma série de ações ocorrem. O navegador dos usuários envia uma solicitação para o servidor do site, ele é executado através do código de backend, gera a página correta e os dados são enviados de volta para o navegador e renderizados como uma página da Web. Muito que poderia dar errado, e mesmo quando vai bem, é um pouco mais lento do que um usuário está confortável com no relâmpago rápido mundo digital que agora vivemos.

Mas usar o jamstack significa sites mais eficientes mais eficientes e menos para dar errado. Neste tutorial demonstram como configurar um site de blog no Jamstack para servir como uma introdução aos conceitos. As ferramentas usadas serão Hugo. Como um gerador de site estático, Netlify. Como a ferramenta de construção e Github como hospedagem gratuita para os arquivos.

Para melhorar ainda mais a experiência do seu site, certifique-se de escolher o perfeito hospedagem na web. serviço e melhor Construtor de sites .

01. Faça o download das ferramentas necessárias

Baixe uma cópia de Victor Hugo - Este é um dos vários kits de partida para tirar as coisas do chão rapidamente. Também certifique-se de ter nó instalado no seu ambiente de desenvolvimento. 

https://github.com/netlify-templates/victor-hugo

02. Crie um diretório de trabalho e instale Hugo

Crie um diretório e nomeie-o Jamstack. . É aqui que vamos trabalhar em nossa máquina de desenvolvimento. Extraia os arquivos baixados para Hugo neste diretório e abra-o no prompt de comando. Para instalar todas as dependências, abra o prompt de comando ou um terminal na pasta Jamstack e execute NPM Install. 

npm install

03. Inicie o servidor

JAMstack03

(Crédito da imagem: Joseph Ford)

Quando as dependências terminarem, execute o início do NPM. O servidor de desenvolvimento agora está executando uma cópia local de Victor Hugo, acessível por padrão no localhost: 3000 - Abertura que o link deve mostrar a tela de boas-vindas se tudo for bem sucedido. Uma vez testado, pressione Ctrl. +. C. para parar o servidor.

04. Adicione uma página e um post

JAMstack04

(Crédito da imagem: Joseph Ford)

Alterar o diretório para a pasta do site, então, usando o Hugo New. Comando, adicione um Page-one.md. e A. post-one.md. . Os desenvolvedores que trabalham no Windows precisarão baixar o arquivo hugo.exe e adicionar um caminho para fazer isso funcionar, mas é fácil seguir a documentação existe no Hugo. local na rede Internet. 

 Hugo New Page-one.md
Hugo novo post / post-one.md

05. Adicione conteúdo à página e post

Para fins de teste, alguns conteúdos precisam ser adicionados à nova postagem e ao conteúdo pesado da mídia? Backup com o melhor armazenamento na núvem ). Abra o diretório para o projeto em um navegador de arquivos e navegue até JamStack / Site / Conteúdo. Dentro desta pasta o arquivo Page-one.md. deve agora existir. Há também uma pasta chamada publicar que contém o. post-one.md. Abra os dois arquivos e adicione algum conteúdo na marcação abaixo do --- (ou em alguns casos +++) 

 # Lorem Ipsum Dolor senta amet
## Consectetur adipiscing * elit *
Sed do eusmod temporar incidida ut labore
et polore magna Aliqua.

06. Adicione o tema como um sub-módulo

JAMstack06

(Crédito da imagem: Joseph Ford)

O texto inserido nos arquivos anteriores não pode ser visualizado sem um tema. Como exemplo, o tema Ananke será usado. Excluir o conteúdo da corrente site / layouts. pasta, deixando vazio. Faça um novo diretório na pasta do site chamado temas e, em seguida, altere para ele e execute o seguinte código para importar o tema como um submódulo Git. Nota: A clonagem normal não é compatível com a Netlify. 

 temas de mkdir
Temas de CD.
Git Submodule Adicionar HTTPS: // GitHub
com / & lt; themecreator & gt; / & lt; temename & gt;
https://github.com/budparr/gohugo-theme.
Ananke.git Themes / Ananke

07. Configure o tema e execute o servidor

Copie o conteúdo de Site / Temas / Gohugo-tema Ananke / Exemplosite / Config.toml para sobre o na pasta do site. No topo da página, substitua o URL base com ' / ' e excluir a linha Themesdir = '../ ..' . Salve o arquivo de configuração, abra um terminal e execute iniciar o npm. comando. Você também pode alterar o nome do site (se quiser) substituindo o título valor. 

 CD site
NPM START

08. Teste em um navegador

Abrir http: // localhost: 3000 / página-one / Para ver o tema renderizando a marcação da página como uma página totalmente estilizada. Abrindo a página inicial, o primeiro post agora será visível. Isso significa que o gerador de site estático agora é funcional.

09. Configure o menu

JAMstack09

(Crédito da imagem: Joseph Ford)

Ao visualizar o site, é perceptível que a página feita anteriormente não está mostrando na navegação. Retornando ao conteúdo, adicione uma linha na configuração da frente de matéria, a fim de dizer a Hugo qual menu para renderizar a página. 

 Toml
+++
menu = "principal"
+++
Yaml.
---
Menu: "Main"
---

10. Empurre os arquivos para um github

Em seguida, anime o círculo para responder aos cliques do usuário. Agora, o site estático está em funcionamento, ele precisará ser acessível em um servidor de desenvolvimento. O primeiro passo é empurrar o código para o github. Crie um novo repositório no GitHub e use a linha de comando para empurrar o código da pasta do projeto ou do aplicativo Github Desktop. 

 Git remoto Adicionar origem https://github.com/[gitHubusername]/jamstackTutorial.git
Git Push -u Origin Master

11. Conecte-se ao Netlify

A Netlify trará tudo junto, construirá o site e servi-lo em um domínio temporário. Comece criando uma conta em Netlify. e vinculá-lo com uma conta do Github. Uma vez que tudo está configurado, clique Novo site do git .

12. Conecte-se ao github

Para implantação contínua, clique em Github em seguida, selecione o repo que foi feito anteriormente no tutorial. A Netlify deve detectar automaticamente as melhores opções de compilação para o projeto. Deve ler NPM Run Build. . Se tudo estiver bem, clique em Implantar.

13. Construir site e ver no link da Netlify

JAMstack13

(Crédito da imagem: Joseph Ford)

Quando o site tiver construído, uma mensagem aparecerá dizendo implantado . A Netlify deu ao site um nome de domínio temporário que pode não fazer sentido - isso pode ser alterado simplesmente clicando em Configurações do site. Altere o nome e clique no link para ver o site carregado através da Jamstack.

14. Faça uma mudança para testar a implantação

O site agora carrega através da Jamstack. É relâmpago rápido e atualiza automaticamente quando um compromisso é feito no github. Para testar isso, retorne ao ambiente de desenvolvimento local e Hugo New Page-three.md. do diretório do site. Em seguida, abra o arquivo criado, adicione algum conteúdo, clique em Salvar e confirme o arquivo para o repo. Nos momentos, você notará que a atualização está ao vivo no link da Netlify.

15. Adicione um CMS ao seu site estático

Trabalhar em marcação simples e usar a linha de comando para criar páginas não se sentará bem com a maioria dos clientes. Para tornar o site mais amigável, instale um sistema de gerenciamento de conteúdo. Silvicultura.io. é um ajuste perfeito para a configuração atual. Vá para o site e crie uma conta usando o GitHub.

16. Configure a silvicultura

Clique em Adicionar novo site e selecione Hugo como gerador de site estático, Git como o provedor e preencha as informações nos seguintes formulários. Clique em Enviar e o novo CMS será carregado, pronto para alterações de conteúdo. Agora, as páginas podem ser simplesmente editadas na barra lateral, bem como posts e uma grande variedade de outras opções.

Você quer aprender mais sobre web design? Então Inscreva-se na Net. , a revista mais vendida do mundo para web designers e desenvolvedores.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Aprenda a construir melhor javascript em GenerateJs (Crédito de imagem: Futuro / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Junte-se a nós em Abril 2020 com nossa programação do JavaScript Superstars em GenerateJS - a conferência ajudando você a construir melhor Javascript. Reserve agora em. GenerateConf.com.

Consulte Mais informação:

  • 8 tags HTML que você precisa estar usando (e 5 para evitar)
  • 25 das melhores apis javascript
  • Como ocultar seu código JavaScript da View Source

Como - Artigos mais populares

Como desenhar um cão

Como Sep 13, 2025

O tutorial de hoje mostrará como desenhar um cachorro. Os esqueletos de cães e gatos são bastante semelhantes, especialmente n..

Realizar testes de usuário gratuitos e rápidos com o UserLook

Como Sep 13, 2025

Imagem: Getty Images Suposições são ruins para os negócios. Eles são ruins porque, por natureza, temos opiniões..

Crie uma imagem multi-exposição com Adobe CC

Como Sep 13, 2025

A Adobe me encarregou de criar uma ilustração para expressar o conceito de multilocalismo e, acima, você pode ver minha resposta. Neste tutorial, vou andar pelo meu processo criativo usand..

Desenhe uma figura em menos de cinco minutos

Como Sep 13, 2025

Esboçar uma pose de cinco minutos é muito divertido porque oferece apenas tempo suficiente para capturar um forte sentido da pose, mas não há tempo suficiente para excesso de trabalho (ou..

15 Dicas de retrato de fantasia

Como Sep 13, 2025

Pagina 1 de 2: Página 1 Página 1 Pági..

Como fazer texturas deliciosas com lápis

Como Sep 13, 2025

Ao aprender como desenhar Uma obra de arte morta, é importante criar interesse e envolver o espectador com uma va..

Como transmitir som em uma pintura

Como Sep 13, 2025

Embora não seja possível mostrar som em uma imagem convencional, imóvel (interatividade multimídia de lado), é possível imp..

Como dominar a arte do fã 3D

Como Sep 13, 2025

Depois de assistir a primeira temporada da série de TV Daredevil, eu sabia que tinha que fazer o meu próprio Arte 3D. ..

Categorias