Essas foram as ferramentas que utilizei para realizar o desenvolvimento do meu blog estático. Nesse post, vou tentar resumir a combinação que fiz para que tudo isso virasse um blog.

Site Estático

O que é um site estático? Um site estático nada mais é do que um código HTML que se hospeda em algum lugar, não sendo necessário banco de dados, plugins e afins para que o site funcione. Dessa maneira, conseguimos uma boa perfomance quando comparado a um Content Management System (CMS).

Hugo Framework

O Hugo Framework é um framework desenvolvido em GO, e não é necessário você saber desenvolver em GO para utiliza-lo, apenas mudando alguns parametros simples o site é gerado, depois de gerado ele é compilado e enviado para a hospedagem. Simples, rápido e prático!

Com o Hugo Framework, você consegue escrever posts no formato Markdown, que quando compilado, vira HTML.

Git Workflow

O Github Workflow (Github Actions) é uma plataforma de integração contínua e entrega contínua (CI/CD), que nos permite automatizar compilações, nada mais é do que uma pipeline de implantação.

Cloudflare

A Cloudflare é uma provedora de serviços mais conhecida por seu CDN, mas que também nos permite fazer toda a parte de compilação do código que iremos utilizar para nosso site estático.

HANDS-ON

Agora, vou tentar explicar o que realmente foi feito na prática para que o blog funcionasse.

Antes de mais nada, caso você queira realizar os mesmos passos que eu fiz, certifique-se de que você tenha conta no Github e na Cloudflare.

Utilizei uma máquina com ubuntu server para realizar todo esse projeto.

Certo disso, iremos iniciar realizando a instalação do hugo:

sudo apt install hugo

Realizado a instalação do Hugo, basta você começar utiliza-lo iniciando o projeto:

hugo new site <NomeProjeto> # onde tem <NomeProjeto> é onde você irá inserir o nome do seu projeto/site exemplo "hugo new site zollitech"

Iniciado o projeto, se você listar os diretórios com o comando “ls”, verá que foi criado uma pasta contendo todo o conteúdo necessário para seu site estático.

Basicamente teremos o archetypes, content, data, layouts, static, themes e o arquivo padrão do site config.toml ou hugo.toml, depende da versão do hugo que está utilizando.

Sobre a estrutura:

• archetypes - basicamente o cabeçalho de todo arquvio .md do site.
• content - onde ficam as páginas do site.
• layout - onde ficam os conteúdos em HTML.
• static - onde ficam os conteúdos CSS.
• themes - onde fica a pasta do tema utilizado para o site.

Conhecendo toda estrutura, já podemos dar inicio para a escolha do tema que utilizaremos no blog.

Escolha um tema no SITE DE TEMAS DO HUGO. Geralmente na própria página do tema tem a maneira de instalação, mas como abordado no inicio do post, irei mostrar os passos que realizei para que o MEU site funcionasse.

Após escolher o tema, no meu terminal, rodei um comando para adicionar o tema como um submódulo do repositório, sendo assim, na pasta raiz do projeto:

git init # para iniciar o git
git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng # esse é o tema que utilizei no meu blog, mas caso queira outro, é só passar a url dele junto ao comando submodule add.

# Executando esse comando, ele realizará um clone do repositório do tema e adicionará como um módulo no diretório themes/hello-friend-ng

Depois de realizar o clone, vamos substituir os arquivos que vieram por padrão quando inicializamos o projeto, pelos arquivos do tema:

