Como hospedar uma estática WordPress Site Gratuito (em GitHub Pages, Vercel, Netlify)

WordPress é um sistema de gerenciamento de conteúdo poderoso e popular, mas que hospeda um ambiente dinâmico WordPress local pode ser caro e exigir manutenção contínua. Para muitos sites ou blogs simples, uma versão estática de um WordPress site pode ser uma excelente alternativa. Sites estáticos são mais rápidos, seguros e podem ser hospedados gratuitamente em plataformas como GitHub Pages, Netlify ou Vercel.

Neste tutorial, percorrerei o processo de criação de uma versão estática do seu WordPress site e hospedá-lo gratuitamente. Essa abordagem é perfeita para iniciantes que desejam aproveitar a facilidade de uso WordPress interface para criação de conteúdo enquanto aproveita os benefícios de um site estático.

Ferramentas que você precisa

Antes de mergulhar no processo, vamos garantir que você tenha todas as ferramentas necessárias. Aqui está uma lista de tudo que você precisa para hospedar sua estática WordPress site gratuitamente:

Antes de prosseguir com o tutorial, certifique-se de ter essas ferramentas instaladas e as contas configuradas. Ter tudo pronto tornará o processo tranquilo e direto.

Etapa 1: Desenvolva seu WordPress Site no LocalWP

Antes de começarmos, você precisará ter seu WordPress local pronto. Se você ainda não criou seu site ou se ele está hospedado em outro lugar, recomendo usar LocalWP (anteriormente Local by Flywheel) para desenvolver e testar seu site localmente.

1. Baixe e instale LocalWP gratuitamente em localwp. com.
2. Crie um novo WordPress site em LocalWP.
3. Projete seu site, adicione conteúdo e instale os plug-ins necessários.
4. Certifique-se de que seu site tenha a aparência e funcione exatamente como você deseja em sua forma estática.

Compreendendo as limitações de sites estáticos

Enquanto estático WordPress sites oferecem benefícios como maior velocidade, segurança e opções de hospedagem gratuita, é importante estar ciente de suas limitações. Algumas características dinâmicas de WordPress não funcionará em um ambiente estático:

1. WordPress Formulários: Tradicional WordPress formulários que dependem de processamento no servidor não funcionarão. Isso inclui formulários de contato, formulários de inscrição e outros formulários interativos.
2. WordPress Comentários: sistemas de comentários dinâmicos que permitem interações do usuário em tempo real não são suportados em sites estáticos.
3. Acesso à área administrativa: Quaisquer links para /wp-admin ou similar interno WordPress as rotas não funcionarão, pois requerem processamento no servidor.
4. Atualizações de conteúdo em tempo real: sites estáticos exigem regeneração e reimplantação para que quaisquer alterações de conteúdo apareçam, ao contrário dos sites dinâmicos WordPress locais onde as mudanças são imediatas.
5. Autenticação de usuário: os recursos que exigem logins ou associações de usuário não são compatíveis com uma configuração básica de site estático.
6. Funcionalidade de comércio eletrônico: carrinhos de compras dinâmicos e processamento de pagamentos normalmente não funcionam em um ambiente estático.
7. Funcionalidade de pesquisa: WordPressO recurso de pesquisa integrado do não funcionará, embora alternativas possam ser implementadas (conforme mencionado nos recursos do Simply Static Pro).
8. Barras laterais e widgets dinâmicos: os widgets que extraem dados em tempo real ou exigem processamento no servidor não funcionarão conforme o esperado.

Possíveis Soluções Alternativas

Embora essas limitações existam, existem maneiras de mitigar algumas delas:

• Para formulários, você pode usar serviços de terceiros como Formspree ou Netlify Forms.
• Os comentários podem ser tratados por meio de serviços como Disqus ou Facebook Comments.
• A funcionalidade de pesquisa pode ser implementada usando soluções do lado do cliente como Lunr.js ou Algolia (conforme oferecido no Simply Static Pro).
• Para comércio eletrônico, considere usar serviços externos como Snipcart ou Gumroad.

