VOLT DATA LAB OUTUBRO Tutorial ridiculamente detalhado e ilustrado para publicação de uma página web no GitHub Pages

Transcrição

1 VOLT DATA LAB OUTUBRO 2015 Tutorial ridiculamente detalhado e ilustrado para publicação de uma página web no GitHub Pages * Este é um tutorial em fase beta escrito com base no curso de programação web básica para jornalistas oferecido pelo Volt Data Lab. Use-o como quiser, se possível com os devidos créditos. Site: GitHub: Facebook: Nesse tutorial, veremos como publicar páginas na Internet utilizando apenas a interface web do GitHub, sem utilizar Git nem outros aplicativos. É um processo pouco óbvio ou intuitivo, mas muito simples. Esse método exige bastante uso do famoso CTRL+C CTRL+V, mas pelo menos você vai conseguir fazer tudo com pouco esforço de configuração, sem quebrar a cabeça com códigos que você não entende. Para que serve isso? Bem, às vezes, você não quer pagar um provedor para hospedar seu site ou projeto pontual. Às vezes você não quer fazer um blog no Wordpress para colocar seu portfólio. Às vezes, você que experimentar códigos HTML, CSS e JavaScript sem grandes complicações. Às vezes, você está só começando nesse mundo das publicações. Enfim, use como quiser. * obs: esta é uma versão ainda não revisada por um segundo par de olhos. não nos responsabilizamos por erros de digitação, pelo cenário político brasileiro nem por vistas cansadas Primeiramente, abra uma conta no GitHub ( É gratuito e rápido. Não se esqueça de confirmar a conta, a partir de um que será enviado para você.

2 Siga as setas vermelhas! Após essa etapa, dirija-se à sua página do GitHub. Agora você deve criar um novo repositório, clicando em New Repository.

3 Não é tão difícil! Dê um nome para o repositório. Inicialmente, pode ser /teste Dê uma breve descrição para o projeto. Algo como: este é um projeto teste. É opcional, mas é bom utilizar esse campo por questões de boas práticas organizacionais. Certifique-se de selecionar a caixa Initialize this repository with a README. Isso é particularmente importante porque se você não selecionar, o GitHub vai presumir que você está iniciando e organizando seu repositório não pela interface web, mas sim a partir de um comando em seu computador, um

4 processo diferente. Nós não vamos mexer com isso aqui. Aqui é beginner, mano! Agora você está na página do repositório onde colocará os seus códigos. Se você tem um HTML e um CSS prontos, ótimo. Se não, pode usar um exemplo do Volt, não cobramos nada por isso! Veja o exemplo aqui: A página do repositório deve se parecer exatamente com a tela abaixo (claro, sem o testesampa escrito na minha descrição de teste):

5 O que você fará agora é subir os códigos um por um, através de um CTRL+C + CTRL+V. Há outras formas de se fazer isso com mais rapidez - principalmente através do aplicativo do GitHub pra desktop - mas são mais trabalhosas para configurar no começo, embora depois poupem bastante trabalho de copiar e colar e deixem os arquivos sincronizados. Mas é melhor que você saiba fazer isso no jeito mais básico primeiro. Haverá tutorial para isso depois (talvez)! Coloque uma descrição breve para o projeto de vocês, só para referência, mas ignore por enquanto o campo Website ao lado. Ignorem na cara dura o que está sob o vermelho Clique no sinal de + do lado do nome do repositório.

6 Atribua um nome para o arquivo inicial HTML de vocês. Nesse caso, como será a página inicial (e por enquanto única) desse projeto, o nome deverá obrigatoriamente ser index.html. Cole no campo de texto abaixo de Edit New File todo o código HTML. Obrigatoriamente index.html Role a tela para baixo e dê uma descrição alternativa se quiser, e clique em Commit New File. Nesse caso, o Commit funciona como o botão Publicar de um CMS. Não se preocupe com a opção Create a new branch, não a usaremos. É útil para quem está mais familiarizado e quem colabora nos códigos, não é o caso agora. Muito bem! Agora temos um arquivo publicado no nosso repositório. Note que ainda não há uma página publicada, o que foi publicado é um arquivo no seu repositório. Segure o andor, chegaremos lá.

7 Pois bem, publicamos o HMTL, a estrutura, do nosso projeto. Agora precisamos dar os estilos dele, senão vai parecer aqueles sites da década de 1990, ou até pior. Façamos o mesmo processo de publicação anterior, clicando em + novamente, só que dessa vez criando um arquivo chamado qualquernome.css. Nesse caso, você pode chamar o arquivo do que você quiser, contanto que tenha a extensão.css e esteja linkado no <head> </head> de seu index.html. OBS: para quem não se lembra, é assim que faz o link: <link rel="stylesheet" href="qualquernome.css" type="text/css" charset="utf-8"> ou, se estiver em uma pasta CSS, basta colocar o nome da pasta na frente no href, assim: href= css/qualquernome.css" Dê o Commit novamente para disponibilizar o arquivo no seu repositório. Excelente! Agora temos nosso repositório povoado! Mas calma lá, o projeto mesmo ainda não está no ar, só os arquivos necessários para ele. O pulo do gato para isso é simples, mas nada, absolutamente nada, óbvio. À esquerda do nome do repositório de vocês há um ícone que diz master. O que nós vamos fazer aqui é clicar nesse master e, no campo de texto, escrever literalmente gh-pages. Só assim o GitHub vai entender que você não quer apenas ter um repositório, mas também um site publicado, cuja página principal será o index.html. Cliquem em Create Branch: ghpages e voilá!

8 Isso é importante pra cacete Ops, meu Deus, o que eu fiz de errado? Onde tá publicado? Ainda não publicou, né? Não, sinto muito (ufa!), ainda falta mais um passo para isso. Naquele campo que ignoramos no começo, o Website, precisamos colocar outra coisa muito simples, mas nada óbvia. Como o GitHub usa seu domínio github.com para os repositórios, ele redireciona todos os sites e projetos publicados para um outro domínio dele também, o com a terminação github.io. No campo Website, coloque o seguinte: do seu repositório.github.io/**nome do projeto Atente-se às letras maiúsculas. Os nomes deverão estar idênticos. Exemplo: Não use o MEU nome de repositório, use o SEU Agora sim! Seu projeto estará publicado nessa URL que você completou! Clique nela para ver seu trabalho. Como o GitHub precisa reconhecer as informações salvas, às vezes demora um

9 pouco (tipo 30 segundos até um minuto) para espelhar o resultados, então se não deu certo logo na hora, espere um pouquinho. OBS: Isso serve na hora de atualizar os códigos também, demora para renderizar! Só uma última coisa. Não é fundamental, mas é bom você fazer isso para evitar confusão. Como agora você tem dois branches dentro do mesmo repositório, o master e o gh-pages, você precisa priorizar o gh-pages. Isso porque toda vez que você for fazer uma mudança na sua página, se você a fizer no master, sua página não espelhará essas mudanças. Sua página só será alterada se você fizer as mudanças no branch do gh-pages. Isso é fácil, você pode clicar naquela mesma caixa e selecionar entre master e gh-pages, mas é contraproducente ficar fazendo isso toda hora - sem contar que você pode depois esquecer de mudar e tudo vira uma confusão. Por que manter o master então? Bem, você pode apagar se quiser, mas é bom e de graça deixar de backup caso aconteça alguma coisa com seu código sob branch gh-pages. Para tornar o gh-pages o padrão do seu repositório, vamos configurar isso em Settings > Branches > Selecione o ghpages na caixa > Update.

10 Você receberá uma mensagem de alerta, mas não se preocupe, não é nada demais, só quando várias pessoas trabalham no mesmo código e alguém faz essa mudança inadvertidamente. Pronto! Nerd! Você agora sabe publicar uma página na Internet. Este é um projeto de Volt Data Lab