Transcrições
1. Introdução: Bem-vindo à aula onde
eu ensino como você pode hospedar seu site com
GitHub Pages gratuitamente, com seu.com ou
qualquer outro domínio. Mas há uma pequena pegadinha. Você só pode hospedar
sites estáticos baseados em HTML, React, Angular ou tecnologias
semelhantes. No entanto, você também pode
fazer chamadas de API para exibir gráficos
do mercado de ações, etc. essencialmente, você não pode hospedar sites
dinâmicos que
usam banco de dados como MySQL ou tecnologias como
PHP, WordPress, larval, etc. Agora, você precisa ter o Git instalado no seu sistema
para que isso funcione? E a resposta curta é não. Você só precisa de seus arquivos estáticos
do site prontos? Um domínio
totalmente opcional, URL do
seu site
ficará assim. Se você não tiver um nome de usuário de
domínio.. io, e ele ficará
assim se você tiver. E uma conta do GitHub, é isso. Presume-se
que meu nome é Shelby se eu sou um desenvolvedor full-stack, professor de
produtividade e
ex-fundador de startups. Eu tenho muitos outros
cursos aqui no Skillshare. Não deixe de conferir. E você também pode
visitar meu site, abrigo, temos ponto com
para saber mais sobre mim. Agora vamos
direto ao curso e hospedar seu site
no GitHub Pages.
2. Git vs Github: Qual é a diferença
entre o Git e o
GitHub, pois o software que você baixa no seu computador para rastrear
as alterações no seu código, se você estiver desenvolvendo um site, software ou aplicativo, o
pastas que você deseja rastrear são
chamadas de repositórios Git. O Github, por outro lado, é um site que você pode usar para hospedar essas poses ou
pastas
sem armas em seu site
para trabalhar com outros desenvolvedores
no mesmo projeto. Para essa classe, não
precisamos instalar o Git. Só precisamos de uma conta do GitHub.
3. Como fazer um repo no Github: Tudo bem, então, para hospedar seu site nas páginas do GitHub, você precisa ter uma conta no
GitHub.com. E para isso, você faz logon
no GitHub.com, insere seu endereço de e-mail e clica em Inscrever-se no GitHub, o que vou fazer
bem rápido aqui. E clique em Inscrever-se no GitHub. Tudo bem, então mostra uma animação
muito legal que diz: Bem-vindo ao levantar, vamos
começar a aventura. E seu e-mail. Ele pegou o e-mail
automaticamente. Então, vou clicar em Continuar. Agora precisamos criar
uma senha aqui. Então, vou criar uma
senha e clicar em Continuar. Agora diz digite um nome de usuário. Portanto, tenha em mente que qualquer
nome de usuário irrigado inserido aqui será o endereço do seu site do GitHub
Pages. O que quero dizer com isso
é, por exemplo, se eu escrever Skillshare GHP, tudo bem, o Skillshare GHP não
está disponível. Então, vou tentar
com o Skillshare GitHub. Tudo bem. Portanto, o skillshare
GitHub está disponível. Portanto, meu URL do GitHub Pages será Skillshare, GitHub, GitHub, io. Tudo bem, então qualquer
nome de usuário que você colocar aqui será o URL do seu GitHub
Pages, certo? A menos que você registre um
domínio.com ou qualquer outro domínio. Então, vou clicar
em Continuar aqui. E diz:
Você gostaria de receber atualizações
e anúncios de
produtos por
e-mail por y para
sim ou N para não. Então, vou digitar N
e clicar em Continuar. Agora diz que,
para verificar sua conta, você precisa resolver esse quebra-cabeça. Clique em Iniciar quebra-cabeça aqui. A galáxia espiral. Tudo bem, mais uma
vez, e acabamos. Então clique em Criar conta aqui. Tudo bem, então você está quase terminando. Enviamos um código de lançamento para fechar o Leap dot skillshare
em bro, Don't mail.com. Então eu vou para o meu macho de
prótons em marcas. Tudo bem, então
recebemos o e-mail do GitHub com o código de lançamento. E o código de lançamento é esse. Então, vou
copiar isso
daqui e colar aqui. Tudo bem, é isso aí. Só vou clicar em Ignorar personalização.
Sim, é isso aí. Tudo bem, então terminamos de criar
nossa conta no GitHub.com. Agora precisamos criar
um repositório onde faremos o upload dos arquivos do
nosso site. Então clique em Create
Repository aqui. Tudo bem, então, ao criar um repositório para hospedar seu
site nas páginas do GitHub, há algumas configurações que
você precisa ter em mente. A primeira e
mais importante coisa que você precisa ter em mente
aqui é o nome do repositório. Portanto, o nome do repositório
será seu nome de usuário.github.io. Então, meu nome de usuário que eu criei aqui é Skillshare get up, que está sendo exibido aqui. Então, eu vou
escrever a mesma coisa. Skillshare, github.github.io. Tudo bem, então isso está disponível e você precisa
escrever uma descrição aqui, que é novamente opcional. Mas vou
escrever Skillshare, obter um site de demonstração do curso de idades. E vou clicar em Criar Repositório e
garantir que este seja público, não privado, o que
também é importante ter em mente. Você pode criar um arquivo leia-me, mas isso é totalmente opcional. Agora só precisamos clicar
em Criar repositório aqui. Tudo bem, então criamos
com sucesso nosso repositório Skillshare,
github.github.io. E na próxima lição, faremos o
upload dos arquivos do site aqui. Tudo bem, então vejo você
no próximo.
4. Como fazer upload de arquivos de sites: Tudo bem, agora precisamos fazer o upload arquivos do
nosso site no GitHub.com. Então, eu criei este
pequeno site aqui, que vou
mostrar a vocês bem rápido. Portanto, este é apenas um site estático que diz que este site está hospedado no GitHub Pages
gratuitamente por toda a vida. Você vai
hospedar o tamanho da alça de identificação e obter ajuda para saber mais. Prepare este
curso de Skillshare por tiro nele. Tudo bem, um
pouco de marketing. E você também pode fazer chamadas APA
daqui assim. Portanto, essa é uma
chamada de API meteorológica que vou
fazer a partir daqui. Então, talvez você escreva o nome de uma cidade, por exemplo, San Jose, e clique em Pesquisar. E isso vai te mostrar
o tempo para San Jose. Tudo bem, então esta é uma chamada de API que estou fazendo
para abrir a API de previsão do tempo. E isso é baseado em um tema Bootstrap
gratuito que Deus firma iniciar
bootstrap.com, este site aqui mesmo. E esse é o tema
que eu usei. Então, eu editei alguns códigos
e fiz com que ficasse assim. E a API que
eu criei aqui. Então, vamos fazer o upload
deste site no GitHub. Então, vamos voltar ao GitHub e clicar em fazer upload de um arquivo
existente aqui. Agora precisamos arrastar os arquivos aqui
para adicioná-los ao seu repositório. Então, o que vamos fazer aqui é que vamos
fazer isso em tela cheia. E eu estou aqui. Esta é a pasta que
tem todos os arquivos do meu site. Então, vou selecionar
tudo e arrastá-lo para esse local no GitHub.com. Tudo bem, como você pode ver, os arquivos agora estão sendo enviados. Então, vou fazer
isso em tela cheia novamente. Tudo bem, então tudo
agora está carregado. Agora precisamos fazer
um comentário aqui. Você precisa escrever uma mensagem de
confirmação aqui. Então, vou
escrever a primeira versão. Tudo bem, e clique
em Commit Changes. Tudo bem, então o github agora está
precessando nossos arquivos. Isso pode levar alguns segundos. Sim, terminamos. Tudo bem, então todos os arquivos do nosso site foram carregados e estamos prontos para lançar nosso site
do GitHub Pages. Então, vejo você no próximo.
5. Como lançar o site github.io: Tudo bem, então todos os arquivos do
nosso site agora
estão carregados no GitHub. E estamos prontos para lançar
nosso site do GitHub Pages. Para fazer isso, precisamos clicar em Configurações
aqui e acessar as páginas. Tudo bem, diz que seu site foi publicado no Skillshare
GitHub, github dot IO. Então, se você clicar aqui, nosso site será lançado. Este site é hospedado no
GitHub gratuitamente, e você também pode fazer chamadas de
API aqui. E assim como
mostrei no meu site local, que era este San Jose. Então, vamos tentar outra
coisa aqui. Vamos experimentar Londres. E clique em pesquisar. Sim, funciona. Nossas chamadas de API estão funcionando
neste site do GitHub Pages. Como eu fiz anteriormente, que seu nome de
usuário.github.io será seu site do GitHub Pages
como você está vendo aqui é parentesco
github.github.io. Tudo bem, então deixe-me clicar
no botão Voltar aqui. Tudo bem, então
lançamos nosso site com sucesso. Isso é bom. Claro, github.github.io. E sempre
permanecerá assim. Então, se você tem um
site estático ou site de negócios, você pode hospedar nas páginas do GitHub, assim como eu mostrei aqui. Tudo bem, então, na próxima lição, vamos criar
um nome de domínio personalizado para o nosso site. Então, eu não quero que ele se pareça com Skillshare,
github.github.io. Então, usaremos um domínio personalizado para nosso site do GitHub Pages. Então isso está chegando
na próxima lição.
6. Configuração de domínio personalizado: Tudo bem, então
lançamos com sucesso nosso site
em Skillshare, github dot github dot IO. E agora estamos prontos para
configurar ou personalizar o domínio. Ok, então eu vou para
minha conta GoDaddy aqui, e eu comprei este
domínio ativo ponto do GitHub Pages para esta classe. E eu vou apenas copiar
esse nome de domínio daqui. E vou colar
aqui e clicar em Salvar. Tudo bem, agora podemos
ver que temos um erro que diz que a
verificação de DNS não foi bem-sucedida porque os registros DNS não diminuem dentro do nosso domínio. Então, o que vamos fazer aqui? Vamos diminuir
os registros DNS. Então, a primeira coisa que vamos
fazer é clicar em Saiba mais. Então, vou clicar com o botão direito do
mouse em Saiba mais e clicar em abrir
link em uma nova guia. E acesse esta página que diz Gerencie
seu domínio personalizado. Role até
aqui, que diz um registro. Agora copie um deles e
acesse sua conta do GoDaddy ou de
qualquer provedor de domínio que você tenha. Vou clicar
nesses três pontos aqui e clicar em gerenciar DNS. Portanto, o mesmo processo se
aplica a todos os provedores de domínio. Então você não precisa
se preocupar com isso. Basta ir para gerenciar o DNS dentro
do seu provedor de domínio. E agora precisamos
atualizar os registros aqui, que diz registros DNS. Então, vou
clicar em Adicionar. Escolha um tipo em que um nome
será. E o valor será o endereço IP que
copiei do site do GitHub Pages e
clique em Adicionar registro. Tudo bem, então o registro agora
está atualizado. Precisamos fazer
mais uma mudança aqui. Então você pode ver aqui que temos o registro CNAME ao vivo das páginas do
GitHub. Precisamos atualizar
o registro CNAME. Então, basta clicar em Editar
e esse valor
será o URL do seu site do GitHub
Pages, o que é crucial.
GitHub.Github.io. Então eu copiei isso e
vou colar aqui e clicar em Salvar. Portanto, o tipo será C name,
name is www values can share github.github.io e
basta clicar em Salvar. Tudo bem, então está atualizado, mas não
vai funcionar imediatamente. Demora entre
alguns minutos a 24 horas. Então, precisamos esperar um pouco para que essas mudanças aconteçam. Tudo bem, então vamos tentar
abrir nosso site, GitHub Pages dot live. E na
configuração espacial do GitHub para que você
possa ver que seu site está pronto para ser publicado no ponto live
do GitHub Pages. Tudo bem, então
vou clicar com o botão direito aqui e clicar em
abrir link em uma nova guia. Tudo bem, então nosso site está ativo
no GitHub Pages dot live. Quão legal é isso? Agora temos um domínio personalizado para nosso site
do GitHub Pages. E também podemos
acessar este site
do Skillshare github
dot github dot IO. Mas quando eu inseri
o URL do site, ele muda automaticamente
para obter uma vida básica. Tudo bem, então vamos tentar fazer algumas chamadas
de API neste site. Então, vou
clicar em chamadas APA e digitar o nome
da cidade para ver se
funciona ou não. Então eu fico em Calcutá. Então, vou escrever para
Calcutá e clicar em Pesquisar. Funciona pessoal. Então, como você pode ver,
tudo está funcionando perfeitamente e criamos com sucesso nosso site
do GitHub Pages e configuramos um domínio personalizado. Quão legal é isso? Agora, se estivéssemos presos em algum lugar, você sempre pode voltar
e assistir novamente a essa aula. Tudo bem, vejo
você na próxima lição, que será a
lição final deste curso.
7. Dicas, vantagens e desvantagens: Nesta lição,
compartilharei algumas dicas para gerenciar
melhor seu site
do GitHub Pages. Então, se você
deseja fazer alterações seu site no futuro, como você fará isso? Agora, existem algumas maneiras
de fazer isso. Você pode simplesmente ir
ao seu repositório do GitHub e clicar no arquivo
que deseja editar. Então, se eu quiser editar
esse arquivo index.html, vou clicar aqui. E isso me levará a esta página do editor de código
index.html. Agora, você pode
clicar nesse lápis. Eu posso editar este arquivo, ou você também pode pressionar E no
teclado, E para editar. Então, vou pressionar E. E isso me permitirá
editar esse arquivo. Então, por exemplo, se eu
voltar ao meu site e eu só quiser excluir isso
para toda a vida aqui. Então, vou voltar
ao meu editor de código aqui e procurar pela vida. Sim, aqui está. Eu só vou selecionar isso. Excluir. Sim, é isso aí. Então, eu vou apenas
comprometer as mudanças. Então, vou apenas escrever deleted for life e clicar
em Commit Changes. Tudo bem, então nosso
compromisso foi feito. Agora, se eu voltar ao meu site do GitHub Pages e clicar neste ícone de
atualização aqui. E ainda é o
mesmo porque não realiza as
mudanças instantaneamente. Demora um pouco para
que as mudanças aconteçam. Então, vamos esperar pouco e clicar
em Atualizar novamente. Tudo bem. Agora, como você pode ver,
as mudanças que são atualizadas e quase não
demorou um minuto. Agora, deixe-me voltar ao GitHub
e clicar no meu repositório. Você também pode fazer upload de
um arquivo atualizado aqui. Então, vou voltar para a minha pasta onde criei este site e editar
esse arquivo index.html. Então, vou
abrir com o Sublime Text. E tudo bem, então suba as páginas. Vou mudar
o título das páginas do GitHub para hospedar seu site
com uma grade de Vegas. E role para baixo aqui. E eu vou apenas
adicionar um smiley aqui. Sim, é isso aí. E
é só isso. Só vou clicar em
Salvar Comando S para o meu caso. E eu vou
sair da tela cheia. E eu posso simplesmente clicar
nele e arrastá-lo para aqui. Tudo bem. Então, talvez eu escreva a versão 2 e clique em Commit Changes. Tudo bem, agora, como você pode ver, ele está mostrando a versão 2
ao lado do nosso arquivo index.html. Agora, se eu voltar ao meu site do GitHub Pages
e clicar em Atualizar. Tudo bem, novamente, levará alguns minutos para
atualizar as mudanças. Então, vamos esperar um pouco
e clicar em Atualizar novamente. Vamos apertar refrescar. Tudo bem, nossas mudanças estão atualizadas. Agora, diz o título, hospede seu site
com GitHub Pages. E nosso smiley também é
adicionado aqui. Então é assim que você pode fazer alterações no seu site
do GitHub Pages. Agora, deixe-me voltar
ao meu repositório do GitHub. Agora, caso você
queira conferir as versões anteriores ou as alterações
que você fez até agora. Você pode simplesmente clicar neste ícone de relógio
que diz commits. Ele mostrará todos os
comentários anteriores que foram feitos. Posso simplesmente clicar neste
View come and doodles aqui. E ele me mostrará qual linha
foi excluída que tem um fundo avermelhado
e quais linhas foram adicionadas com esse fundo
verde. Está bem? Então, se você voltar, você também pode conferir os comentários anteriores
e ver as mudanças. Agora vamos falar sobre
algumas vantagens e desvantagens de usar as
páginas do GitHub para hospedar seu site. As vantagens são que é gratuito. Você não precisa gastar um centavo
para hospedar seu site aqui. Você pode configurar seu domínio
personalizado para que o URL do
seu site pareça
profissional e organizado. Ele fornece um certificado
SSL gratuito. É rápido como um raio. Seu site carrega em
um piscar de olhos. Fazer alterações no seu
site é muito fácil, como eu já mostrei aqui. E você também pode fazer chamadas APA, mas só pode hospedar
sites estáticos no GitHub Pages.
8. Projeto e conclusão de cursos: Espero que gostem da aula. Agora é hora de você
hospedar seu próprio site no GitHub Pages e compartilhar
capturas de tela com a turma. Estou ansioso
para
verificá-los se você estiver enfrentando
algum desafio, direto para mim aqui na seção de
discussão sobre Skillshare. E eu vou te ajudar. Ou você também pode
voltar e assistir a esta lição novamente aqui
no skillshare. Espero que tenham gostado da aula. Confira meus outros
cursos aqui no Skillshare. E muito obrigado
por fazer essa aula.
Shatadip Majumder, Productivity Coach
