Você sabia que é possível hospedar um site gratuitamente usando o Github? Senão, apresento a você o GitHub Pages, uma ferramenta de hospedgem integrada ao Github onde você pode escolher seus repositórios no site e hospedá-los de maneira rápida e simples, descubra como hospedar seu site!
Antes de ir para a prática, precisamos entender a diferença de um site estático e um site dinâmico:
Sites estáticos tem um conteúdo que não muda (a não ser que você mude diretamente pelo código), e todo o processamento de informações é feito na máquina do usuário, a maioria dos sites é estático, podendo dar de exemplo: Portfolios, Sites de informações sobre empresas/instituições, ou álbuns de fotos online.
Sites dinâmicos podem mudar seu conteúdo sem a interação do desenvolvedor e normalmente têm maior complexidade, além de um lado do servidor, que troca informações com o usuário em tempo real, normalmente esse servidor é feito com PHP, Node.Js ou Python, mas não se restrinja só a eles!
Com essas informações em mente, classifique seu site como estático ou dinâmico e siga os passos dependendo da classificação:
Sorte sua, é muito fácil!
Quando o assunto são sites dinâmicos, a hospedagem deles via Pages é mais complicada, já que temos que hospedar o lado do cliente e do servidor, para isso, usamos um robô para automatizar esse processo, processo esse feito em .yml:
name: deploy
on:
push:
branches:
- main ###IMPORTANTE: Isso diz que o código será rodado uando houverem pushes
na main (preferivelmente coloque mais branches, nunca dê push na main)
jobs: #tarefas a fazer
deploy:
runs-on: ubuntu-20.04 #OS do servidor que o Pages vai hospedar
steps: #indica as tecnologias a serem usadas
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with: #indica qual versão do node usar
node-version: '18.x' #18.0 pra cima
- name: Build web-app
run: |
npm ci
npm run build
#faz a build do projeto
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
Os dois são termos usados na hora de enviar o site para o público-alvo (seja o cliente ou a internet);
Juntos, eles são os dois processos que fazem o processo de pegar as informações feitas pelos desenvolvedores e enviá-las de maneira funcional para quem há de usar o código.
São siglas que remetem à boas práticas feitas na área do desenvolvimento que significam: