No projeto atual nos tópicos de Python estamos iniciando o desenvolvimento de um web app com Flask e minha intenção com esse web app é o usuário fazer o upload de alguns arquivos e receber um output desses arquivos processados de alguma forma. Podemos chamar esse tipo de site de um site dinâmico, pois ele não só exibe conteúdo estático. Ele interage com o usuário de alguma forma, nesse caso recebendo arquivos e processando-os. A Bastter.com é outro exemplo de site dinâmico, pois existe um banco de dados por trás disso tudo com nosso login e senha, nossos tópicos, os posts que ainda não visualizamos, etc.
No entanto, muitos sites na web ainda são estáticos, não interagindo com usuário nem interagindo com um banco de dados. Sites de universidades, de clínicas médicas, até de empresas de tecnologia, etc, que não tenham uma área de login e senha, por exemplo, são sites estáticos.
A intenção do tópico é mostrar como é fácil subir na web sites estáticos, tal como um site com seu currículo online, ou um site com algum tutorial feito por você ensinando algo pra outras pessoas, etc. Não exemplifiquei nesse caso sites mais comerciais como o site da sua clínica ou da sua escola ou do seu comércio porque o endereço final que o usuário vai acessar vai ter uma cara meio esquisita, mas para isso existem outras alternativas. Enfim, vamos parar de papo furado e meter a mão na massa.
Aqui o que iremos precisar é de uma conta no Github, do Git instalado na máquina e de um conhecimento básico de HTML (CSS é um plus e JavaScript é plus++).
Então, acessem
The world’s leading software development platform · GitHub e criem uma nova conta:
Criada a nova conta, acessem seu perfil e na aba repositórios, criem um novo repositório (atenção que o nome que você der aqui para o repositório vai aparecer na URL da página...ah, e não se preocupem em saber o que é um repositório agora, depois podemos fazer um tópico sobre Git e Github):
No mobile:
No desktop tem um atalho:
Pronto, repositório criado.
Agora iremos criar nosso site. Mas antes, precisamos instalar o Git, que é um programa de controle de versão e vai ser por meio dele que iremos interagir via terminal com nosso repositório recém criado.
Para instalar o Git no Windows:
Git - Downloading PackagePara Linux (em muitas distribuições ele já vem no sistema) e no Mac, achei este link que pode ser útil:
Installing Git on Linux, Mac OS X and Windows · GitHubCom o Git instalado, abra um terminal e digite o seguinte só pra ter certeza que a instalação ocorreu corretamente e o git já está no path:
$ git --version
git version 2.24.0
Se o retorno for algo diferente da versão instalada, tal como "comando não reconhecido" falta fazer algo ou você não instalou corretamente.
Agora vamos criar nosso site. Abram uma pasta qualquer em sua máquina. Aqui vou criar uma pasta chamada Site e dentro dela vou abrir o terminal e digitar o link que apareceu no final dos gifs, com a URL para nosso repositório. Aqui vou usar o exemplo do segundo gif:
Acima eu criei a pasta, clonei o repositório do Github no meu computador (vocês podem conferir isso ao ver que depois do comando clone apareceu uma pasta no meu computador com o nome "meu-site", exatamente o nome do repositório criado) e acessei essa pasta por meio do comando "cd meu-site", assim eu estou com o terminal dentro da pasta meu-site).
Caso vocês tenham o Visual Studio Code instalado na máquina de vocês, e ele esteja no Path, basta digitar nesse mesmo terminal o seguinte:
$ code .
E o Visual Studio Code vai abrir exatamente dentro da pasta my-page. Mas aqui eu vou abrir da forma usual:
Acima eu fui até o momento de criação do arquivo html. No entando, pra dar certo o deploy, o nome do arquivo deve ser index.html. Vou criar um html bem basicão aqui e vocês colam no arquivo index.html de vocês.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Meu site</title>
</head>
<body>
<nav>
<div class="nav-wrapper blue darken-4">
<a href="#" class="brand-logo center">Site</a>
</div>
</nav>
<div class="container ">
<h1>Meu site bonito do meu currículo feio</h1>
<h2>Currículo</h2>
<ul>
<li>
<p>Empresa 1 - 2012-2014</p>
<p>Experiência: blablabla</p>
</li>
<li>
<p>Empresa 2 - 2014-2016</p>
<p>Experiência: blablabla</p>
</li>
<li>
<p>Empresa 3 - 2016-2019</p>
<p>Experiência: blablabla</p>
</li>
</ul>
</div>
</body>
</html>
Agora vem a mágica. Abram o terminal na pasta "meu-site" e digitem os seguintes comandos:
[thiago@xfce meu-site]$ git checkout -b gh-pages
[thiago@xfce meu-site]$ git add index.html
[thiago@xfce meu-site]$ git commit -m "meu primeiro commit"
[thiago@xfce meu-site]$ git push -u origin gh-pages
Nesse momento talvez o git peça seu login e senha do Github, que é o usuário criado ao criar a conta e a senha criada lá.
Se der tudo certo, vocês visualizarão algo assim no terminal de vocês:
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 243 bytes | 243.00 KiB/s, done.
Total 2 (delta 0), reused 0 (delta 0)
To The world’s leading software development platform · GitHubThiagoDiasV/meu-site.git
6580557..f9f4104 gh-pages -> gh-pages
Branch 'gh-pages' set up to track remote branch 'gh-pages' from 'origin'.
Ao acessar o repositório recém criado, agora vocês verão algo assim:
Estando tudo certo, basta acessar a seguinte URL:
https://{seu_login_aqui}.github.io/meu-site/
No meu caso:
h t t p s ://thiagodiasv.github.io/meu-site/ (juntem o https para acessar)
E voilá:
Reparem que a URL fica com esse jeitão estranho, com nome de usuário do github, esse github.io e tal. Por isso comentei que pra sites mais comerciais talvez isso seja um empecilho mas existem formas simples também de subir sites estáticos com intuito comercial com uma URL padronizada (mas para isso deve-se desembolsar $$ muito provavelmente haha).
Enfim, espero que tenham gostado e que isso seja útil de alguma forma. Acho uma boa forma de profissionais liberais criarem seu portfólio na web pra mostrar seus trabalhos para ORUTUFs contratantes. Eu mesmo penso em fazer um currículo assim e no momento comecei o embrião de um tutorial de Python básico que no final vai virar um PDF compiladão em formato de livro que pretendo disponibilizar aqui.
