Publique seu projeto React no Github Pages utilizando Vite
Criado em 04 de Maio de 2023
Iniciando o deploy com o github pages
No arquivo “vite.config.js” adicionar o comando “base” de acordo com o nome do seu repositório do github por exemplo: “https://github.com/LeoDKVT/gpt-page”.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "/gpt-page/",
});
Feito isso, basta subir seu projeto para o github caso você tenha feito localmente.
No seu repositório do github, iremos em settings → pages → “Build and deployment” trocar para “github actions” e na pasta “Static HTML” colar o arquivo “yml” da documentação Vite.
Segue o link da documentação contendo o código yml: https://vitejs.dev/guide/static-deploy.html
Código yml:
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ['main']
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
Após colar esse arquivo, basta clicar em “commit changes”, será criado um arquivo chamado "static.yml" graças a ele será possivel gerar o link https do github pages.
Para observar o layout das pastas no repositório, clique aqui.
Qual vantagem tem fazendo o deploy dessa forma?
Empregar este método de implantação específico apresenta uma variedade de vantagens importantes, já que ele é muito simples e não requer a instalação de qualquer dependência como o "npm gh-pages".
Qual é o processo para atualizar o aplicativo depois de ser modificado?
O Github atualizará automaticamente o projeto assim que ele for carregado. Para verificar o processo, acesse "actions" e confira o commit e o status. Mas fique atento: se houver algum erro de código, o projeto não funcionará.
Dica:
Caso você seja novato em React e esteja buscando aprender a fazer o deploy, aconselho começar um projeto Vite do zero e testá-lo para garantir que nenhum erro afete a estrutura básica. Assim, você poderá praticar de um jeito seguro e eficaz.
Comandos úteis:
Ao acionar este comando, um arquivo chamado "dist" será criado como a página estática.
npm run build
E para ver essa página estática basta rodar esse comando para ver esse projeto em produção:
npm run preview
Olá 👋! Se você gostou deste blog, por favor, ajude a divulgá-lo para que mais pessoas possam acessá-lo.
Você pode compartilhá-lo nas seguintes plataformas:
