DEV Community

Patryck Harley
Patryck Harley

Posted on

Transformando seu README.md em uma GitHub Page

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
Se você não domina a formatação de texto com markdown, sugiro essas anotações da Letícia. 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
Rolar até "GitHub Pages", e clicar em "Choose a Theme":
Alt Text
Você será redirecionada para página onde poderá visualizar e escolher um tema para sua página:
Alt Text
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
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

Para isso você precisa ter uma conta do Replit,e criar um novo repl. Você pode apenas importar seu projeto do GitHub
Alt Text
Configure a execução do repl.
Alt Text
Se for um código Python, pode ser configurado assim:

language = "python3"
run = "python <nome_do_arquivo>.py"
Enter fullscreen mode Exit fullscreen mode

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
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>
Enter fullscreen mode Exit fullscreen mode

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.



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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

A partir disso você pode explorar essa ferramentas e comunicar seus projetos de inúmeras formas. Aqui um exemplo de como fiz a minha primeira GitHub Page.

Discussion (0)