Construir para a web é sempre uma perspectiva empolgante. Ele permite que os desenvolvedores tenham seu caminho para criar aplicativos da web. Eles podem escolher a estrutura, tecnologia, ferramentas e filosofia que desejam usar.
Uma dessas filosofias é o Jamstack. Ele oferece uma abordagem flexível para resolver o problema de desenvolvimento web.
Neste artigo, você aprenderá como criar seu primeiro aplicativo Jamstack. Vamos começar.
últimas postagens
O que é o Jamstack?
Jamstack é uma das novas filosofias da web para construir coisas para a web. Tecnicamente, oferece aos desenvolvedores uma arquitetura da Web combinável. Você pode escolher suas estruturas e ferramentas para atingir o mesmo objetivo.
Se você olhar de perto,
Jam + pilha = JAMstack.
O Jamstack é composto por três componentes principais:
- J para JavaScript
- A para Interface de Programação de Aplicativos (API)
- M para marcação
Essa abordagem separa a lógica de negócios dos dados, dissociando a camada de experiência na web. Os benefícios incluem:
- Tempo de carregamento mais rápido (quase instantâneo).
- Um fluxo de trabalho de desenvolvimento flexível e rápido.
- Melhor escalabilidade e capacidade de manutenção.
Para ler mais sobre Jamstack, confira Jamstack for Newbies.
História do Jamstack
Jamstack é relativamente novo. Em 2016, Matt Biilmann apresentou o Jamstack na apresentação da empresa, mostrando ao mundo como construir um site sem seguir o caminho tradicional.
A solução separa a lógica do aplicativo da dependência do servidor back-end. Portanto, a maior parte do conteúdo é fornecida por meio de arquivos estáticos com CDNs — recursos dinâmicos suportados e acessados por meio de APIs. E, se alguma ação dinâmica precisar ser processada pelo servidor, ela é compilada e enviada para CDNs, antes de ser acessada pelo usuário final.
Para entender melhor a história do Jamstack, devemos olhar para sites estáticos e dinâmicos.
- Site estático: Um site estático é hospedado no servidor, mas não possui aspectos dinâmicos. Durante a era inicial da Internet, a maioria dos sites eram sites estáticos que serviam HTML, CSS e imagens armazenadas em um servidor. A abordagem é rápida, pois o servidor não precisa perder tempo processando a solicitação do usuário e sempre tem os arquivos prontos. No entanto, nenhuma capacidade de mudar nada leva a nenhuma interatividade.
- Site dinâmico: os sites dinâmicos oferecem interatividade processando as solicitações dos usuários e gerando o HTML necessário para servir. A abordagem é lenta, mas adiciona os benefícios da interatividade. A maioria dos sites modernos são sites dinâmicos. O melhor exemplo seriam sites baseados em WordPress.
E, então, temos sites Jamstack. Vamos aprender como ele resolveu o problema de sites estáticos e dinâmicos.
Sites Jamstack: como eles funcionam?
O Jamstack resolve dois problemas principais:
- Tempo de carregamento lento do site dinâmico
- Interatividade de sites estáticos
Um site Jamstack serve arquivos estáticos, o que é rápido. Mas também contém JavaScript, que pode interagir com APIs para servir conteúdo dinâmico.
Nos bastidores, você precisará de um gerador de site estático para fazer o trabalho pesado de criar páginas da web estáticas.
Esses geradores de sites estáticos usam o Markdown para atender a sites estáticos. O gerador de site estático gera arquivos estáticos a partir dos arquivos HTML, CSS e JavaScript disponíveis. Depois de desenvolvido, o site estático é servido por meio de CDNs.
Como você está servindo arquivos estáticos, os sites são carregados quase instantaneamente. No entanto, para adicionar um aspecto dinâmico ao site, você precisa contar com o JavaScript. Os arquivos JavaScript podem se conectar a APIs e adicionar dados dinâmicos por meio da comunicação com um banco de dados.
Construindo o primeiro site Jamstack
Como o Jamtack oferece liberdade, você pode escolher qualquer estrutura Jamstack/gerador de site estático, incluindo Hugo, Gatsby, Next.js, Hexo e outros.
Leia também: Melhores Frameworks para JamStack
E para implantação, você pode implantá-lo no GitHub Pages, Netlify, Azure Static Web Apps e outros.
Usaremos Hugo para desenvolvimento Jamstack e Netlify para hospedar nosso site para este tutorial.
O tutorial pressupõe que você tenha um conhecimento básico da web. Você deve saber como a web funciona. Além disso, você também deve saber como usar o Git.
Vamos começar.
#1. Instalando pré-requisitos: Go e Git
Para instalar o Hugo, você precisa de duas coisas: Git e Go. Precisamos do Git para agilizar nosso fluxo de trabalho de construção (você o verá mais tarde com o Netlify). Go é necessário, pois Hugo é construído sobre ele.
Estamos usando o Ubuntu em execução no WSL 2 no Windows 11. Estamos acessando o kernel do Ubuntu diretamente do Windows.
Leia também: O Windows 11 encontra o Linux: um mergulho profundo nos recursos do WSL2
Você pode escolher um sistema operacional, Windows, Linux ou Mac.
Instalando o Git
No Ubuntu, você pode instalar o Git executando o seguinte comando.
$ sudo apt update $ sudo apt install git
No caso do Windows, você precisará baixar os instaladores binários do Windows. Confira nosso guia completo de instalação do Git.
Para verificar se o Git está instalado corretamente, digite o seguinte comando.
[email protected]:~$ git --version git version 2.34.1
Instalando Go
Agora, é hora de instalar o Golang. Para fazer isso, você precisa executar alguns comandos no Linux. Então, vamos fazer isso em etapas.
Etapa 1: remova a instalação anterior do Go e crie uma árvore Go local.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Etapa 2: Personalizando a variável de ambiente PATH
export PATH=$PATH:/usr/local/go/bi
Etapa 3: Por fim, verifique se o Golang está instalado corretamente.
$ go version. #output go version go1.18.1 linux/amd64
Incrível, agora estamos prontos para instalar o Hugo!
Instalando o Hugo
Dependendo se você estiver usando Homebrew ou Chocolately, você precisará usar um dos seguintes comandos.
Para Homebrew:
$ brew install hugo
Para Chocolate:
$ brew install hugo -confirm
E, se você não usa nenhum deles, pode instalá-los diretamente da fonte.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Para verificar se o Hugo foi instalado com sucesso, execute o seguinte comando.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/etechpt.com/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Criando um site Hugo
Hugo oferece uma maneira fácil de criar um site. Para fazer isso, execute o seguinte comando.
$ hugo new site etechpt.com-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/etechpt.com-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Escolhendo um tema Hugo
Hugo oferece acesso a vários temas. Esses temas fornecem um ponto de partida para o seu projeto. E, para construir um site Jamstack com Hugo, você precisa de um tema.
#4. Criando um site para pequenas empresas com Jamstack
Para o tutorial, vamos usar o Hugo Hero Theme. Este tema multifuncional oferece recursos como seções de largura total e criação de portfólio por meio do Markdown.
Para instalar o tema, copie o link do repo e clone-o. Antes de prosseguir, verifique se você está no diretório raiz.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Copiando o conteúdo padrão
Para usar o conteúdo padrão com o site, execute o seguinte comando.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Ele copia o conteúdo da pasta exampleSite para a raiz do seu site.
Atualizando arquivo config.toml
Em seguida, precisamos editar o arquivo Config.toml. Ele armazena as informações de configuração do projeto, sendo necessário configurá-lo corretamente para que seu site Jamstack funcione.
Por enquanto, você precisa editar a linha a seguir.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Observação: você precisa continuar atualizando o arquivo Config.toml à medida que seu projeto avança. Além disso, como você usou o conteúdo padrão, seu Config.toml é atualizado para acomodar o conteúdo de exemplo.
Testando nosso site Jamstack
Para executar nosso site, precisamos gerar o site Hugo novamente com o comando hugo.
$ hugo
Em seguida, ativamos o servidor. Para fazer isso, execute o comando hugo serve.
$ hugo serve
#output [email protected]:~/etechpt.com$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/etechpt.com/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/etechpt.com/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Observação: seu site agora está hospedado e disponível em 127.0.0.1. Se por algum motivo não estiver abrindo, tente abrir no endereço alternativo informado ao lado. Neste caso, é localhost:42973
Editando o conteúdo padrão dos temas
A partir daqui, você está livre para editar o conteúdo padrão. Você pode fazer isso indo para a pasta Conteúdo. Vamos editar o conteúdo da página de índice. Para fazer isso, vá para Conteúdo > Trabalho > Index.md
É assim que fica depois de editado.
Criando um site de blog
Você deve escolher um tema adequado se estiver apenas procurando criar um blog. Para isso, vamos usar o tema Hyde.
Semelhante à forma como configuramos nosso novo site, você precisa executar os seguintes comandos.
$ hugo new site etechpt.com-jamstack $ cd etechpt.com-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Em seguida, edite o arquivo Config.toml para adicionar o valor theme = ‘hyde’.
Criar uma nova postagem
Você deve executar o comando hugo new para criar uma nova postagem, seguido do arquivo Markdown.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Editando a postagem
Para editar a postagem hellogeefklare.md recém-criada, abra o arquivo hellogeekflare.md em seu editor de texto preferido.
Ele mostrará o seguinte conteúdo.
--- title: "Hello etechpt.com" date: 2023-05-04T11:39:10+05:30 draft: true ---
Aqui, você pode adicionar qualquer conteúdo no Markdown.
Vamos adicionar o seguinte conteúdo no Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Depois de colocar o conteúdo acima no arquivo .md, ele deve se parecer com o abaixo (dependendo do seu editor, estamos usando o Visual Studio Code).
No entanto, parecerá completamente diferente quando o servirmos.
Nota: Certifique-se de alterar o valor do rascunho de “verdadeiro” para “falso”
Incrível! Criamos dois sites Jamstack, um site para pequenas empresas e outro blog.
Depois de editar seu site, você pode gerar os arquivos executando o comando hugo. Ele criará o arquivo e o colocará na pasta /public.
$ hugo
#5. Implantando o site Jamstack no Netlify
Com nosso(s) site(s) criado(s), vamos implantá-los. Para isso, vamos usar o Netlify.
O Netlify é um serviço apoiado por CDN que oferece a usuários como você hospedagem de sites rápidos. Você pode conectar o Netlify ao Github e automatizar o processo. É um serviço gratuito com alguns recursos por trás do paywall.
Nosso trabalho é enviar o código para o Netlify e deixar que o Netlify cuide de tudo para nós.
Configurando o repositório Git localmente
Agora é hora de configurarmos o repositório Git.
Para iniciar o repositório Git, execute o seguinte comando na raiz do seu projeto.
$ git init
Em seguida, precisamos configurar o tema como um submódulo. Este é um passo importante. Tecnicamente, ele cria sub-repositórios dentro do seu repositório. (Lembre-se, você fez um git clone para o tema Hugo?). Isso lhe dará mais controle sobre seu site Jamstack.
Por exemplo, você pode baixar atualizações para seu tema. Você também precisa fazer isso porque o Netlify precisa de temas como submódulos para hospedá-los.
Portanto, para adicionar o tema como um submódulo, execute o seguinte comando.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/etechpt.com-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/etechpt.com-jamstack$
Criando um repositório no GitHub
Depois que a configuração local estiver concluída, é hora de criar um novo repositório GitHub.
Depois de criado, você precisa adicionar a origem ao seu repositório local.
$ git remote add origin https://github.com/logan99/etechpt.com-jamstack-tutorial.git
Agora, puxe-o.
$ git branch -M main $ git pull origin main
Criar um novo commit
Agora, é hora de criar um novo commit. Execute o seguinte comando para adicionar todos os arquivos à ramificação principal.
$ git add .
Agora, execute o comando commit para confirmar as alterações.
$ git commit -m “First commit”
#Output [email protected]:~/etechpt.com-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Por fim, envie as alterações para o GitHub.
$ git push --set-upstream origin main
Observação: você deve inserir seu nome de usuário e senha do GitHub para funcionar.
#6. Trabalhando com Netlify
Excelente, nosso repositório está criado. Agora, passamos para o Netlify. Se você já possui uma conta, faça o login ou crie uma nova conta.
Para contas mais recentes, ele executará instantaneamente um assistente para você. Caso contrário, você chegará ao painel da sua conta. Se você acessar o painel, clique na opção “Adicionar novo site” em Sites.
Em Adicionar novo site, escolha “Importar um projeto existente”.
Em seguida, ele solicitará que você escolha um provedor Git. Como estamos usando o GitHub, vamos escolhê-lo. Você também pode optar por Bitbucket, GitLab e Azure DevOps.
Em seguida, listará todos os seus projetos. A partir daqui, selecione o repositório GitHub que você criou para este projeto. Para nós, é o “etechpt.com-jamstack-tutorial”. Você também pode optar por carregar o outro projeto que criamos.
Em seguida, ele solicitará que você selecione a ramificação a ser implantada e escolha as configurações básicas de compilação. Por enquanto, você pode definir tudo como padrão.
Clique em “Depoy Site” para implantá-lo.
Agora, você precisa esperar que o Netlify faça seu trabalho. Depois de implantado, a mensagem será “Seu site está implantado”.
Agora, clique no site no canto superior esquerdo.
No entanto, você notará que o site não está carregando corretamente. Isso ocorre porque a URL base no arquivo Config.toml não está definida corretamente. Como o Netlify gerou uma nova URL de projeto, você deve adicioná-la ao arquivo Config.toml.
No nosso caso, o site está em https://animated-beijinho-2baa8b.netlify.app/
Isso significa que precisamos adicionar o baseURL a ele.
Para fazer isso, vá para a configuração local e altere o valor.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Para enviar a alteração, você precisa executar o seguinte comando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify é inteligente. Quando detecta um novo commit, ele implanta automaticamente seu site novamente.
Se você carregar seu site agora, ele carregará perfeitamente.
Uau! Você fez isso. Eu sei que há muito a aprender. No entanto, você achará todo o processo intuitivo depois de fazê-lo algumas vezes.
Palavras Finais
Jamstack atraiu a nova era de desenvolvedores. Ele desbloqueia o desempenho e também melhora a forma como os sites são implantados. O Jamstack cresceu com excelentes membros do ecossistema, como Hugo e Netlify. Sem dúvida, só vai crescer a partir daqui.
A seguir, confira como implantar o aplicativo front-end no Netlify.