Faça sua página estática em Hugo, que ficará hospedada no seu Gitlab, e monte seu Gitlab Pages com Gitlab-CI.

Hugo é um gerador de páginas estáticas, escrito em Go (mas as publicações você faz em markdown), otimizado para desempenho e projetado para flexibilidade. Saiba mais aqui .

Caso não faça ideia do que estou falando, não se preocupe! Recomendo que comece olhando as referências que estão lá no final e leia com calma. 😉

Crie o site localmente

O primeiro passo é levantar o site localmente e com o conteúdo de exemplo que já acompanha o tema que deixo como sugestão.

Instalação e checagem de versão

Para isso, instale o Hugo em seu sistema operacional preferido .

Execute o comando a seguir para verificar a versão instalada:

hugo version

Precisa ser uma versão maior que a 111 pra não ser tão antigo assim.

Preparando o site

Comece com o comando:

hugo new site meu-site-legal --format yaml
cd meu-site-legal

Prepare para utilizá-lo no git inciando um repositório git:

git init
git config --global init.defaultBranch main
git branch -m main

Adicione a pasta /public ao .gitignore

echo "/public" >> .gitignore

Acrescente um arquivo .gitkeep na pasta de temas:

touch themes/.gitkeep

Crie o arquivo go.mod com o seguinte conteúdo:

module gitlab.com/pages/hugo

go 1.20

Definindo o tema

Copie as configurações e site de demonstração padrão do tema e apague o que foi gerado automaticamente:

wget https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/config.yml
rm hugo.yaml

Edite o arquivo de configuração ao seu gosto. Salientando que o tema precisa ser definido como theme: ["github.com/adityatelange/hugo-PaperMod"]

O domínio deve ser definido usando o padrão https://<SeuUsuario>.gitlab.io/<repositorio>/

Criando sua primeira publicação

É necessário aprender markdown para escrever publicações. É mais fácil do que parece! 😉

Para criar sua primeira publicação, execute:

hugo new content posts/alo-mundo.md

Coloquei o conteúdo do arquivo content/posts/alo-mundo.md assim:

+++
title = 'Alo Mundo'
date = 2024-04-17
draft = false
+++

# Seja bem vindo a sua primeira publicação

Você poderá escrever livremente usando markdown

## Não precisa ficar com receio

E sempre que escrever bastante, antes de dar um `git add .`, seguido de `git commit -m "mensagem bonita"` e um `git push`, faz um (tire as \):

\`\`\`sh
hugo serve
\`\`\`

Verificar como o site está ficando

Faça o build e utilize o webserver que o Hugo possui:

hugo serve

Envie tudo o que foi feito para seu Gitlab

Execute os seguintes comandos para enviar suas modificações para seu repositório remoto:

git add .
git commit -m "Commit Inicial"
git remote add origin https://gitlab.com/SeuUsuario/meu-site-legal.git
git push -u origin main

Se já tiver a chave ssh configurada para a sua conta do gitlab, troque o comando do git remote add acima pelo seguinte:

git remote add origin git@gitlab.com:SeuUsuario/meu-site-legal.git

Configure o Gitlab-CI

Edite o arquivo .gitlab-ci.yml e acrescente o seguinte conteúdo:

#
# Before using this .gitlab-ci.yml:
#
# - This example uses the latest Docker image, but you might want to use the
#   exact version to avoid any broken pipelines.
#   All available Hugo versions are listed under https://gitlab.com/pages/hugo/container_registry.
# - Read about the difference between hugo and hugo_extended
#   https://gitlab.com/pages/hugo/-/blob/main/README.md#hugo-vs-hugo_extended.
#   If you don't know what to use, better use the extended version.
# - To change the theme, see
#   https://gitlab.com/pages/hugo/-/blob/main/README.md#use-a-custom-theme.
#
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
variables:
  HUGO_ENV: production
  THEME_URL: "github.com/adityatelange/hugo-PaperMod"
default:
  before_script:
    - apk add --no-cache go curl bash npm
    - hugo mod get -u $THEME_URL
    # To use PostCSS, we must install the following modules. See:
    # - https://gohugo.io/hugo-pipes/postcss/
    # - https://github.com/google/docsy/tree/main#prerequisites
    - npm install postcss postcss-cli autoprefixer
# Use everywhere except on the default branch
test:
  script:
    - hugo --minify
  rules:
    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
# Run only on the default branch
pages:
  script:
    - hugo --minify
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

Coloque o arquivo em stage, crie o commit e envie-o para o repositório:

git add .gitlab-ci.yml
git commit -m "adicionando o gitlab-ci"
git push

Configure o Gitlab Pages

No navegador, abra seu repositório no gitlab e vá em Deploy > Pages.

Desmarque a opção Use unique domain e salve.

Acesse o que foi feito até agora pela URL https://<SeuUsuario>.gitlab.io/<repositorio>/

Se clicar no Alo Mundo aparecerá o seguinte:

Parabéns!

Parabéns! Você conseguiu montar sua página usando Hugo + Gitlab-CI + Gitlab Pages! 👏👏👏

Próximos passos?

Revire o arquivo de configuração e deixe a estrutura da página do jeito que lhe agrada.

Caso ainda necessite de mais uns ajustes finos, veja a documentação do tema e faça as modificações estéticas que achar necessário (cores, fontes, estrutura de funcionamento geral).

Referências

Material montado utilizando as seguintes referências:

• Como montar um site em Hugo
• Tema usado
• Publicar no Gitlab Pages usando Hugo
• Modelo do Gitlab Pages com Hugo
• Domínios do Gitlab pages
• Aprenda Markdown para escrever as publicações