react gh pages Download - react gh pages do download do código -fonte

react gh pages

Outro código-fonte

Baixar

Implantando um aplicativo React* em páginas do GitHub

* Criado usando create-react-app

Introdução

Neste tutorial, mostrarei como você pode criar um aplicativo React e implantá -lo nas páginas do GitHub.

Para criar o aplicativo React, usarei create-react-app , que é uma ferramenta que as pessoas podem usar para criar um aplicativo React a partir do zero. Para implantar o aplicativo React, usarei gh-pages , que é um pacote NPM que as pessoas podem usar para implantar coisas nas páginas do GitHub, um serviço gratuito de hospedagem na web fornecido pelo Github.

Se você seguir este tutorial, acabará com um novo aplicativo React - posicionado nas páginas do Github -, que poderá personalizar.

Traduções

Este tutorial foi traduzido de seu inglês original para os seguintes idiomas:

Chinês tradicional (Crédito: @CREAPER9487)

Tutorial

Pré -requisitos

Nó e NPM estão instalados. Aqui estão as versões que vou usar ao fazer este tutorial:
```
$ node --version
v16.13.2

$ npm --version
8.1.2
```
A instalação do NPM adiciona dois comandos ao sistema - npm e npx - ambos dos quais usarei ao fazer este tutorial.
Git está instalado. Aqui está a versão que vou usar ao fazer este tutorial:
```
$ git --version
git version 2.29.1.windows.1
```
Uma conta do GitHub.

Procedimento

1. Crie um repositório vazio no GitHub

Assine na sua conta do Github.
Visite a criação de um novo formulário de repositório.
Preencha o formulário da seguinte forma:
- Nome do repositório: você pode inserir qualquer nome desejar*.
  * Para um site de projeto, você pode inserir qualquer nome desejar. Para um site de usuário, o GitHub exige que o nome do repositório tenha o seguinte formato: {username}.github.io (por exemplo, gitname.github.io )
  O nome que você entra será exibido em alguns lugares: (a) em referências ao repositório em todo o github, (b) no URL do repositório e (c) no URL do aplicativo React implantado.
  Neste tutorial, implantarei o aplicativo React como um site de projeto.
  Vou entrar: react-gh-pages
- Privacidade do repositório: selecione público (ou privado *).
  * Para usuários gratuitos do Github, o único tipo de repositório que pode ser usado com as páginas do GitHub é público . Para usuários do GitHub Pro (e outros usuários pagantes), repositórios públicos e privados podem ser usados com páginas do GitHub.
  Vou escolher: público
- Inicialize o repositório: deixe todas as caixas de seleção vazias.
  Isso fará com que o Github cria um repositório vazio, em vez de pré-popular o repositório com um arquivo de README.md , .gitignore e/ou LICENSE .
Envie o formulário.

Nesse ponto, sua conta do GitHub contém um repositório vazio, tendo o nome e o tipo de privacidade que você especificou.

2. Crie um aplicativo React

Crie um aplicativo React chamado my-app :
Caso você queira usar um nome diferente do my-app (por exemplo, web-ui ), você pode realizar isso substituindo todas as ocorrências do my-app neste tutorial, com esse outro nome (ou seja, my-app > web-ui ).
```
$ npx create-react-app my-app
```
Esse comando criará um aplicativo React escrito no JavaScript. Para criar um escrito no TypeScript, você pode emitir este comando:
```
$ npx create-react-app my-app --template typescript
```
Esse comando criará uma nova pasta chamada my-app , que conterá o código-fonte de um aplicativo React.
Além de conter o código -fonte do aplicativo React, essa pasta também é um repositório Git. Essa característica da pasta entrará em jogo na etapa 6.
Nomes de ramificação: master vs. main
O repositório Git terá um ramo, que será nomeado (a) master , o padrão para uma nova instalação do Git; ou (b) o valor da variável de configuração do Git, init.defaultBranch , se o seu computador estiver executando o Git versão 2.28 ou posterior e você definirá essa variável na sua configuração Git (por exemplo, via $ git config --global init.defaultBranch main ) .
Como não definei essa variável na minha instalação Git, a filial no meu repositório será nomeada master . Caso a filial em seu repositório tenha um nome diferente (que você pode verificar executando $ git branch ), como main ; Você pode substituir todas as ocorrências de master ao longo do restante deste tutorial, com esse outro nome (por exemplo, master → main ).
Digite a pasta recém-criada:
```
$ cd my-app
```

Neste ponto, existe um aplicativo React no seu computador e você está na pasta que contém seu código -fonte. Todos os comandos restantes mostrados neste tutorial podem ser executados a partir dessa pasta.

3. Instale o pacote NPM `gh-pages`

Instale o pacote NPM gh-pages e designá-lo como uma dependência de desenvolvimento:
```
$ npm install gh-pages --save-dev
```

Neste ponto, o pacote NPM gh-pages está instalado no seu computador e a dependência do aplicativo React é documentada no arquivo package.json do aplicativo React.

4. Adicione uma propriedade `homepage` ao arquivo `package.json`

Abra o arquivo package.json em um editor de texto.
```
$ vi package.json
```
Neste tutorial, o editor de texto que eu usarei é VI. Você pode usar qualquer editor de texto que desejar; Por exemplo, o código do Visual Studio.
Adicione uma propriedade homepage neste formato*: https://{username}.github.io/{repo-name}
* Para um site de projeto, esse é o formato. Para um site de usuário, o formato é: https://{username}.github.io . Você pode ler mais sobre a propriedade homepage na seção "Github Pages" da documentação create-react-app .
```
{
  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
  "private": true,
```

Neste ponto, o arquivo package.json do aplicativo React inclui uma propriedade chamada homepage .

5. Adicione scripts de implantação ao arquivo `package.json`

Abra o arquivo package.json em um editor de texto (se ainda não estiver aberto em um).
```
$ vi package.json
```

Adicione uma propriedade predeploy e uma propriedade deploy ao objeto scripts :

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

Neste ponto, o arquivo package.json do aplicativo React inclui scripts de implantação.

6. Adicione um "remoto" que aponta para o repositório do GitHub

Adicione um "controle remoto" ao repositório Git local.
Você pode fazer isso emitindo um comando neste formato:
```
$ git remote add origin https://github.com/{username}/{repo-name}.git
```
Para personalizar esse comando para sua situação, substitua {username} pelo seu nome de usuário do github e substitua {repo-name} pelo nome do repositório do github que você criou na etapa 1.
No meu caso, vou correr:
```
$ git remote add origin https://github.com/gitname/react-gh-pages.git
```
Esse comando informa ao GIT onde eu quero que ele empurre as coisas sempre que eu-ou o pacote NPM gh-pages que atua em meu nome-emite o comando $ git push de dentro deste repositório Git local.

Nesse ponto, o repositório local possui um "controle remoto" cujo URL aponta para o repositório do GitHub que você criou na etapa 1.

7. Empurre o aplicativo React para o repositório do GitHub

Empurre o aplicativo React para o repositório do GitHub
```
$ npm run deploy
```
Isso fará com que os scripts predeploy e deploy definidos no package.json sejam executados.
Sob o capô, o script predeploy criará uma versão distribuível do aplicativo React e o armazenará em uma pasta chamada build . Em seguida, o script deploy empurrará o conteúdo dessa pasta para uma nova confirmação na filial gh-pages do repositório do GitHub, criando essa ramificação se ainda não existir.
Por padrão, o novo Commit na filial gh-pages terá uma mensagem de compromisso de "atualizações". Você pode especificar uma mensagem de confirmação personalizada através da opção -m , como esta:
```
$ npm run deploy -- -m " Deploy React app to GitHub Pages "
```

Nesse ponto, o repositório do GitHub contém uma filial chamada gh-pages , que contém os arquivos que compõem a versão distribuível do aplicativo React. No entanto, ainda não configuramos as páginas do GitHub para servir esses arquivos.

8. Configure as páginas do GitHub

Navegue até a página Configurações das páginas do Github
1. No seu navegador da web, navegue até o repositório do GitHub
2. Acima do navegador de código, clique na guia "Configurações" rotuladas
3. Na barra lateral, na seção "Código e automação", clique em "páginas"
Definir as configurações de "construção e implantação" como esta:
1. Fonte : Implante de uma filial
2. Filial :
  - Ramo: gh-pages
  - Pasta: / (root)
Clique no botão "Salvar"

É isso! O aplicativo React foi implantado nas páginas do GitHub!

Nesse ponto, o aplicativo React é acessível a qualquer pessoa que visite o URL homepage que você especificou na etapa 4. Por exemplo, o aplicativo React I Implement é acessível em https://gitname.github.io/react-gh-pages.

9. (Opcional) Armazene o código -fonte do aplicativo React no GitHub

Em uma etapa anterior, o pacote NPM gh-pages empurrou a versão distribuível do aplicativo React a uma ramificação chamada gh-pages no repositório do GitHub. No entanto, o código -fonte do aplicativo REACT ainda não foi armazenado no GitHub.

Nesta etapa, mostrarei como você pode armazenar o código -fonte do aplicativo React no GitHub.

Compreenda as mudanças que você fez enquanto seguia este tutorial, para o ramo master do repositório Git local; Em seguida, empurre o ramo para o ramo master do repositório do GitHub.
```
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin master
```
Eu recomendo explorar o repositório do GitHub neste momento. Ele terá dois ramos: master e gh-pages . A filial master conterá o código-fonte do aplicativo React, enquanto a filial gh-pages conterá a versão distribuível do aplicativo React.

Referências

O Guia Oficial de Implantação de create-react-app
Github Blog: Construa e implante páginas do Github de qualquer ramo
Preservando o arquivo CNAME ao usar um domínio personalizado

Notas

Agradecimentos especiais ao Github (a empresa) por nos fornecer o serviço de hospedagem de páginas do Github gratuitamente.
E agora, é hora de transformar o aplicativo React padrão gerado pela create-react-app em algo único!
Este repositório consiste em dois ramos:
- master - o código -fonte do aplicativo React
- gh-pages - O aplicativo React criado a partir desse código -fonte

Colaboradores

Agradecemos a essas pessoas por contribuir com a manutenção deste tutorial.

Esta lista é mantida manualmente - pois agora - e inclui (a) cada pessoa que enviou uma solicitação de tração que acabou sendo fundida ao master e (b) cada pessoa que contribuiu de uma maneira diferente (por exemplo, fornecendo feedback construtivo) e que aprovou eu os incluindo nesta lista.

Expandir

Informações adicionais