Publicando suas paginas Flutter no Github Pages utilizando GitHub Action
Tags: githubactions, flutterweb, githubpages, microsoft
Published: 2024-04-20 03:47:15

Eae Devs, blz?

Vocês sabiam que o GitHub nos oferece uma ferramenta que é possível hospedar uma pagina HTML diretamente de um repositório do github, esse serviço se chama GitHube Pages.

Esse serviço permite a hospedagem de seu site sob domínio [github.io](http://github.io/) e a URL do seu site ficara algo do tipo **_http(s)://username.github.io/<repository>_** _onde_ **_<username>_** _corresponde ao nome de usuário da conta do seu github e_ **_<repository>_** _representa o nome do repositório do seu projeto._

Então vamos aprender a criar nosso site no GitHub Pages

Vá para o GitHub e crie um novo repositório chamado username.github.io, onde username é o seu nome de usuário (ou nome da organização) no GitHub.

![](https://cdn-images-1.medium.com/max/800/1*k-c0jrtpYOoyYQlELVp7zQ.png)

**Nota: Se a primeira parte do repositório não corresponder exatamente ao seu nome de usuário, não funcionará, então certifique-se de fazer certo.**

Agora precisamos ir dentro do nosso projeto flutter e gerar o build dele para web rodando a versão release

> flutter build web — release

Isso irá gerar na pasta build/web os arquivos de nossa pagina e é justamente eles que usaremos para publicar em nosso repositório.

![](https://cdn-images-1.medium.com/max/800/1*Kk229xg3LUzdQwakb3ez4A.png)

Simplesmente copiamos estes arquivos para um outro diretório e podemos subir em nosso repositório do github

    git init  
    git add .  
    git commit -m "first commit"  
    git branch -M main  
    git remote add origin https://github.com/toshiossada/toshiossada.github.io.git  
    git push -u origin main

![](https://cdn-images-1.medium.com/max/800/1*feKrAS4Fr2ke3YfjZvqm_Q.png)

Esperamos um tempinho e voilá… Nosso site está publicado

![](https://cdn-images-1.medium.com/max/800/1*dVtnOSDsqxgd8Uw60w5PAw.png)

### Automatizando o Deploy

![](https://cdn-images-1.medium.com/max/800/1*BaWIuDL6l82crZce1ltprw.png)

Agora toda vez que houver uma alteração no seu site você terá que fazer todo o processo novamente, ou, podemos utilizar o poder do **GitHub Action** para automatizar esse processo, toda vez que fizermos um push na **master** irá fazer o **deploy** para o repositório do **GitHub Pages**. Primeiramente vamos subir nosso projeto flutter do site em um outro repositório.

![](https://cdn-images-1.medium.com/max/800/1*t_tz2PqCI-AfhXYgWfWDew.png)

A primeira coisa que faremos é na raiz do projeto é criar o diretório **.github** e dentro dele a pasta **workflow**.

![](https://cdn-images-1.medium.com/max/800/1*ZIT567B294S98lghtBGOIg.png)

![](https://cdn-images-1.medium.com/max/800/1*Klsfmj4Crz4syR9_GVlErw.png)

Dentro dele iremos criar nossos workflows que poderá ter qualquer nome sendo que deve conter a extensão **.yaml**. Vamos criar o **flutter_web.yaml**.

Iremos falar de como deveremos configura-lo depois. Vamos primeiramente configurar o GitHub Actions. Primeiramente vá no seu GitHub e vá na opções **Settings.**

![](https://cdn-images-1.medium.com/max/800/1*YslReCqmCZInHCsnHJiqDQ.png)

Depois vá em **Developer settings**

![](https://cdn-images-1.medium.com/max/800/1*R4E0C0-46MsUiyZbMEDoiA.png)

Depois vá na opção **Personal access tokens**

![](https://cdn-images-1.medium.com/max/800/1*OIbJcitK9oVBZWh_m6hroQ.png)

Agora vá no botão **Generate new token**

![](https://cdn-images-1.medium.com/max/800/1*D2LMQEmB3Rl3Q37hQdn73Q.png)

Agora selecione a opção **“repo”** e no **Expiration** quantidade de tempo que deseja que ele expire.

![](https://cdn-images-1.medium.com/max/800/1*6NhH-EUWmET1L10Ek5EenA.png)

E agora clique em **Generate token**

![](https://cdn-images-1.medium.com/max/800/1*_n6H6jzg0BQukH1zJ_RbHg.png)

Agora ele ira gerar um token para você (**Não divulgue ele com ninguém**), Copie o texto gerado que iremos utilizar a seguir.

![](https://cdn-images-1.medium.com/max/800/1*EIJlXzS5OoRaHH2c2kzLsg.png)

Agora volte no repositório do seu projeto Flutter e clique em **Settings**.

![](https://cdn-images-1.medium.com/max/800/1*1XLLMOo5Z_z3_3hSzuQhMQ.png)

Clique na opção **Secrets**.

![](https://cdn-images-1.medium.com/max/800/1*boud9d2GS5DVGro7Ux-qTg.png)

Aqui iremos criar nossas variáveis de ambiente, clique em **New repository secret**.

![](https://cdn-images-1.medium.com/max/800/1*fVO1OXgnvO9AHuA6GGZfZA.png)

Aqui iremos criar uma variável chamada **token** e em **value** cole o token que copiou anteriormente

![](https://cdn-images-1.medium.com/max/800/1*5knBFRJQik91KSdclA7QoQ.png)

Agora voltaremos no nosso arquivo de configuração do projeto **flutter_web.yaml** ele ficara da seguinte maneira

{% gist https://gist.github.com/toshiossada/22cefd332c24a6cb1044a69554cc4b19 file=flutter_web.yaml %}

  ![](https://cdn-images-1.medium.com/max/800/1*7dP7_U84BdPbmQ6O-HkhWA.png)

Nesta parte estamos configurando que a action irá ser disparada a todo push da branch main.

![](https://cdn-images-1.medium.com/max/800/1*-aLkvsrrA4sIRpQ8JBAT5Q.png)

Aqui iremos configurar que nosso **Job** irá ser executado em cima de uma maquina **ubuntu** na ultima versão.

Agora em **Steps** iremos configurar todos os passos a serem executados

![](https://cdn-images-1.medium.com/max/800/1*meG8OIt3NKdSw-Cc29ShDg.png)

O primeiro passo é realizar o **checkout** do repositório, iremos utilizar o **job** já pronto do **‘action/checkout@1’**

![](https://cdn-images-1.medium.com/max/800/1*muF01Y4g5wh3NvBMFF7lxA.png)

No segundo passo iremos configurar o Flutter, esse job também já esta pronto e esta no repositório **‘subosito/flutter-action@v1’,** devemos configurar na propriedade channel, qual canal queremos o flutter (dev, master, stable ou qualquer versão que desejar).

![](https://cdn-images-1.medium.com/max/800/1*69W--mU73PZMP5NBx8zkuw.png)

No próximo passo iremos instalar as dependências do projeto, apenas executando flutter pub get.

![](https://cdn-images-1.medium.com/max/800/1*Kb6EyGZM2CnPXDsnQ0pQig.png)

Aqui iremos **buildar** a aplicação flutter para web em **Release**.

![](https://cdn-images-1.medium.com/max/800/1*VfLlxr7zY50LiUZPLURi_Q.png)

Aqui iremos fazer o **deploy** para o repositório que criamos do **GitHub Actions**. Troque nas linhas indicadas pelos dados do seu github. e na linha 31 ele irá pegar o valor que definimos lá no **secrets.**

Agora todas vez que fizermos um push na **branch main** ele irá executar uma Action, para visualizar basta no repositório do projeto flutter ir na barra Action e clicar na ação sendo executada.

![](https://cdn-images-1.medium.com/max/800/1*DoJRsTnPOJ9vEsbHaaetIw.png)

Aqui podemos ver todos os passos sendo executado e os logs gerados

![](https://cdn-images-1.medium.com/max/800/1*wV2YndeKbZLq27JpKURXJg.png)

Ao finalizar vá ao repositório de seu **GitHub Pages** na aba **Settings** opção **Pages** e troque a opção **source** para a **branch** que configuramos no **Actions**, **gh-pages**

![](https://cdn-images-1.medium.com/max/800/1*NuscvjizFcLGA_rtL4cmjw.png)

Legal né? Agora é muito fácil fazer seu site de portfolio pessoal.
Confira o exemplo no meu github: https://github.com/toshiossada/flutter_web_site



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil