GitLab

GitLab Pages: Publique seu site em uma hospedagem gratuita


Quando estamos aprendendo uma tecnologia nova, desenvolvemos muitos projetos ao longo do caminho, e muitas vezes, nós queremos mostrar para o mundo nossas ideias, como a gente resolveu determinado problema usando a tecnologia que estamos aprendendo agora, mas não queremos pagar uma hospedagem para mostrar para nossos amigos tal projeto, até porque estamos estudando ainda.

E para resolver essa necessidade o GitLab disponibiliza um recurso muito legal para nós estudantes de programação ou aspirantes a programador. É o GitLab pages, com esse recurso podemos colocar no ar uma pagina estática, para mostrar nossas criações ao mundo, e tudo isso e de graça, legal isso né?

Então sem enrolar muito, vamos ver como fazer isso acontecer?

Configuração básica para funcionar

Antes de criarmos a nossa pagina, vamos primeiro instalar a ferramenta que o GitLab pages precisa para funcionar, essa é uma parte muito importante do processo, então preste bastante atenção nela.

A primeira ferramenta é o Node.js e o NPM, acredito que você já ouviu falar sobre tais tecnologias e também tenho certeza que você percebeu que baixando o Node.js automaticamente o NPM vem junto.

Mas só para conferir se você tem os dois em sua maquina digite esses dois comados em seu terminal para garantir que você tem ambas tecnologias instalados.

Primeiro digite esse:

node --version

Depois digite esse:

npm --version

Se você não tiver eles instalado em sua maquina, entre nesse link que leva para o site oficial do node.js que você terá todas as instruções para baixar tal recurso, tenho certeza que você da conta sozinho.

Baixando a ferramenta principal

Agora podemos baixa a ferramenta principal, e para instala e só abrir seu terminal e digitar esse comando:

npm install --global git+https://gitlab.com/kenzie-academy/misc/init-gitlab-page.git

Se o comando não funcionar você pode usar esse outro aqui.

sudo npm install --global git+https://gitlab.com/kenzie-academy/misc/init-gitlab-page.git

Pronto o seu ambiente esta finalizado para subir seus projeto revolucionário.

Criando um diretório para nossas paginas

Para criar um diretório novo em nossa maquina é só digitar esse comando em seu terminal:

mkdir nome_do_diretório

Depois de criar o nosso diretório, vamos criar nosso arquivo HTML, sendo importante falar que o nome deve ser index.html, para que assim o GitLab pages possa reconhecer nossa pagina.

E para criar você deve estar dentro do diretório que você criou e digitar esse comando:

touch index.html

Após digitar esse comando será gerado no diretório em que ele foi executado um arquivo HTML em branco, e para que a pagina seja mostrada no navegador devemos estrutura ela com Tags HTML.

E para fazer isso e só está dentro do diretório do projeto e digitar tal comando em seu terminal, para abrir no visual studio code:

code .

Ao abrir o arquivo index.html, é só colocar esse código dentro dele para que sua pagina já mostre um conteúdo no navegador:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitLag Pages</title>
  </head>
  <body>
    <h1>Minha primeira pagina usando GitLag Pages</h1>
  </body>
</html>

Criando o arquivo de configuração do GitLab pages

Agora vamos criar o arquivo de configuração do GitLab pages, mas antes quero falar que é muito importante que o nome do arquivo seja igual ao exemplo, para que assim possa funcionar, então para criar tal arquivo e só digitar em seu terminal, dentro do diretório que ficará sua pagina esse comando:

touch .gitlab-ci.yml

Ao digitar esse comando será criado um arquivo vazio, então você deve abrir ele para colocar as configurações, você pode fazer isso usando o visual studio code, basta digitar esse comando dentro do diretório do projeto:

code .

Dentro dele você deve colocar esses comandos:

pages:
	stage: deploy
	script:
	- mkdir .public
	- cp -r * .public
	- mv .public public
	artifacts:
		paths:
		- public
	only:
	- master

Pronto o seu arquivo de configuração está pronto.

Criando um repositório remoto

Agora é só você inicializar um repositório remoto no GitLab, digitar o comando git init . em sua maquina, conectar com o repositório remoto que você fez, depois e só digitar esse comando em seu terminal git add . e depois o git commit -m "Alguma descrição" e por ultimo o git push.

Inicializando a pagina

Para que sua pagina funcione, precisamos inicializa ela, e para fazer isso você deve abrir o terminal e entrar no diretório da pagina e digitar esse comando:

init-gitlab-page

Ao fazer isso ele dará um link para acessar sua pagina, ai e só copia e colocar em seu navegador.

Conclusão:

Espero ter ajudado você que leu esse artigo, muito obrigado pela sua atenção.

+1

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *