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.
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:
Rolar até "GitHub Pages", e clicar em "Choose a Theme":
Você será redirecionada para página onde poderá visualizar e escolher um tema para sua página:
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.
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
Configure a execução do repl.
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".
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.
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 um exemplo de como fiz a minha primeira GitHub Page.
Top comments (0)