Ao desenvolver seu WordPress site, tenha essas limitações em mente e planeje a estrutura e os recursos do site de acordo. Concentre-se em páginas orientadas por conteúdo e minimize a dependência de recursos dinâmicos que não serão traduzidos em um ambiente estático.

Etapa 2: instalar e configurar o Simply Static

Simply Static é gratuito WordPress plug-in que gera uma versão estática do seu WordPress site. Veja como configurá-lo:

1. Em sua WordPress painel, vá para Plugins > Adicionar novo.
2. Pesquise “Simply Static”, instale o plugin e ative-o.
3. Vá para Simply Static > Configurações em seu WordPress painel de controle.
4. Na guia “Geral”, defina o seguinte:
   • URLs de destino: escolha “Salvar para uso offline”. Se você já possui um domínio personalizado, escolha “URLs absolutos”, conforme imagem abaixo:

5. Diretório Local: Defina como um diretório fora do seu WordPress instalação, por exemplo, /Users/yourusername/Documents/StaticSite

6. Na guia “Incluir/Excluir”, certifique-se de que todos os URLs necessários estejam incluídos.
   • Na maioria dos casos use /wp-content/ e /wp-includes/

7. Salve suas configurações.

Há também um versão profissional do SimplyStatic, Aqui está um resumo dos recursos profissionais do plugin Simply Static:

1. Implantação avançada:
   • Implante sites estáticos em diversas plataformas, incluindo SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces e BunnyCDN.
2. Atualizações fáceis do site:
   • Gerencie atualizações de conteúdo com eficiência, seja para postagens únicas, atualizações em massa ou URLs específicos.
3. Integração de formulários e comentários:
   • Integre perfeitamente formulários de plug-ins populares como Contact Form 7, Gravity Forms e Elementor Forms em seu site estático.
4. Funcionalidade de pesquisa:
   • Implemente pesquisa básica usando Fuse.js ou atualize para uma experiência de pesquisa mais abrangente com Algolia.
5. Suporte WP CLI:
   • Use WP-CLI para configurar, exportar e gerenciar recursos Simply Static diretamente da linha de comando.
6. Suporte multilíngue:
   • Ofereça conteúdo em vários idiomas com integrações para WPML, Polylang e TranslatePress.
7. Minificação:
   • Otimize o desempenho do site minimizando arquivos CSS, JavaScript e HTML estáticos.
8. WordPress Ocultação:
   • Substituir padrão WordPress caminhos para esconder o fato de que WordPress está sendo usado como sistema de gerenciamento de conteúdo.

Esses recursos profissionais melhoram significativamente a funcionalidade e a flexibilidade dos estáticos WordPress sites, permitindo implantações mais avançadas, melhor desempenho e melhor experiência do usuário.

Etapa 3: inicializar o repositório Git

Agora que configuramos nosso gerador de site estático, vamos preparar nosso diretório local para controle de versão:

1. Abra um terminal ou prompt de comando.
2. Navegue até o diretório especificado em Simply Static (por exemplo, cd /Users/yourusername/Documents/StaticSite).
3. Inicialize um novo repositório Git executando:

   git init

Etapa 4: crie um repositório GitHub

Usaremos GitHub Desktop para criar e gerenciar nosso repositório:

1. Baixe e instale o GitHub Desktop em desktop.github.com se você não tiver já.
2. Abra o GitHub Desktop e faça login na sua conta GitHub.
3. Clique em “Arquivo” > “Novo Repositório” ou use o botão “Criar um Novo Repositório em seu disco rígido”.
4. Defina o seguinte:
   • Nome: Escolha um nome para seu repositório (por exemplo, “meu-wordpress-estático”)
   • Caminho local: defina para o mesmo diretório que você especificou em Simply Static
   • Inicialize este repositório com um README: deixe desmarcado
   • Git ignore: Escolha “None” (criamos o nosso próprio na etapa 3)
   • Licença: Escolha uma licença apropriada ou deixe como “Nenhum”
