O Hugo é um popular gerador de site estático (SSG) de código aberto projetado para ajudar os desenvolvedores a criar e gerenciar sites de forma rápida e eficiente. Ele pode ser usado para criar blogs, portfólios e todos os tipos de sites pessoais que não exigem dados dinâmicos.
Ao criar sites com o Hugo, você certamente desejará hospedá-los on-line para poder compartilhá-los com todos que precisam acessá-los. É aqui que entra a Hospedagem de Site Estático da Kinsta!
Entendendo a Hospedagem de Site Estático da Kinsta
A Hospedagem de Site Estático da Kinsta é um serviço gratuito dedicado à hospedagem de sites estáticos. Ele faz isso servindo arquivos HTML, CSS e JavaScript pré-construídos que não mudam dinamicamente. Funciona conectando um repositório hospedado em um provedor Git (BitBucket, GitHub ou GitLab) à sua conta Kinsta e implementando os arquivos do seu site estático na internet.
A Hospedagem de Site Estático da Kinsta pode criar sites automaticamente a partir de SSGs criados com base no Node.js, enquanto para outros, como o Hugo, escritos na linguagem de programação Go (Golang), você precisaria criar outra abordagem.
Este artigo explica como você pode hospedar seu site Hugo gratuitamente com a Hospedagem de Site Estático da Kinsta!
Implante seu site Hugo na Hospedagem de Site Estático da Kinsta
Há três maneiras de implantar seu site Hugo na Hospedagem de Site Estático da Kinsta:
- Crie seu site usando Integração Contínua e Implantação Contínua (CI/CD).
- Utilize a dependência de desenvolvedor hugo-bin.
- Sirva arquivos estáticos criados localmente.
Neste artigo, abordaremos todos eles.
Pré-requisitos
Para acompanhar este tutorial, presumimos que você tenha:
- Experiência com Hugo e Git.
- Um site Hugo executando localmente.
Crie seu site com o CircleCI e implante na Kinsta
No primeiro método, vamos usar o CircleCI como a ferramenta de CI/CD. Esse método envolve a criação de um fluxo de trabalho CircleCI que constrói seu site Hugo em um novo branch chamado deploy e, em seguida, configura a Kinsta para implantar os arquivos estáticos desse branch.
Vantagens de usar CI/CD
Com esse método, você não tem necessidade de criar localmente seu site antes de enviá-lo para o repositório Git. Normalmente, a Kinsta lida com o processo de build de sites para SSGs baseados no Node.js, mas para outros SSGs, como o Hugo, usar um fluxo de trabalho ajuda a lidar automaticamente com o processo de build de sites.
Além disso, você pode adicionar outros jobs ao seu arquivo de configuração de CI/CD, por exemplo, para fazer lint e testar seu código. Você também garante que a implantação só será atualizada se o pipeline de CI/CD for concluído com êxito.
Etapa 1: Crie o arquivo de configuração
Comece criando uma pasta .circleci no diretório raiz do seu projeto Hugo. Dentro dessa pasta, crie um arquivo config.yml para definir a configuração do seu fluxo de trabalho.
Etapa 2: Envie seu código para um repositório Git
Crie um repositório Git usando o provedor Git de sua preferência e envie seu código para o repositório.
Etapa 3: Crie um branch órfão
Em seguida, crie um branch órfão vazio chamado deploy, para o qual os arquivos estáticos para a implantação serão enviados. Execute os seguintes comandos no terminal do seu projeto:
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deployNão adicione nenhum arquivo a esse branch; ele será automaticamente preenchido pelo fluxo de trabalho do CircleCI com o conteúdo da pasta public gerada pelo Hugo.
Etapa 4: Crie uma conta CircleCI
Visite o site do CircleCI e crie uma conta se você ainda não tiver uma. Você pode se inscrever usando seu provedor Git preferido, o que facilita o acesso a seus repositórios sem configuração adicional.
Etapa 5: Configure seu repositório
Depois de fazer login, vá para o seu painel do CircleCI, clique em Projects na barra lateral esquerda e selecione o repositório que você deseja configurar. O CircleCI detectará automaticamente seu arquivo de configuração.
Clique no botão Set Up Project (Configurar projeto) para conceder ao CircleCI acesso à sua base de código e para executar fluxos de trabalho após alterações de código.
Etapa 6: Defina a configuração do CircleCI
Agora você tem um arquivo de configuração CircleCI criado. Vamos construir seu conteúdo. Certifique-se de que você está em seu branch padrão (não no branch deploy) e comece definindo a versão do CircleCI, que atualmente é 2.1:
version: 2.1Etapa 7: Defina executores
Como este é um projeto Hugo, você precisará definir um executor para executar os jobs. Defina o hugo-executor aqui para que você não tenha que o definir para cada job. Esse executor usa uma imagem do Docker (cibuilds/hugo:latest) para criar um ambiente consistente para a criação do site Hugo:
executors:
hugo-executor:
docker:
- image: cibuilds/hugo:latestEtapa 8: Defina os jobs
Em seguida, defina dois jobs: build e push build. Esses jobs especificam as etapas a serem executadas em cada job:
jobs:
build:
executor: hugo-executor
push build:
executor: hugo-executorO job build:
Esse job é responsável pela criação do site Hugo e pelo armazenamento temporário dos arquivos estáticos gerados no espaço de trabalho, de modo que possam ser acessados para uso posterior no job push build.
build:
executor: hugo-executor
steps:
- checkout
- run:
name: Update theme
command: git submodule update --init --recursive
- run:
name: Build Hugo site
command: hugo --destination=workspace/public
# Persist the 'build' directory to the workspace
- persist_to_workspace:
root: workspace
paths:
- publicO job acima especifica que usa o executor hugo-executor definido anteriormente. Em seguida, executa quatro etapas principais:
checkout: Esta etapa verifica o código-fonte do seu projeto no repositório do GitHub.Update theme: Esta etapa inicializa e atualiza os submódulos do Git (se houver) para garantir que o tema do Hugo esteja atualizado. Isso é útil se o seu site Hugo usa Gitmodules para indicar o tema usado em vez de enviar grandes arquivos de temas já disponíveis no GitHub.Build Hugo site: Esta etapa cria o site Hugo e especifica a pasta de destino como workspace/public.persist_to_workspace: Esta etapa persiste o diretório public (saída da build do Hugo) no espaço de trabalho para uso posterior no jobpush build.
O job push build:
O job push build é responsável por enviar o site criado para um branch órfão (deploy) no seu repositório do GitHub. Dessa forma, seu código permanece no branch padrão, e o branch deploy hospeda apenas os arquivos estáticos do seu site.
push build:
executor: hugo-executor
steps:
- attach_workspace:
at: workspace
- run:
name: Push build folder to GitHub
command: |
# Configure Git identity (replace <GitHubUsername> with your actual username)
git config --global user.name "<GitHubUsername>"
git config --global user.email "<GitHubUsername>@users.noreply.github.com"
# Clone the repository (replace <your-repo-name> with your actual repository URL)
git clone --branch deploy --depth 1 https://<GitHubUsername>:${GITHUB_TOKEN}@github.com/<GitHubUsername>/<your-repo-name>.git deployment
# Copy the 'public' directory to the deployment folder
cp -R workspace/public deployment
# Navigate to the deployment folder
cd deployment
# Commit and push changes
git add .
git commit -m "Auto generated from ${CIRCLE_SHA1}"
git pushO job acima faz o seguinte:
attach_workspace: Esta etapa anexa o espaço de trabalho onde o jobbuildpersistiu o diretório public.Push build folder to GitHub: Esta etapa executa várias operações do Git:- Configura a identidade do Git com seu nome de usuário e e-mail do GitHub.
- Clona o seu repositório do GitHub em uma pasta chamada deployment na máquina que executa o CircleCI.
- Copia o conteúdo do diretório workspace/public (o site Hugo construído) para a pasta deployment.
- Muda o diretório de trabalho para deployment.
- Faz o commit das alterações com uma mensagem indicando que é um commit gerado automaticamente pelo CircleCI.
- Envia as alterações para um novo branch em seu repositório GitHub.
Certifique-se de substituir <GitHubUsername> e <your-repo-name> pelo seu nome de usuário e nome do repositório reais no GitHub. Além disso, certifique-se de criar um token de acesso ao GitHub para que o CircleCI possa acessar sua conta do GitHub.
Em seguida, adicione o token como uma variável de ambiente chamada GITHUB_TOKEN em Project Settings (Configurações de projeto) do CircleCI.
Etapa 9: Defina o fluxo de trabalho
Com seus jobs configurados, a próxima fase envolve configurar seu fluxo de trabalho. Continuando a configuração do CircleCI, crie um fluxo de trabalho que aciona o job build quando houver alterações de código no branch main e exige que o job build seja concluído com êxito antes de executar o job push build:
workflows:
version: 2
build-and-deploy:
jobs:
- build:
filters:
branches:
only:
- main
- push build:
requires:
- buildEtapa 10: Faça o commit e envie
Depois que o fluxo de trabalho estiver configurado com êxito, faça o commit e envie suas alterações para o repositório Git. O CircleCI detecta automaticamente a presença do arquivo de configuração e aciona os fluxos de trabalho definidos quando você altera o código.
Quando você verifica seu repositório GitHub, o branch deploy já tem a pasta public, que contém os arquivos estáticos.
Você pode verificar a configuração completa do CircleCI neste repositório de amostra.
Etapa 11: Implante arquivos estáticos na Kinsta
A implantação na Kinsta ocorre em apenas alguns segundos, especialmente agora que os arquivos estáticos já foram criados. Siga estas etapas para implantar seu site Hugo gratuitamente com a Hospedagem de Site Estático:
- Faça login ou crie uma conta para visualizar seu painel MyKinsta.
- Autorize a Kinsta com seu provedor Git.
- Clique em Sites estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
- Selecione o repositório e o branch a partir do qual você deseja implantar (o branch
deploy). - Atribua um nome exclusivo ao seu site e clique em Continuar.
- Deixe os campos Comando de build e Versão do node vazios e especifique o Diretório de publicação como
public. - Por fim, clique em Criar site.
E é isso! Agora você tem um site implementado em poucos segundos. Você receberá um link para acessar a versão implementada do seu site. Mais tarde, você pode adicionar seu domínio personalizado e certificado SSL, se desejar.
Usando o Hugo-Bin para criar e implantar seu site Hugo na Kinsta
O pacote Hugo-bin é um wrapper binário para o Hugo. Ele permite que você crie e sirva seu projeto Hugo com comandos Node.js. Esse método não precisa de uma ferramenta de CI/CD para criar seu site antes de implementá-lo na Hospedagem de Site Estático da Kinsta.
Para usar o pacote Hugo-bin em seu projeto Hugo:
- Inicialize o Node.js na raiz do seu projeto executando o comando
npm init -y. - Em seguida, instale o Hugo-bin como uma dependência de desenvolvedor em seu projeto executando este comando:
npm i -D hugo-bin- Adicione os seguintes comandos de script ao seu arquivo package.json:
"scripts": {
"build": "hugo",
"create": "hugo new",
"serve": "hugo server"
}Com isso, a Kinsta poderá criar e servir seu site Hugo sem que você precise criar seus arquivos antes da implantação.
Quando tudo estiver pronto, envie seu código para o repositório Git. Siga estas etapas para implantar seu site estático na Kinsta:
- Faça login ou crie uma conta para visualizar seu painel MyKinsta.
- Autorize a Kinsta com seu provedor Git.
- Clique em Sites estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
- Selecione o repositório e o branch a partir do qual você deseja implantar.
- Atribua um nome exclusivo ao seu site.
- Adicione as configurações de build no seguinte formato:
- Comando de build: npm run build
- Versão do node: 18.16.0
- Diretório de publicação: public
- Por fim, clique em Criar site.
E é isso! Agora você tem um site implementado em poucos segundos.
Servindo seus arquivos estáticos somente para a Kinsta
Por fim, outro método para implantar seu site Hugo na Kinsta envolve a criação do site localmente, seguido da implantação na Kinsta. Esse processo gera uma pasta public na raiz do seu projeto. No entanto, a principal desvantagem de usar esse método é que você precisa criar seu site localmente antes de cada push, o que pode ser demorado e menos conveniente em comparação com outros métodos que automatizam o processo de build de sites.
Por padrão, a pasta public é excluída do seu repositório Git devido à sua inclusão no arquivo .gitignore. Para incluí-la em seu repositório e implantar seu site na Kinsta:
- Remova a pasta public do seu arquivo .gitignore.
- Siga as etapas de implantação explicadas acima.
- Implante o repositório na Kinsta, certificando-se de que os campos Comando build e Versão do node permaneçam vazios, pois seu site já está compilado.
- Especifique o Diretório de publicação como
public.
Como alternativa, você pode optar por enviar apenas os arquivos estáticos para o seu repositório GitHub. Para essa abordagem, não há necessidade de inicializar um repositório Git na pasta raiz do seu projeto. Você só precisa executar o git init na pasta public. Isso permite que você mantenha o controle de versão dos seus arquivos estáticos separado do restante do seu projeto.
Nesse cenário, ao enviar os arquivos separadamente sem colocá-los em uma pasta public, especifique o Diretório de publicação como . ao fazer a implantação na Kinsta. Essa notação representa a pasta raiz, e a Kinsta servirá os arquivos de acordo.
Resumo
Este artigo explicou três métodos eficazes para você implantar seu site Hugo gratuitamente na plataforma de Hospedagem de Site Estático da Kinsta. Você tem a flexibilidade de escolher o método que melhor se alinha com seus requisitos específicos. Além disso, para obter informações detalhadas sobre como criar um site estático extremamente rápido usando o Hugo, leia nosso guia abrangente.
Deixe um comentário