cp -r ./themes/hello-friend-ng/exampleSite/* .

Esse comando copiou recursivamente tudo o que continha no diretório do tema para nosso diretório atual (raiz do site).

Dessa maneira, já conseguimos ter uma visão de como o site está ficando, basta rodar o seguinte comando:

hugo server -D

Caso você esteja hospedando em outra máquina e precise acessar por outro IP, utilize o comando:

hugo server --bind=<IP_VM> --baseURL=http://<IP_VM>:1313 # no campo <IP_VM> você adicionará o ip da vm que está hospedando o Hugo.

Assim você já consegue ir realizando as alterações no arquivo config.toml ou hugo.toml e no browser acessar o IP:1313 para visualizar seu site estático.

Caso você utilize o serviço da Netlify ao invés do Cloudflare, será necessário criar um arquivo de configuração .toml para tal. Aqui realizaremos o processo voltado para a Cloudflare.

A PARTIR DESSA ETAPADA, IREMOS COMEÇAR UTILIZAR O GITHUB E CLOUDFLARE

NO GITHUB

Crie o repositório com o nome do seu projeto (pode ser público). Caso optar por um repositório privado, terá que pagar para utilizar o GithubActions da maneira que vamos usar aqui no tutorial.

Com o repositório já pronto e com o mesmo nome do seu projeto do hugo, tendo em vista que você já realizou as alterações do site nos arquivos do projeto, basta commita-las em seu repositório novo do git.

git add .
git commit -m "first commit"
git remote add origin <url do repositório> # adicionei a url .git do seu repo
# coloque as credenciais do teu github

Bingo! Teu repositório já estará pronto para ser compilado na Cloudflare.

CLOUDFLARE

No painel da CloudFlare, faça os seguintes passos:

• Faça os apontamentos DNS para o seu dominio.
• Tendo em vista que já tem os apontamentos DNS, na opção Workers e Pages do menu principal, clique na opção “Crie um aplicativo”.
• Depois, clique na aba “Pages” e vá até a opção de “Criar importando um repositório Git existente”.
• Ele solicitará para conectar/integrar sua conta do github com o cloudflare. No github terá a opção de selecionar apenas o repositório do seu projeto, faça isso.
• Na etapa de Build Settings, selecione a opção do HUGO FRAMEWORK.
• Dessa forma você pode selecionar a opção de “Save and Deploy”.

Pode ser que durante o deploy, dê algum erro e na grande maioria das vezes, é por conta da versão do Hugo Framework. Nos próximos passos ensinarei a setar a versão do Hugo que você está usando no seu computador, na Cloudflare.

Depois que você configurou toda a parte do Pages no Cloudflare, você verá seu “aplicativo” na aba do Workers e Pages, lá você conseguirá editar o seu projeto.

Clicando em “Editar”, haverá a opção “Settings”, na opção settings você consegue definir algumas váriveis ambientes (environment variables) e é nessa parte que setamos as configurações do Hugo Framework.

Nessa etapa, recomendo que você configure duas váriaveis ambientes, sendo elas:

Para saber qual a versão do hugo framework que está utilizando no seu computador, rode o comando:

hugo version # Esse comando deve ser executado no seu computador onde está instalado o hugo framework

Feito isso, salve as configurações no botão “Save” e refaça o deploy do aplicativo novamente na “Deployments”,

Feito o deploy e tudo funcionando, vamos apontar o “aplicativo” para o nosso dominio registrado na cloudflare.

Para realizar esse procedimento, no mesmo menu do aplicativo na cloudflare, vá na opção/aba “Custom domains” e clique em “Set up a custom domain”.

Nessa opção, inserimos nosso dominio desejado, clicamos em “Continue” e ele apresentará um apontamento CNAME para o dns conteúdo do “aplicativo”, basta clicar em “ACtivate Domain” para concluirmos o apontamento do nosso dominio para o aplicativo.

Se tudo estiver configurado de maneira certa, CONCLUIMOS todos os passos para configuração do seu site estático.

Para realizar alterações no site, basta realizar um commit na master do seu projeto no Github, assim o Cloudflare executará toda compilação para que faça as alterações e a publique na internet.

Caso não saiba commitar, basta executar os seguintes comandos:

git add .
git commit -m "descricao do commit"
git push -u origin master

Qualquer dúvida referente esses processos, me chame em alguma de minhas redes sociais. Estarei à disposição.

Linkedin Instagram

Deixo aqui alguns vídeos de referência para esse projeto:
Deploy A Static Site Using DevOps with Hugo Cloudflare And Github
Como criar um site/blog com HUGO framework

Abraços do Golden Retriever.