Transcrições
1. Introdução: Oi. Meu nome é Aga. Sou Designer de Codificação e Professor também. Eu amo dinossauros, teclados antigos, cor
rosa, plantas e Internet. Nessas aulas, vamos aprender como
publicar facilmente seu site na World Wide Web. É ótimo ter seu site online porque você pode facilmente compartilhar o link com seus amigos, familiares ou talvez um futuro empregador. Vamos usar as páginas do GitHub para tornar seu site pronto e ativo na Internet. O que há de tão bom nessas aulas? Primeira coisa, eles são doces e curtos. O segundo, você vai aprender o GitHub Pages, que é gratuito. Terceira coisa, você terá seu site na web funcionando para que todos possam vê-lo, vê-lo, enviá-lo para outras pessoas. É difícil? Você está perguntando. Não, não é. Há algum pré-requisito ou coisas que eu preciso ter? Apenas o site que você codificou. Mas e se eu ainda não tiver codificado meu site? Não se preocupe, preparei várias aulas sobre HTML e CSS para iniciantes. Então, tornar-se disponível na web por uma publicação de seu site com a minha pequena ajuda neste curso. Aprendizagem e publicação felizes. Vemo-nos nas próximas aulas.
2. O que você precisa preparar: O que você precisa para preparar. Primeiro de tudo, o site que você codificou, a segunda coisa, GitHub aplicativo desktop que você pode baixar gratuitamente, eo terceiro, seu navegador web favorito. Se você ainda não codificou seu site, não se preocupe, eu preparei vários cursos sobre aprendizagem de HTML e CSS a partir do zero. Graças a eles, você poderá codificar o site desde o início até o fim para que seu site esteja pronto para publicar. Você pode conferir Codifique Seu Próprio Portfólio ou Aumente Sua Marca Pessoal.
3. Criando uma conta no GitHub: Lição número um. A primeira coisa que precisamos fazer é criar uma conta do GitHub. Fazemos isso no GitHub.com e configurar sua conta pode ser gratuita e é isso que fazemos. Claro, se você quiser atualizar seu plano, há um caminho aberto. Mas para os nossos propósitos, a conta gratuita é totalmente suficiente. Temos de arranjar o nome de utilizador. Este ponto é super importante porque uma parte
deste nome de usuário vai estar no endereço do nosso site. Você tem que pensar, qual é o propósito do seu site? Você vai enviá-lo para o seu futuro empregador? Se sim, talvez seja melhor tê-lo o seu primeiro e último nome em vez de apelido. Tudo depende do que você vai fazer com este endereço e com quem você vai compartilhá-lo. Meu nome de usuário seria awwwesome-website, e isso está disponível. O criador de endereços por páginas do GitHub para meu site será este, awwwesome-website.github.io. É importante escolher o nome de usuário correto. Estou tendo o site awwwesome-, preciso preencher e-mail e senha, e então preciso verificar minha conta. Estou lhe dando um minuto para terminar e estaremos de volta para os próximos passos.
4. O que é Git e GitHub?: Lição número 2. Então você registrou sua conta no GitHub, mas há uma pergunta que vem à sua mente e é o que é o Git? Conte-nos mais sobre isso. Embora nossas aulas estejam focadas em publicar o site, não o GitHub e o Git eles mesmos, eu vou dizer brevemente sobre o que se trata. Então Git é um sistema de controle de versão. Isso significa que ele apresenta o histórico de alterações em seus arquivos. Versionamento significa manter o controle de todas as alterações que ocorrem nos arquivos e seu repositório. O que é repositório? Você pode pensar nisso apenas como uma pasta, a coleção de arquivos mais antigos. Ao pensar no sistema de controle de versão, podemos dar uma olhada nas ferramentas que usamos em nossas vidas cotidianas. Por exemplo, você pode imaginar escrever um texto no Google Docs e no Google Docs salvar o histórico de todas as suas alterações. Eu não sabia se você tinha ouvido falar sobre isso. Você pode rever o que estava acontecendo, você pode facilmente voltar para a versão anterior, você também pode nomear esta versão. Então Git desempenha esse papel também para código e todos os arquivos que constroem o site, os aplicativos, tudo o que está conectado com o desenvolvimento das ferramentas. Este é o Git. Mas o que é o GitHub? É a mesma coisa? Na verdade não, porque o GitHub é o provedor de serviços. Então, o GitHub fornece o serviço Git. É uma solução que podemos usar e, em parte, é de graça. Claro, se você gostaria de ter mais recursos, você precisa atualizá-lo para a conta paga. O Git é amplamente utilizado no mundo da TI. Nós vamos usar apenas algumas funcionalidades dele. Então é por isso que eu não quero elaborar mais sobre alguns tópicos, mas se você tiver alguma dúvida, sinta-se livre para me informar nos comentários. Ficarei feliz em preparar novas aulas para você focadas apenas nos comandos do Git. Há algumas palavras que eu vou usar que
são GitHub Desktop que é o software que nos ajuda a
conectar nossos arquivos localmente em nosso computador com os repositórios remotos em servidores GitHub. Eu vou mencionar cometer, vou mencionar repo, que você já ouviu falar. Eu também vou mencionar git push, mas isso é algo que você pode tomar como garantido. Novamente, não se preocupe com os detalhes, nosso objetivo é publicar nosso site, não para explorar cada canto e recanto do GitHub e sistema de controle de versão.
5. O que é GitHub Desktop e GitHub Pages?: Lição número 3. GitHub Desktop é o aplicativo gratuito que permite conectar repositórios locais, para que seus arquivos locais com o remoto que está hospedado em servidores GitHub. É útil usar o GitHub Desktop porque não
precisamos aprender comandos do Git ou usar o terminal, o que pode ser assustador para algumas pessoas. O GitHub Pages nos permite hospedar o site que criamos. Isso significa que podemos publicar o site que está atualmente no repositório remoto em um GitHub. Para torná-lo vivo na world wide web, significa que é tudo de graça, e dentro de vários cliques. Para ser honesto, eu acho que é um método
muito acessível de publicar seu site na web. Se você sentir vontade de cavar mais em GitHub Pages e, por exemplo, usar seu domínio personalizado que você já comprou, você pode ir no site do GitHub Pages e saber mais. Vamos verificar a configuração básica. Configurar o repositório do GitHub com o nome apropriado
e, em seguida, verificar o nosso endereço, que é o seu nome de usuário.github.io, para ver o nosso site pronto e online.
6. Criando o primeiro repositório: Lição número 4. Minha conta está verificada, então agora posso prosseguir. Na próxima etapa, vamos criar nosso primeiro repositório. Você pode imaginar como esta é uma pasta em nosso computador, e esta pasta é monitorada pelo Git. Ele verifica se há algumas mudanças novas com a nossa modificação, tudo, o que está acontecendo dentro desta pasta, dentro deste repositório está no radar. Agora eu posso clicar em “Criar Repositório” nesta página de boas-vindas ou posso ir para a minha conta, clicar em “Repositórios” e clicar no botão “Novo”. Agora é a hora de digitar o nome do repositório e isso é muito importante porque precisamos primeiro escrever o nome de usuário. Então meu nome de usuário é awwwesome-website e a parte adicional que é que.github.io. Basicamente, você pode nomear repositório o que quiser, mas para torná-lo disponível para páginas do GitHub publicá-lo on-line, temos que escrever o nome de usuário e, em seguida github.io porque este vai ser o endereço do nosso site. A segunda coisa é a descrição. Podemos escrever que este é o meu site pessoal. É opcional para que você possa deixá-lo em branco, se desejar. Temos que tornar nosso repositório público para que ele esteja disponível para todos, e podemos inicializar a criação do repositório com arquivo README. arquivo README é apenas um arquivo que diz o que está realmente dentro. Assim, podemos adicionar algumas informações sobre tecnologias, se o projeto for mais complicado, por exemplo, se você estiver trabalhando no desenvolvimento de um aplicativo móvel ou um software sério, geralmente os desenvolvedores fornecem suas informações sobre como compilar o projetos. Mas estas são informações muito técnicas. README pode estar em branco, por isso não se preocupe por enquanto. Eu acho que para o nosso propósito, é apenas bom saber qual é o arquivo README, mas podemos tê-lo vazio. Agora é a hora de clicar em “Criar Repositório” e está quase pronto. Sim, é. Então estamos tendo nosso repositório criado. Este é o nosso primeiro, muito animado por isso. Agora está quase vazio. Estou dizendo que está quase vazio porque tem um arquivo que é README, mas não há arquivos conectados com nosso site, então não temos índice, html ou qualquer estilo ou imagem, então temos que colocar nossos arquivos em repositório remoto e fazer isso, vamos usar o GitHub desktop. Agora você pode abrir desktop.github.com e baixar o aplicativo. Na próxima etapa, vou mostrar como conectar nosso repositório remoto que criamos no GitHub com nossos arquivos locais.
7. Configurando o GitHub Desktop e o primeiro commit: Lição número 5. Tenho o meu aplicativo instalado. Este é o GitHub Desktop. Basta iniciá-lo clicando duas vezes no ícone do GitHub Desktop, ou você pode encontrá-lo com o Spotlight no Mac ou encontrando os arquivos no Windows. Por enquanto, preciso fazer login no meu aplicativo GitHub Desktop. Posso clicar para “Clonar um Repositório da Internet”. Isso é exatamente o que queremos fazer. Estou marcando o GitHub.com e precisamos entrar com nossas credenciais que usamos para o registro do GitHub. Para mim, meu nome de usuário é awwwesome-website, e a senha. Agora eu assinei. Você pode ver que estamos tendo atualmente um repositório, que é o que eu acabei de criar. Posso clicar nele. Tenho o botão azul na parte inferior, que diz ao clone este repo, isto é uma coisa muito longa. Quero cloná-lo do repositório remoto para o meu computador. Só estou clicando nele. Isto é algo que deixamos, e este é o endereço padrão. Este é o caminho local em nosso computador onde gostaríamos de ter nosso repositório salvo. Podemos escolher se ele vai estar em uma área de trabalho ou em uma subpasta, o que for mais fácil para você e onde quer que você queira manter esses arquivos. Para mim, eu já escolhi o caminho e estou clicando em “Clone”. Meu repo foi clonado com sucesso. Não se preocupe e não se assuste com todos esses nomes e tabelas. Vou mostrar-lhe o que realmente precisamos porque não
estamos aprendendo Git nessas aulas. Nosso objetivo é publicar nosso site. Deixa-me mostrar-te a pasta com o meu repo. Esta é a pasta chamada site. Aqui, estou tendo os arquivos do meu site que já está codificado. Podemos colocar aqui seu site, seu index.html, suas imagens,
CSS, tudo o que você criou. Aqui eu tenho a pasta nomeada exatamente como meu repositório no GitHub. Ele tem apenas arquivo README, mas queremos colocar nosso site aqui. O que eu faço é que eu apenas marquei todos esses arquivos que estão construindo meu site na verdade e arrastando para a pasta. Meu repo tem mais arquivos agora. Eu só vou mostrar rapidamente o site que eu
codifiquei para mostrar que isso funciona. Este é o site que eu criei. Se você gostaria de ter algo semelhante, eu recomendo fortemente que você assista às minhas aulas. Eles são intitulados Code seu próprio portfólio, e dentro de três horas você pode codificar tal site. Mas vamos voltar para a pasta. Os arquivos estão bem aqui. Deixe-me verificar nosso GitHub Desktop, ele é atualizado com esses novos arquivos e eles estão marcados em verde. Significa que essas coisas são novas no nosso repositório. Na verdade, todos os arquivos são novos. Cada linha de código teria sido marcada em verde. O que eu preciso fazer, eu preciso marcar todos esses arquivos e enviá-los. O que realmente comprometer-se significa? Commit salva nossas alterações no repositório local, então isso significa que elas estão seguras. Mesmo que façamos algo enquanto isso, não
precisamos nos preocupar porque eles estão comprometidos. Eles estão quase salvos no nosso repo remoto também. Deixe-me cometê-los. cada commit, escrevemos o resumo do que está acontecendo nessas mudanças. Aqui podemos digitar, por exemplo, primeira versão do meu site, e eu posso me comprometer a mestre. Mestre é uma ramificação padrão. Eu não quero me aprofundar em detalhes, mas você precisa acreditar em mim que master é um branch padrão para cada repositório, e eu clico em “Commit”. Todas essas novas mudanças, todos esses novos arquivos serão comprometidos com nosso repositório. Posso ver que a lista está vazia porque nada mudou. Todas as alterações anteriores são salvas, então meu repositório está atualizado. Não há mudanças locais, como você pode ver aqui. A única coisa que precisamos fazer é enviar todas as alterações para o repositório remoto,
para o repositório que criamos no GitHub. Eu clico “Push origin” no botão azul, e todos os objetos, todos os arquivos estão sendo empurrados e estamos prontos. Vamos verificar o que está acontecendo no GitHub.com, na minha conta. Estou no GitHub.com e este é o meu repo. Se você já fechou este site, você pode facilmente acessar seus repositórios, abrir o repositório que você acabou de criar. Você pode ver que temos este arquivo README e temos o primeiro commit de Aga, e este é o resumo, primeira versão do meu site. Podemos ver aqui todos esses arquivos. Podemos ver também que o empurrão foi feito há um minuto.
8. Aplicando as mudanças e visualizando o site publicado: Lição número 6. Agora estamos felizes por termos cometido tudo, mas e se quisermos mudar algo em um site? Vamos imaginar a situação que eu gostaria de alterar o título do meu site antes de verificá-lo online. Estou abrindo a área de trabalho do GitHub. Consigo ver a história. Posso ir, por exemplo, a este arquivo. Posso abrir este no Atom. Este é o editor de codificação. Vamos imaginar que aqui eu quero escrever Eu sou Aga Doe, agora é Jane, mas Aga. Volto para a área de trabalho do Github e posso ver que há uma mudança. Eu mudo para a guia Alterações, e Jane está em vermelho. Significa que ele se foi, e em verde eu vejo Aga. trabalho do Github vê minhas alterações. Ele sabe instantaneamente o que está acontecendo nos meus arquivos. Por exemplo, aqui há um lugar titular, há uma dica. Posso escrever atualizando index.html, mas também posso escrever alterando o nome do autor. Eu clico em “Confirmar para dominar”. A mesma coisa, nós comprometemos os arquivos, mas para torná-los disponíveis no repositório remoto precisamos clicar em “Push origin”. Vamos verificar se meu commit está registrado no GitHub.com. Sim, é. Se eu clicar no nome deste commit, vejo que Jane se foi e Aga é adicionado. Eu te disse que na verdade isso vai ser URL, o endereço do nosso site. Vamos copiar isso, colá-lo no navegador e ver o que podemos ver. Nosso site é vida e está pronto. Não é legal? Eu fiz isso por um tempo muito curto. Eu posso ver que há Aga, então meu site é atualizado. Posso copiar este link e enviá-lo para todos que eu quiser. Isso é tão fixe. Isso é tão excitante. Vamos imaginar a situação que eu gostaria de mudar algumas coisas no site novamente. Eu estou em Atom e por exemplo eu quero escrever Eu sou incrível Aga. Estou guardando este. Claro, se eu atualizar isso, eu não verei as alterações porque
as alterações não foram confirmadas e não são enviadas para o nosso repositório remoto. Essas alterações são feitas apenas localmente. O que eu preciso fazer, você se lembra? Precisamos verificar as mudanças, posso ver que este título está atualizado. Preciso adicionar novamente a descrição do meu commit, alterando o título novamente, e estou confirmando como mestre. Minhas alterações locais são salvas. Estou pronto para publicá-los no repositório remoto. Parece que eles estão comprometidos e empurrados. Deixe-me atualizar o site. Aqui temos oi, sou Aga Doe, e agora devemos ter, sou incrível Aga. Posso ver que meu título está atualizado. Embora seja muito longo, isso não importa. Eu só queria mostrar que nós podemos fazer as mudanças e você pode vê-las instantaneamente. Às vezes, seu cache no navegador da Web pode estar cheio, então é bom abrir suas ferramentas de desenvolvedor clicando com o botão direito do mouse em “Inspecionar”. Aqui vamos ter cache vazio disponível e recarga rígida. Ele irá limpar o cache e recarregar o site novamente. Se você tiver algum problema em ver as alterações, você pode fazê-lo. É isto. Nosso site está online. Podemos mudá-lo. Você pode enviar um link para todos. Eu acho que é ótimo porque seriamente não demorou muito para fazer funcionar. O importante é que é de graça. Você pode adicionar facilmente o conteúdo. Você também pode ter um controle sobre suas alterações em um site.
9. Trabalho de casa: A lição final. Depois de terminar minhas aulas, seu dever de casa é super simples. Está colando o link para a nossa seção de projeto. Eu adoraria ver suas páginas e estou super curioso como tudo correu. Existem muitas outras ferramentas que você pode usar para
conectar o GitHub ao seu repositório local. Então eu estava recomendando GitHub área de trabalho, mas há árvore de código-fonte. Você também pode usar linha comum, que é então outro nível de avanço. Estou mantendo os dedos cruzados para todos os seus comentários e todos os seus sites publicados. Você pode me encontrar no Instagram, no Twitter, ou você só pode enviar um link usando seu e-mail.
10. Bônus: bloopers: Então faça sua venda. Primeira coisa, aprender todo o processo com isso, porque vai ser um grande presente. Não.
Aga Naplocha, Creative coder & designer