5. Clique em “Criar Repositório”

Passo 5: Confirmar o Repositório

Agora que temos nosso repositório configurado, vamos fazer nosso primeiro commit:

1. No GitHub Desktop, você deverá ver todos os arquivos do seu site estático listados como alterações.
2. Insira um resumo para o seu commit (por exemplo, “Commit inicial de arquivos estáticos do site”).
3. Clique em “Commit to main” (ou “Commit to master” em versões mais antigas).
4. Clique em “Publicar repositório” para enviar seu repositório local ao GitHub.

Etapa 6: execute uma exportação simplesmente estática

Agora é hora de gerar nosso site estático:

1. Volte para o seu WordPress painel de controle.
2. Navegue até Simplesmente Estático > Gerar. (Você pode ignorar o alerta de erro de diagnóstico, pois está implantando apenas em um diretório local).
3. Clique em “Gerar arquivos estáticos”.
4. Aguarde a conclusão do processo. Isso pode levar alguns minutos dependendo do tamanho do seu site.
5. Depois de concluído, volte para GitHub Desktop.
6. Você deverá ver os arquivos recém-gerados ou atualizados listados como alterações.
7. Confirme essas alterações com uma mensagem como “Atualizar arquivos estáticos do site”.
8. Envie as alterações para o GitHub clicando em “Push origin”.

Etapa 7: Conecte o repositório a uma plataforma de hospedagem

Agora que nosso site estático está no GitHub, podemos conectá-lo facilmente a uma plataforma de hospedagem gratuita. Fornecerei instruções para GitHub Pages, Netlify e Vercel:

Páginas GitHub

1. Acesse seu repositório em GitHub.com.
2. Clique em “Configurações” > “Páginas” na barra lateral esquerda.
3. Em “Fonte”, selecione “Implantar de uma filial”.
4. Escolha a ramificação que deseja implantar (geralmente “principal” ou “mestre”).
5. Selecione a pasta raiz (/) e clique em “Salvar”.
6. Seu site estará no ar às https://yourusername.github.io/repository-name/.

Netlify

1. Inscreva-se para uma conta gratuita em netlify. com.
2. Clique em “Novo site do Git” no painel do Netlify.
3. Escolha GitHub como seu provedor Git e autorize o Netlify.
4. Selecione seu repositório na lista.
5. Deixe o comando build e o diretório de publicação em branco.
6. Clique em “Implantar site”.
7. Seu site estará ativo em um subdomínio Netlify, que você pode personalizar nas configurações do site.

Vercel

1. Inscreva-se para uma conta gratuita em vercel.com.
2. Clique em “Novo Projeto” no painel do Vercel.
3. Importe seu repositório GitHub.
4. Deixe as configurações de compilação como estão (o Vercel deve detectar automaticamente que é um site estático).
5. Clique em “Implantar”.
6. Seu site estará ativo em um subdomínio Vercel, que você pode personalizar nas configurações do projeto.

Resumo

Parabéns! Agora você tem uma versão estática do seu WordPress site hospedado de graça. Lembre-se de regenerar e enviar seus arquivos estáticos sempre que fizer alterações em seu WordPress site. Este fluxo de trabalho permite que você aproveite a facilidade de WordPress para criação de conteúdo enquanto se beneficia da velocidade, segurança e hospedagem gratuita de um site estático.

Algumas dicas adicionais:

• Considere configurar um domínio personalizado para uma aparência mais profissional.
• Atualize regularmente seu WordPress instalação e plug-ins para garantir que você esteja trabalhando com os recursos e atualizações de segurança mais recentes.
• Explore os recursos avançados do Versão Pro do Simply Static, como se esconder WordPress e configurar formulários ou funcionalidade de pesquisa para seu site estático.