Lance seus sites com o Github Pages

1. Introdução: Ei, pessoal, meu nome é Paris. Sou um desenvolvedor Web de pilha completa com sede em Nova York, e tenho trabalhado como instrutor profissional de desenvolvimento Web desde 2016. Hoje eu vou orientá-lo através de um processo realmente simples que vai mostrar a você como implantar sites estáticos. Então, o que Página é que você tem vindo a oferecer em HTML, CSS e JavaScript. Vou mostrar-lhe uma maneira rápida e fácil de colocá-los online para que qualquer um com um navegador da Web e com sua garota possa acessá-los publicamente. Se você achar este curso útil e estiver gostando do que estou fazendo, deixe um comentário. Se você tiver quaisquer perguntas ou comentários, não compartilhá-los para que eu ou o resto da comunidade possa ajudá-lo. Podemos aprender juntos. Eu realmente encorajo você a postar seu trabalho para que os futuros alunos possam ver o que é possível depois de fazer este curso. E por último, se você quiser se manter atualizado com todos os cursos que eu postar no futuro, basta me seguir no meu perfil de instrutor 2. Visão geral do curso: Tudo bem, pessoal. Então, antes de mergulharmos, eu só quero mostrar exatamente o que vamos fazer hoje. Nós realmente não vamos escrever nenhum código. Eu já escrevi um código. Se olharmos para o meu editor de texto, eu tenho um arquivo HTML que só tem um botão e eu tenho um arquivo CSS e eu tenho um arquivo javascript que. Bem, quando eu clico isso, aparece uma caixa de alerta. Eso como você pode ver aqui olhando para a barra de endereços. Estas são as páginas da Web sendo carregadas do meu sistema de arquivos local e o que vamos fazer hoje é descobrir OK, como vamos do desenvolvimento local para ter a mesma coisa em um realmente seu l para que qualquer um com um navegador da Web e este ano Earl pode visitar esta página da Web e ver todas as mesmas funcionalidades 3. Configuração inicial: Tudo bem, então a primeira coisa que vamos fazer é visitar. Obter hub dot com e nós vamos nos inscrever para uma conta. Obviamente, se você já tem uma conta, você não precisa fazer isso. Você pode usar essa conta. Mas se você não tem conta, se você é novo para obter o Hub, basta visitar a página inicial. Clique no botão de inscrição que vai iniciar o fluxo de inscrição, e ele vai pedir seu nome de usuário. Seu e-mail. Sua senha. À medida que você continuar, ele vai pedir que você escolha o tipo de conta que você gostaria que fosse a conta paga ou gratuita . Hum, vou sugerir por agora, apenas para ir com a conta gratuita, isso vai significar que todo o seu código que você empurrar para cima para obter marido vai ser público. No entanto, no nosso caso de hoje pelo que estamos tentando fazer, isso não é um problema. Se você escolher Teoh, Teoh, pagar, esquecer hub no futuro. Você sempre pode fazer essa alteração mais tarde para ter repositórios privados e tornar seu código não acessível publicamente. Mas por hoje, só para começar as coisas rapidamente, por que você não vai em frente e apenas se inscreve para uma conta gratuita se você ainda não tem uma, a segunda coisa que eu vou ter que fazer depois de você, filho. Afriat Hub é visita ponto desktop Obter hub dot com e nós estamos apenas indo para baixar, uh, o aplicativo desktop nativo. Esquecer, hein? Isso vai tornar nossas vidas um pouco mais fáceis em termos de comunicação com get hub, nós não vamos ter que usar a linha de comando para usar get Nós não vamos ter que abrir uma janela de terminal para um monte de pessoas que vai fazer as coisas um pouco um pouco mais amigável. Hum, e está indo para o pé Faça isso um pouco mais de uma experiência de aprendizagem rápida. Se você no futuro queria mergulhar mais profundamente em obter e usá-lo no terminal, por todos os meios ir para ele. Mas por agora, vamos usar apenas para obter o cliente de desktop Hub e tornar as coisas o mais simples possível lançamento que podemos apenas lançar nossas páginas da Web e torná-las públicas, e podemos ir a partir daí 4. Controle de versão explicou: Tudo bem, então agora que nós temos nossas contas get tem e nós baixamos o get have desktop cliente, nós vamos falar sobre controle de versão. Nós vamos falar sobre obter e vamos falar sobre obter, hein? Vamos entrar em um pouco de detalhes sobre o que eles realmente são, como eles são diferentes e como eles desempenham o papel que eles desempenham no que estamos tentando fazer agora que é lançamento são nossos primeiros sites para que eles sejam publicamente acessíveis. Portanto, o controle de versão é esse conceito de rastreamento de alterações em um projeto ao longo do tempo. Ah, bom sistema de controle de versão irá fornecer-lhe uma maneira de tirar instantâneos de sua base de código como você faz alterações. E então você pode ir em frente e inspecionar como seu código olhou para cada instantâneo. E se ele tem um rico conjunto de recursos, um sistema de controle de versão também deve permitir que você viajar no tempo, se você quiser, entre instantâneos para se você quiser, que você possa retornar Teoh versões anteriores de sua base de código independentemente do que parece agora, contanto que você tenha tomado as medidas apropriadas para fazer esses instantâneos no passado. Então isso aqui é apenas um pequeno diagrama, uma pequena representação visual de como um projeto pode olhar ao longo do tempo e como o controle de versão realmente funciona para criar instantâneos de um projeto à medida que ele muda ao longo do tempo. Então, se olharmos para aqui, , a caixa verde indica todo o projeto. Você pode pensar nisso como o diretório onde todos os meus arquivos de código vivem. Então, para construir html, veja, como um script de trabalho sites, você pode adivinhar que eu teria um arquivo html index dot no diretório raiz dos meus projetos. Minha pasta do projeto é chamada de meu projeto, e eu tenho um arquivo aqui. Chama-se Estudo do Índice. Ela, Mel e eu temos em cada etiqueta que diz: “Olá. Eu vou tirar um instantâneo do meu projeto neste momento, e eu vou dizer que este instantâneo é um instantâneo, e eu vou dar uma mensagem a este instantâneo. Eu só vou dizer que as mensagens adicionam primeiro arquivo html. Depois de tirar aquela foto, vou fazer algumas alterações na minha base de código. Vou adicionar um arquivo CSS de ponto principal. Este arquivo CSS ponto principal está apenas indo alterar a cor de H um tags. E assim que eu tiver esse arquivo adicionado e eu tiver todo o conteúdo desse arquivo da maneira que eu quiser, eu vou tirar outro instantâneo. Eu vou dizer que este instantâneo tem uma idéia de dois é o segundo instantâneo, e eu vou dar a ele uma mensagem que diz, Eu adicionei o primeiro arquivo CSS Então, depois disso, uma vez que eu tenho este primeiro instantâneo no segundo instantâneo no meu histórico de instantâneos, vou mudar minha base de código novamente. E eu estou indo para realmente apenas modificar o meu índice dot html arquivo para que o H um tags agora são tags p. E uma vez que eu tenha isso do jeito que eu quero uma vez que todo o código foi modificado e eu acho que as coisas estavam indo bem, eu vou em frente e tirar outra foto. Isso vai ser o instantâneo número três. A mensagem para isso vai ser que eu editei o arquivo HTML. Então, se você pensar em todos esses instantâneos, você sabe, no final de todas essas mudanças, meu código será parecido com ele no terceiro instantâneo. Essa é a versão atual em que estou trabalhando. No entanto, a coisa que é tão poderoso sobre o controle de versão é mesmo que o meu H um tags air agora p tags e agora eu tenho um arquivo CSS de ponto principal, eu sempre posso voltar e referenciar como meu código parecia no primeiro instantâneo o que meu o código parecia no segundo instantâneo. E eu também posso alternar entre qualquer um desses três instantâneos, desde que eu tenha tomado o tempo no passado para levá-los. E isso é em poucas palavras. O que é o controle de versão e por que ele é tão poderoso. Você pode imaginar se você tem, você sabe, fazendo desenvolvimento Web por algum tempo que esses arquivos não têm apenas três linhas neles. Podem ter dúzias ou centenas de linhas de comprimento. Eles podem mudar a cada poucas horas a cada poucos dias, e pode ser muito, muito difícil saber ou lembrar como você poderia ser no passado. É por isso que o controle de versão é tão útil e por isso é tão poderoso. Então agora para obter é o sistema de controle de versão mais amplamente utilizado de longe é na verdade um programa de linha de comando, que significa que você tem Teoh sabe como utilizar o terminal ou outra interface de linha de comando . A fim de usar o programa get raw. No entanto, há muitos aplicativos de desktop obter Hub desktop sendo um deles, o que acabamos de baixar que nos permite utilizar o poder de chegar até certo ponto sem precisar mergulhar na linha de comando. Portanto, há algumas frases-chave com as quais queremos nos familiarizar. Eso que quando falamos sobre obter e usar obter estavam na mesma página. O 1º 1 é commit. Commit é apenas mais uma palavra para um desses instantâneos que tomamos sempre que fazemos uma modificação em nosso código que queremos salvar em nosso histórico de obtenção, vamos fazer um commit, e esse commit vai ter uma idéia única. E também vai ter uma mensagem das mudanças que fizemos um repositório. Muita gente os chama de repouso. Repositório é apenas uma coleção de commits para um determinado projeto. Então, se você olhar para todos os commits de um projeto, você pode obter todo o histórico, e todos eles são armazenados dentro de um repositório. Ah, repositório local é uma cópia de um repositório que existe em sua máquina, seu computador, seu laptop, seu desktop, o que quer que seja. Um repositório remoto é uma cópia de um repositório que existe em um servidor remoto agora para se levantar. Portanto, é muito importante distinguir entre levantar e levantar, embora ambos tenham o nome. Obter Hub é na verdade uma empresa, enquanto obter é um programa. Get é um projeto de código aberto que foi criado por Linus Torvalds. Get Hub é uma empresa privada que cobra por seus serviços e tenta tornar os mundos do desenvolvimento de software muito mais fáceis. É uma plataforma SAS baseada em nuvem para hospedar repositórios de get remoto e, no nosso caso, será extremamente útil no fornecimento de recursos para servir páginas da Web incluídas em repositórios que hospedamos no get e isso será através de um chamada Get Hug Pages. Também faz muito mais coisas, e podemos falar disso mais tarde. Mas, por enquanto, só nos importamos com essas duas coisas. Get Hub Desktop é o aplicativo de desktop nativo que acabamos de baixar, e isso vai tornar mais fácil para nós afundar nosso repositório local em nosso computador com o repositório remoto que criamos no Get. 5. Como criar e clonar um repositório do GitHub: Tudo bem, agora que temos um pouco de um entendimento do que é e o que obter Hub é e como eles jogam juntos, vamos em frente e criar nosso primeiro repositório get hub. Então vamos ter Hope Dot com na barra de valete em cima. Certo, tem esse ícone de mais. Vamos clicar que haverá um menu suspenso com a nova opção de repositório. Vamos clicar nisso, e isso vai nos levar à página onde podemos criar um novo repositório. Então vamos primeiro selecionar um nome para este repositório. Vou chamar-lhe “Olá, Website Mundial”. Certifique-se de que não tem espaços no nome. Vou deixar a descrição em branco, e vou deixá-la como um repositório público. Só vou clicar no botão do ecrã e começar as coisas. Então agora ele criou o meu repositório em busca, hein? Mas ainda não temos nenhum código. Obviamente nós acabamos de criá-lo, e ele está nos dando algumas opções de como podemos adicionar algum código de um repositório existente usando alguns comandos de linha de comando. No entanto, hoje vamos usar o cliente get hub desktop. Então, em vez de usar essas opções, vamos clicar neste botão aqui em cima. E isso vai nos perguntar se podemos abrir o que tem aplicativos desktop. Vou clicar nisso. E uma vez que abrirmos isso, ele vai nos dar alguns pedaços de informação a primeira parte bem aqui. Este é o U. R L. Para o repositório, o repositório remoto que acabamos de criar no Get Up. O segundo bit de informação é o caminho do arquivo local para onde esta versão local do repositório vai viver em nossos computadores. Então, como você pode ver, obter cliente Hub Desktop cria este diretório get hub na minha pasta Documentos e ele só vai armazenar este projeto no diretório Hello World Website dentro desse get of diretório. Então, tudo isso parece ótimo. Estou em um clone de cliques e agora você pode ver que este repositório do mundo hello foi adicionado ao meu diretório de repositórios do hub local e tudo está vinculado 6. Como fazer as mudanças em local e fazer a: Tudo bem. Então, em nossa última seção, criamos nosso primeiro repositório get home, e clonamos esse repositório para nossos computadores para que tenhamos uma instância local desse repositório remoto. Então, se pensarmos nesses dois vários repositórios, eles são apenas cópias da mesma coisa, eles podem ficar fora de sincronia. Mas realmente, queremos mantê-los em sincronia. E isso é o que este aplicativo get up desktop está nos ajudando a fazer. Então, à medida que fazemos alterações em nosso computador local, vamos colocá-las no repositório remoto para que todo o código possa ser o mesmo em ambos os lugares. A primeira coisa que vou fazer agora é abrir o Finder, e vou mostrar a vocês o que Get Hub desktop. Está mesmo nos seus documentos? Holder, se você estiver trabalhando em um Mac, Eu não tenho certeza de como isso funciona nas janelas, Mas se você estiver trabalhando em um Mac em sua pasta Documentos, ele vai criar um diretório get hub para você. E todos os repositórios que você cria ou gerencia com seu aplicativo get up desktop serão armazenados neste diretório get Hub, você pode alterar o local padrão. Mas é aqui que ele irá armazenar coisas para você e onde ele irá procurar repositórios se você não alterar essa opção padrão. Então, como você pode ver aqui, já que acabamos de clonar o repositório do site hello World para nossas máquinas locais, temos este diretório hello world bem aqui. E é aqui que todo o nosso código-fonte irá para que possamos confirmar essas alterações e, em seguida, enviá-las para o repositório remoto. Então eu realmente tenho algum código inicial bem aqui, e vocês podem baixar o mesmo casaco inicial abaixo do link. Eu só vou copiar e colar isso aqui para que possamos começar e correr bem rápido. E quando eu faço isso, se voltarmos para o aplicativo get hub desktop, podemos ver que ele tem esses três arquivos que eu acabei de adicionar. E diz que esses novos arquivos que ainda não foram rastreados é o que este verde mais significa para que eu possa olhar todos os arquivos. Tudo o que é novo vai ser verde, e tudo isso parece muito bom. Só tenho um arquivo JavaScript. Eu não tenho índice dot html arquivo e eu permaneci no arquivo CSS. Então eu vou cometer isso e este vai ser o meu primeiro compromisso. E a convenção para o seu primeiro compromisso é apenas nomeá-lo primeiro commit, e eu poderia dar-lhe uma pequena descrição aqui. Neste, eles adicionam índice html Quero dizer, não CSS e precisam de arquivos Js ponto. E uma vez que eu adicionei essa mensagem e a pequena descrição, eu vou apenas clicar neste botão, comprometer a dominar, e é isso. Eu criei um desses instantâneos que falamos anteriormente. Essa versão do meu código foi solidificada que agora está na história para isso. Obter repositório. Agora, lembre-se, isso está tudo no meu repositório git local. Nenhuma dessas mudanças foi refletida ainda. Obter hub dot com. Nós viemos aqui e atualizamos a página. Podemos ver que ainda parece exatamente como antes. Então temos Teoh empurrar essas mudanças para obter hub dot com. E podemos fazer isso apenas publicando esta filial aqui. Clique nesse botão que ele vai me pedir para entrar. Obviamente altos. Paris e minha senha não espreitam bem. Uma vez que eu assinei, ele sabe quem eu sou. E poderia fazer essa conexão. E ele pode afundar este código para que quando eu atualizar esta página, todo o meu código está agora aqui em get hub dot com. 7. Como ativar o GitHub para seu repositório: Tudo bem, então agora que temos o código tar do nosso repositório local em um repositório remoto get hub , tudo o que temos que fazer para permitir que nosso site seja acessível publicamente é ir para a guia de configurações , rolar até a seção rotulada obter páginas viciadas, alterar este nenhum. Opção suspensa para ramificação mestre e clique neste botão Salvar. Uma vez que fizermos isso, podemos rolar para baixo. A página vai atualizar, e na verdade vai nos dar um você, Earl que podemos visitar para acessar nosso site. Então, se clicarmos nisso, provavelmente vamos conseguir um 40 para bem, na verdade não. Então foi atualizado para mim muito rapidamente. Às vezes eles podem levar alguns minutos até mesmo algumas horas, mas como você pode ver aqui eu tenho uma garota pública que qualquer um pode visitar. E esta é a minha página web. Posso clicar nisto. Meu roteiro de trabalho está funcionando. Meu CSS está funcionando e foi realmente tão simples. Aqui atrás, tudo o que fizemos foi mudar uma opção em um repositório e só funciona. É por isso que estamos usando “get hub” e “get up ages”. Hoje, porque ele realmente tira um monte de dor de cabeça fora da implantação de sites de páginas estáticas. E torna a vida super simples novamente. Só vou clicar neste botão. É tão gratificante, ótimo trabalho. 8. Como fazer as mudanças após a implementação: Tudo bem. Então, acabamos de ver como é fácil criar código em nossos computadores locais. Empurre-o para obter hub, deslize um interruptor para habilitar obter suas páginas e, em seguida, ter um site voltado para o público que está funcionando totalmente com um conde realmente que outras pessoas podem visitar em seus navegadores web. Como vamos agora fazer modificações alterar o código e manter as coisas atualizadas hoje à medida que continuamos a desenvolver? Bem, é realmente apenas um simples como as coisas eram em primeiro lugar. Vou abrir meu editor de texto e vou fazer isso muito simples. Vou mudar a cor deste botão de rosa. É você, verde. Eu vou vir até aqui para levantar a área de trabalho. Vejo que há uma linha que foi alterada. Eu vou fazer isso um commit então novamente, você não pode empurrar nenhuma alteração a menos que haja embrulhado em um commit ou a menos que você tire um desses instantâneos. Então vou fazer outro compromisso. A mensagem aqui vai ser alterada a cor do botão. Eu não tenho que adicionar uma descrição, mas você sempre pode. E então eu vou clicar neste botão para confirmar. Uma vez que eu faço isso, eu posso ver que eu tenho este pequeno ar aqui e este pequeno com um estreito aqui . Isso indica para mim que meu repositório local e meu repositório remoto não estão sincronizados na medida em que eu realmente tenho um commit que está à frente no meu repositório local e, em seguida, no meu repositório remoto. Então eu vou clicar neste botão pressionado origem, e isso vai afundar tudo para mim. Se eu voltar para obter hub a página do meu repositório e eu atualizar, eu posso ver que o commit mais recente agora é alterado cor do botão em vez de primeiro commit. Eu também posso ver quais arquivos foram afetados por isso. Comprometer-se. Então o arquivo CSS aqui foi alterado de rosa para verde. Ótima. Volte aqui para o meu site de vida cada atualização da página e é ótimo 9. Gochyas: Tudo bem, pessoal, isso praticamente encerra tudo para este vídeo sobre como utilizar páginas de “get up up” para implantar sites estáticos . Vou rever alguns guaches que podem ser difíceis se não souber o que está procurando. O 1º 1 é provavelmente um dos mais comuns, e isso é simplesmente não ter um arquivo html index dot na raiz da pasta do seu projeto. Isso significa que no nível mais externo do seu repositório get hub, tem que haver um arquivo html chamado index dot html. Esse é o arquivo que será servido como sua página de rota para o seu site. Você não pode ter o nome de outra coisa. Só tem que ser indexado na idade. Agora você pode ter um monte de outras páginas HTML que você vincula que são outras páginas do seu site. Mas você tem que ter este índice dot html. Outro problema que pode surgir é que você está fazendo alterações localmente, mas você, por algum motivo, não pode empurrá-las para obter hub. Pode ser que você não tenha realmente cometido essas mudanças. Então lembre-se que temos que tirar esses instantâneos para enviar alterações locais para o nosso repositório remoto . Portanto, se você não tirou esses instantâneos após uma alteração, você não será capaz de empurrar essas alterações. Outra coisa que pode ser um pouco frustrante e confuso no começo. O que você vai muito se acostumar é o fato de que o código que você empurra para cima pode levar alguns minutos, mesmo algumas horas antes que ele esteja ao vivo. Então eu usei um pouco de magia de filme neste vídeo tipo de acelerar as coisas. Mas houve alguns minutos de atraso entre quando eu fiz algumas mudanças e empurrei para obter ajuda para quando eles foram refletidos no meu site de vida. Então espero que isso cubra a maioria das bombas rodoviárias que você pode experimentar. Se houver outros, por favor, comente abaixo. Vou tentar o meu melhor para resolver quaisquer problemas. Se não eu. Espero que a comunidade ajude vocês. 10. Conclusão: Tudo bem, pessoal, então é basicamente isso. Como você pode ver, implantar páginas da Web estáticas com get hub e get pages é bastante simples. Esse foi realmente o meu objetivo neste curso era entregar a vocês um método de implantação que tem uma barreira baixa para a entrada. Isso é realmente tudo que você tem que fazer é se concentrar em escrever código e você não precisa se preocupar com operações de desenvolvimento ou algo assim novamente. Se você achar este curso útil e se estiver gostando do que estou fazendo, deixe um comentário. Você pode compartilhar isso com qualquer um que, você pode pensar que também se beneficiaria com a informação. Se você tiver alguma dúvida ou comentário, apenas compartilhe esses também para que eu ou o resto da comunidade de comunicação possa tentar ajudá-lo. E por último, se você tiver alguma idéia para cursos que você possa querer ver no futuro, basta me avisar e eu tentarei fazer isso acontecer. Você pode seguir meu perfil de instrutor para ver todos os cursos que eu postar a partir daqui e compartilhar seu trabalho para que você possa inspirar outros alunos