Deploy com GitHub Pages

Como Criar e Publicar um Site Personalizado com GitHub Actions e Pages

by

GitHub Pages é uma ferramenta incrível para hospedar sites estáticos de graça, enquanto o GitHub Actions permite que desenvolvedores automatizem seus fluxos de trabalho, incluindo a construção e o deploy com GitHub Pages. Combinando os dois, você pode criar um pipeline de implantação automatizado para o seu site personalizado. Vamos ver como!

Neste guia, vamos te mostrar o passo a passo de:

  • Configurar um repositório GitHub para o seu site.
  • Criar um fluxo de trabalho do GitHub Actions para construir e implantar o site.
  • Fazer o deploy do site usando o GitHub Pages.

Configurando um Repositório GitHub para Seu Site

Antes de automatizar a implantação, precisamos de um repositório GitHub para armazenar o código do nosso site. É como preparar o terreno antes de construir a casa, sabe?

Passo 1: Criar um Novo Repositório

  1. Acesse o GitHub e faça login.
  2. Clique no ícone + no canto superior direito e selecione New repository (Novo repositório).
  3. Dê um nome ao seu repositório, por exemplo, meu-site-customizado.
  4. Escolha Public (Público – obrigatório para o GitHub Pages) ou Private (Privado – com o GitHub Pages habilitado).
  5. Marque a opção Initialize this repository with a README (Inicializar este repositório com um README) e clique em Create repository (Criar repositório).

Passo 2: Clonar o Repositório Localmente

Agora, clone o repositório para a sua máquina local. É como trazer o projeto para a sua área de trabalho:

git clone https://github.com/seu-usuario/meu-site-customizado.git
cd meu-site-customizado

Construindo Seu Site Customizado

Você pode usar qualquer gerador de site estático (Jekyll, Hugo, Next.js, etc.) ou simplesmente implantar um projeto HTML/CSS/JavaScript. A escolha é sua! Se quiser saber mais sobre desenvolvimento, veja este artigo sobre Nvidia impulsiona desenvolvimento de robôs humanoides.

Exemplo: Um Site HTML Simples

Crie um arquivo index.html na pasta do seu projeto. Este será o coração do seu site:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Site Customizado</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site Customizado!</h1>
    <p>Este site foi implantado usando GitHub Actions e GitHub Pages.</p>
</body>
</html>

Agora, vamos adicionar, commitar e enviar as mudanças para o GitHub:

git add .
git commit -m "Adiciona site HTML simples"
git push origin main

Configurando o GitHub Actions para Implantação Automática

O GitHub Actions permite automatizar o processo de construção e implantação. É como ter um robô fazendo todo o trabalho pesado para você!

Passo 1: Criar um Arquivo de Fluxo de Trabalho

  1. Dentro do seu repositório, crie uma nova pasta:
   mkdir -p .github/workflows
  1. Crie um arquivo YAML para o fluxo de trabalho do GitHub Actions:
   nano .github/workflows/deploy.yml
  1. Adicione a seguinte configuração de fluxo de trabalho:
name: Implantar no GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install Dependencies (if any)
        run: npm install || true

      - name: Build Project (if applicable)
        run: npm run build || true

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: . # Change this if using a build folder like "dist" or "public"

Passo 2: Commitar e Enviar o Fluxo de Trabalho

git add .github/workflows/deploy.yml
git commit -m "Adiciona fluxo de trabalho do GitHub Actions para implantação"
git push origin main

Configurando o GitHub Pages

Agora, precisamos habilitar o GitHub Pages para a implantação. É como dar a permissão para o seu site brilhar na internet!

Passo 1: Habilitar o GitHub Pages

  1. Vá para o seu repositório no GitHub.
  2. Clique em Settings (Configurações) > Pages.
  3. Em Branch (Branch), selecione gh-pages.
  4. Clique em Save (Salvar).

Seu site estará disponível em:

https://seu-usuario.github.io/meu-site-customizado/

Verificando a Implantação

Após enviar para main, o GitHub Actions será acionado automaticamente. Fique de olho para ver a mágica acontecer!

  1. Navegue até Actions no seu repositório GitHub para verificar se o fluxo de trabalho foi executado com sucesso.
  2. Uma vez concluído, visite o URL do GitHub Pages para ver o site implantado.

Automatizando Ainda Mais com Domínios Personalizados e SSL

Você pode personalizar seu site adicionando um domínio personalizado e habilitando o HTTPS. É como dar um toque pessoal e garantir a segurança do seu cantinho na web.

Adicionando um Domínio Personalizado

  1. Em Settings > Pages, insira seu domínio personalizado (por exemplo, www.meusite.com).
  2. Crie um arquivo CNAME no diretório raiz do seu repositório:
   echo "www.meusite.com" > CNAME
   git add CNAME
   git commit -m "Adiciona domínio personalizado"
   git push origin main

Ao usar GitHub Actions e GitHub Pages, você pode automatizar a implantação do seu site personalizado sem esforço. Seja um portfólio, documentação ou um projeto pessoal, essa configuração garante um fluxo de trabalho contínuo desde o desenvolvimento até a implantação. Se você se interessa por servidores, a Microsoft testa nova forma de organizar apps e criar pastas no menu Iniciar.

Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.
Via dev.to

Leave a Comment

Exit mobile version