Transformando seu README.md em uma GitHub Page
Tags: github, replit, documentacao, portfolio
Published: 2021-03-26 13:32:33

Para construir um portfólio de projetos com programação, mais do que simplesmente subir ele para o GitHub, é importante documentá-los bem. Para que outras pessoas, mesmo aquelas que não são programadoras, consigam entender o projeto, e até mesmo testar. Por isso, vamos aprender a criar uma página estática para apresentar seu projeto, hospedada gratuitamente no GitHub Pages, que não precisa de nenhum conhecimento além de markdown; e a rodar seu código Python simples dentro dessa página.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m665bbifmhtq9ez2wdy.gif)
Se você não domina a formatação de texto com markdown, sugiro essas anotações da [Letícia](https://github.com/leticiadasilva/notas-de-aula/blob/master/Markdown/anota%C3%A7oes-markdown.md). Estão bem didáticas.
#Criando uma GitHub Page para seu repositório
Para criar uma page para seu projeto é bem simples, basta ir até a aba de configurações do seu repositório:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0bpp0y2x9uk0rcbcer3.png)
Rolar até "GitHub Pages", e clicar em "Choose a Theme":
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbbhewp77klrmsf10xk0.png)
Você será redirecionada para página onde poderá visualizar e escolher um tema para sua página:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iijowx321bstys67ksj.png)
Explore os temas e então escolha com "Select theme". O GitHub vai criar uma nova branch no seu repositório para guardar as informações da sua página. E então lhe redirecionará para a edição de um arquivo markdown. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3fmet8qo6fgnozhqnr6.png)
Tudo que precisa fazer é editar esse arquivo, que em poucos minutos sua página será atualizada. Você pode simplesmente copiar o código do seu README.md e colar dentro desse arquivo.

# Rodando seu código dentro da sua página, com [Repl.it](https://replit.com)
Para isso você precisa ter uma conta do Replit,e criar um novo repl. Você pode apenas importar seu projeto do GitHub
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnjktw15jvtbxs4rle12.png)
Configure a execução do repl. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs3qh5ncsatlro6phylo.png)
Se for um código Python, pode ser configurado assim:
```
language = "python3"
run = "python <nome_do_arquivo>.py"
```
Depois de se certificar que o código está rodando como deveria, dentro do site. Vamos incorporar ele na sua página, clicando em "Share".  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu70rja3iyek33v041pp.png)
E então copiando o trecho de html, ao clicar em "Copy embed code". Depois é só colar no  arquivo markdown da sua página. Será um código como esse: 
```
<iframe height="400px" width="100%" src="https://replit.com/@serenozin/JogoResilia?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
```
Mas podemos melhorar a configuração desse embed padrão, para que o arquivo de configuração não apareça para a usuária - como esse abaixo, e sobre mais espaço para a execução do código.
{% replit @serenozin/JogoResilia %}
Para isso é só adicionar "&outputonly=1" no fim do link (src), depois de "lite=true".
```
<iframe height="400px" width="100%" src="https://replit.com/@serenozin/JogoResilia?lite=true<AQUI>" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
```
Assim:
```
<iframe height="400px" width="100%" src="https://replit.com/@serenozin/JogoResilia?lite=true&outputonly=1" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
```
A partir disso você pode explorar essa ferramentas e comunicar seus projetos de inúmeras formas. [Aqui](https://serenozin.github.io/JogoResilia/) um exemplo de como fiz a minha primeira GitHub Page.