Pular para o conteúdo principal

Iniciar Hugo com GitLab CI/CD

· Leitura de 4 minutos
j0rdan-m

Para ser sincero, não sabia ao certo qual seria a melhor estrutura de site quando comecei com Hugo. No entanto, usando arquivos Markdown, um tempo de construção muito performante é necessário apenas para hospedar arquivos html estáticos e a possibilidade de produzir o site no CI / CD do gitlab, que tinha algo para me atrair!

Mas deves precisa ter cuidado, pois o início rápido do documento oficial não é compatível com uma implantação no Gitlab Pages.

Como começar rapidamente com Hugo

Aqui está a melhor forma de começar com Hugo na minha opinião:

Etapa 1 - Seleção de temas

Primeiro, cuidadosamente escolhe o tema que desejas usar. Isto é importante porque a maneira como vais configurar o teu site pode ser (muito) específica para o teu tema.

Para escolher sabiamente, vai a themes.gohugo.io e assiste à demonstração dos temas que te interessam. Todas as demos integram a renderização da sintaxe de remarcação, o que garante que o tema atenda aos teus desejos!

Etapa 2 - Nome do site

Segundo, escolha o nome do site. O nome do site tem que ser o mesmo da pasta que vamos cirar para implantar o teu site nas páginas do gitlab, terias o seguinte site URL: http: // username.gitlab.io / nomedapasta /

Se estás a criar um blog, "blog" seria um bom nome. Se o teu site servir para sugerir um produto, "productName" seria relevante.

Etapa 3 - Criação do site

Esta é a parte mais simples do tutorial. Basta digitar a seguinte linha de comando:

hugo new site <nome da pasta>

Agora tens uma nova pasta chamada foldername com itens. Antes de fazer qualquer coisa, aplica o próximo passo. NÃO ENTRES NA NOVA PASTA

Etapa 4 - Download do tema

Acede ao repositório do tema escolhido e NÃO CLONES o repositório git. Obtem o arquivo zip e descompacta-o em nome_da_pasta/themes/theme_name.

Observa que o conteúdo do tema deve estar em theme_name, não em theme_name/hugo-theme-name-master.

Etapa 5 - Usar exampleSite como modelo

Copia o topic_name/exampleSite/config.toml diretamente para o teu nome da pasta, substituindo o ficheiro config.toml padrão.

No arquivo config.toml, altera a linha de seleção do tema para

theme = "<nome do tema>"

Como queremos usar o Hugo nas páginas do gitlab, também é necessário alterar o baseURL no config.toml:

baseurl = "https://<nomedousuário>.gitlab.io/<nome da pasta>"

Implantação de páginas do Gitlab

Aviso

NÃO FAÇAs NADA NO GIT! Vais criar um projeto gitlab que iniciará com o teu foldername

Etapa 6 - Criar um projeto gitlab

No gitlab, cria um novo projeto, com o mesmo nome que a tua pasta. Não o inicializes com um arquivo README ou com o que seja.

Etapa 7 - Criar seu arquivo de IC

Vai para o nome da tua pasta (a pasta criada anteriormente) e cria um arquivo chamado .gitlab-ci.yml

Edita o arquivo com o código seguinte:

image: monachus/hugo

variables:
GIT_SUBMODULE_STRATEGY: recursive

pages:
script:
- hugo
artifacts:
paths:
- public
only:
- master

Etapa 8 - Empurrar (Push) o site

Primeiro, executa o repositório:

git init

Em seguida, adiciona o diretório /public ao arquivo .gitignore

echo "/public" >> .gitignore

Por fim, valida e envia o código na ramificação principal

git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/YourUsername/your-hugo-site.git
git push -u origin master

Etapa 9 - Vizualiza e aguarda

Acede ao "Pipeline de CI / CD" do teu repositório gitlab

Assiste à etapa de compilação e aguarda a aprovação. O teu site será publicado em nome de usuário.gitlab.io/nome de usuário