Transcrições
1. Introdução ao curso: Olá a todos, e
bem-vindos ao lançamento do
seu site com o CloudFlare Meu nome é Anor Pretoris e eu serei instrutora deste curso Então, só para dar um breve
resumo do que faremos. Então, basicamente, vamos,
como mencionei no curso, lançar nosso site
com o CloudFlare Mas em termos de
tecnologias e coisas do gênero, garantiremos que
temos
um projeto pronto para começar
e que esse projeto será
então carregado em um e que esse projeto será
então carregado repositório do Github e
sincronizado via Como você pode ver aqui, eu tenho um
aplicativo muito simples que tem, como você pode ver, um arquivo de
estilo dot css, um arquivo script dot js e
um arquivo HTML de ponto de índice, e todos eles se formam juntos como parte do meu aplicativo de
amostra O ideal é que você já
tenha um projeto que
queira aplicar e implantar. Agora, basicamente, depois de definir esse projeto, você o
sincronizará por meio do desktop do
GitHub para poder enviá-lo desktop do
GitHub para poder ao seu repositório do
GitHub Depois disso
, você criará uma conta do
CloudFlare Pages, na qual prosseguirá e garantirá que ela
seja construída e, em seguida
, Depois disso, você
poderá acessá-lo por meio de um nome de domínio gerado
automaticamente, que é gratuito,
que você poderá visitar para acessar seu site. Como você pode ver aqui, eu tenho um exemplo de site
aqui com antecedência Então, é basicamente isso
que você aprenderá
neste curso, e as páginas do CloudFlare são conhecidas por serem
excepcionalmente rápidas. Portanto, será um processo muito
fácil se você quiser apenas pegar
algo no peito e começar
a trabalhar rapidamente. Então é nisso que
vamos nos
concentrar neste curso, e espero ver você
neste curso. Adeus
2. Configure uma conta no GitHub.: Olá a todos, e
bem-vindos à próxima atividade prática, que será
focada em criar
uma conta no Github e garantir que tudo
esteja configurado corretamente A primeira coisa que você
quer fazer é entrar no Github em seu mecanismo de pesquisa Aqui estou no Google e
vou dizer pesquisa no Google. Então você quer selecionar este
link aqui que diz Github. OK. Agora, quando estivermos
na página do GitHub, queremos clicar em Inscrever-se no canto superior
direito E então, como você pode ver,
podemos criar nossa conta gratuita, e podemos fazer isso
inscrevendo-se Github, continuando
com uma conta do Google,
com uma conta da Apple, ou você pode digitar manualmente seu e-mail, sua senha, seu nome de
usuário, sua região E, claro, você pode verificar as seguintes opções
aqui antes de dizer
crie sua conta. Então, o que eu recomendo que você faça agora é ir em frente e fazer exatamente isso. Então, decida como você deseja
se inscrever na sua
conta do Github e se inscrever. Talvez seja necessário
prosseguir e concluir um quebra-cabeça de verificação e , em seguida, verificar seu
e-mail também. Portanto, existem algumas maneiras pelas quais você pode precisar
fazer isso. Mas depois de fazer isso, no final,
você
será redirecionado para a página do painel do
Github, e é aí que nos
reconectaremos Enquanto isso,
vá em frente e
configure sua
conta do Github adequadamente, como estou mostrando na minha tela Tudo bem, então bem-vindo de volta. Então, parabéns se você
chegou a essa etapa aqui. Então, como você pode ver agora, agora
estamos na etapa que estamos
em nosso painel do
Github Então, se você ver esta
página aqui, muito bem, você
configurou sua conta do GitHub Ele foi criado e
está totalmente pronto para ser usado. E vamos
começar na próxima lição.
3. Crie um repositório no GitHub: Tudo bem. Vamos continuar agora e criar nosso primeiro repositório
Github Você provavelmente está se perguntando
o que é um repositório. Um repositório Github
é essencialmente um local centralizado para
armazenar o código-fonte do nosso projeto Isso é exatamente o que
vamos fazer agora. Vamos criar um
repositório para fazer exatamente isso. Podemos dizer criar repositório. Como você pode ver lá, ele
mostrará o proprietário, então esse será nosso
nome de usuário
associado à nossa conta Gu, e queremos dar o nome do
nosso repositório Vou
chamá-lo de repouso de amostra. Você pode dar a ele qualquer
nome que desejar e qualquer descrição
que desejar. Então, aqui, eu vou
dizer site, lançamento. Aplicativo. Portanto, você pode fornecer
apenas uma descrição. Agora, sob a visibilidade, apenas para garantir que
a implantação ocorra sem problemas na primeira vez, vamos configurá-la como pública Às vezes,
talvez seja necessário integrar mais permissões
se decidir defini-las como privadas, mas não entraremos em muitos detalhes neste curso. Em seguida, você também pode adicionar
um arquivo leia-me,
portanto, certifique-se de ativá-lo, e isso basicamente
permitirá que você escreva uma descrição mais longa
sobre o projeto S aqui. Quando estiver satisfeito
com tudo, você pode dizer criar repositório. E isso criará nosso
repositório desse jeito, e podemos ver
toda a estrutura aqui, então ela estará na ramificação
principal aqui Podemos ver no canto
superior esquerdo nosso nome associado ao repositório
associado que acabamos criar e a visibilidade
em público. Tudo bem. Então é assim que você pode criar
seu repositório Github.
4. Configuração do GitHub Desktop: Certo. Então, a próxima coisa
que queremos fazer é basicamente configurar o desktop do
Github, que é essencialmente
uma interface que
nos permitirá sincronizar nosso código-fonte de nossa máquina local com
nosso repositório online do Github Então, pense nisso como uma ponte entre
nosso código-fonte local e um
ambiente mais online. Tudo bem Então, o que você quer fazer em
seu mecanismo de pesquisa é digitar download do GitHub para desktop,
digamos, Pesquisa do Google E aqui veremos
uma opção que diz baixar o GitHub
Desktop. Para maior clareza, você pode investigar a URL aqui que diz
desktop.github.com baixar o GitHub
Desktop. Para maior clareza,
você pode investigar a URL
aqui que diz
desktop.github.com, forward slash download fordslash. Agora, estou em um dispositivo Windows, então vou dizer
download para Windows. No entanto, se você estiver no
Mac, se você rolar para baixo, ele pode aparecer aqui automaticamente ou será
exibido aqui embaixo, Mac para instalá-lo no Macaws Você pode baixar o
Macaw aqui embaixo. Então você tem essa
opção em jogo aqui. Tudo bem Então, o que podemos fazer
agora é baixar para Windows, e isso vai baixar o instalador de configuração,
você poderia dizer. Então, vai levar
alguns minutos aqui. Então, vamos esperar por isso. E depois de baixado, podemos prosseguir e
instalá-lo adequadamente. Então, vamos esperar por isso. E aí está. Então, aqui está o EXC de configuração do
Github Desktop para que
possamos selecionar E então ele vai
subir em uma cerca viva e instalá-lo em nossa máquina Então, leva alguns instantes, para que possamos ver que está carregando no
momento, e só queremos
esperar que isso seja configurado. Ok. E aqui está. Aqui está a
tela de animação aqui. E você pode ver
aqui embaixo que ele está sendo
instalado no momento e podemos ver
a barra de progresso do Mini. Então, vamos esperar que isso seja instalado em nossa máquina, e então podemos partir daí.
Tudo bem, então bem-vindo de volta Então, agora podemos ver que
ele foi instalado, e vamos ver isso, você poderia dizer interface aqui
para começar. Muito bem, você
instalou com sucesso o Github desktop Agora, às vezes também adiciona um atalho à
sua área de trabalho Então, se você fosse
minimizar tudo, você pode ver que também temos o desktop
GitHub aqui Então, vamos
chegar a esse ponto.
5. Sincronize nosso código-fonte: Tudo bem, então a próxima
coisa que queremos
fazer é sincronizar
nosso projeto com o fazer é sincronizar GitHub Desktop
e também com nosso repositório do GitHub e também Mas a primeira coisa que você quer
fazer é conectar o
GitHub Desktop ao próprio GitHub. Então, vamos fazer exatamente isso. Então, podemos ir para o
arquivo e depois para as opções. Depois disso, você quer
dizer faça login no github.com, certifique-se de selecionar Assim, você pode selecionar essa opção. Em seguida, você deseja fazer
login com seu navegador. Vá em frente e diga continuar. E então ele vai
verificar a sessão aqui. Portanto, atualmente estamos conectados
por meio de nossa conta do GitHub,
como você pode ver aqui Então, queremos
continuar verificando essa sessão. Em seguida, queremos autorizar o GitHub Desktop a acessar
nossos repositórios,
dados, fluxo de trabalho, etc., então você deseja Então você pode dizer
abra o desktop do GitHub, e aí podemos ver
que agora ele está vinculado
ao nosso repositório aqui
chamado repositório de amostra Portanto, certifique-se de ter ido
em frente e feito exatamente isso. Tudo bem. Agora, a próxima
coisa que queremos fazer é clonar um repositório
da Internet Atualmente, vamos
dar uma olhada no espaço de trabalho depois de
fechar tudo aqui Atualmente, tenho meu projeto na minha área de trabalho em um arquivo conhecido como meu projeto e contém um
índice simples em arquivos HML, CSS e JavaScript. Essencialmente, o que eu quero
fazer é seguir em frente e garantir que eles enviados para este repositório Agora, podemos
clonar esse repositório em nosso desktop
e, na primeira vez, podemos simplesmente arrastar nossos arquivos
para essa pasta aqui
e, a partir desse ponto, trabalharemos
nesse arquivo singular,
que ironicamente tem o
mesmo nome do Isso vai fazer sentido
quando eu demonstrar isso. Então, para fazer isso, queremos ir em
frente e abrir o desktop do GitHub. Então, queremos dizer clonar um
repositório da Internet. Queremos selecionar nosso
repositório aqui e dizer Clone. OK. Então, seguimos em frente
e clonamos nosso repositório Então, agora, se quisermos minimizar, podemos ver que o
temos aqui em
nosso desktop, agora conhecido
como repositório de amostra de dash Então, o que eu quero
fazer é visualizar isso no código do Visual Studio Então, vou clicar
no ícone superior esquerdo, ir para Arquivo, Abrir pasta. Desktop, e vou
selecionar Sample repo. E, como podemos ver, por padrão, ele terá
um arquivo leia-me, e esse é o arquivo que
criamos por padrão. Então, isso é uma confirmação aqui. Agora, a próxima coisa
que queremos fazer é mover todos os nossos arquivos. Então, idealmente, você já deve ter um projeto com o qual deseja trabalhar. Assim, você pode abrir a
pasta do projeto com a qual está trabalhando. Então, aqui estou abrindo meu projeto. E aqui eu tenho o
índice, o script e o estilo dos meus arquivos. Vou destacar isso
e movê-lo para o repositório de amostras. Só temos que fazer isso uma vez. E agora vamos
trabalhar permanentemente com o Sample Repo
agora porque ele está conectado e sincronizado com o
GitHub desktop e o Github Só agora precisamos realmente fazer o
upload do nosso código-fonte. Mas agora, se
formos ao GitHub Desktop, podemos ver todos
esses arquivos no lugar script HTML de índice JS e o
CSS de inicialização agora estão todos nessa específica, como podemos ver pasta
específica, como podemos ver, e ela está sendo selecionada pelo desktop do GitHub,
essa interface Podemos ver se abrirmos o código do
Visual Studio
, esses
arquivos estão no lugar agora. Perfeito. Agora, o que queremos fazer é apenas fazer
a sincronização agora Então, queremos
enviar todos esses
arquivos aqui e enviá-los nosso repositório Github para
que possam ser acessados
via Então, aqui precisamos
dar um nome para um resumo. Então, aqui vou
dizer projeto, upload. E você pode adicionar uma
descrição aqui e enviar
seus três arquivos para a ramificação principal. E, claro, isso também se
correlaciona com a ramificação principal do
nosso repositório aqui Vai aparecer aqui. E então você
quer dizer push origin, então isso vai empurrar todos os nossos arquivos para nossa ramificação principal, que aparecerá em nosso repositório conhecido
como repositório de amostra E se fôssemos atualizar
nosso repositório aqui, aqui podemos ver que temos
tudo pronto Temos todos os nossos arquivos, então agora estamos totalmente sincronizados
6. Configure uma conta do Cloudflare Pages e lance seu site: Agora, a próxima coisa que
queremos fazer é configurar nossa conta CloudFlare e basicamente,
lançar Primeiro de tudo, você quer ir
ao Google e
digitar as páginas do CloudFlare Então você pode dizer Pesquisa do Google e aqui você deseja
selecionar as páginas do CloudFlare OK. E a próxima coisa
que você quer fazer é se inscrever. E então você pode decidir, novamente, como deseja se
inscrever na sua conta. Se você quiser acessar
o Google, a Apple, o Github ou se quiser inserir
seu e-mail e senha diretamente como estão, a decisão
é sua Então, para maior clareza, vou te dizer
o que vou fazer para que
você possa ver aproximadamente o
mesmo tipo de marcação no final depois de verificar seu e-mail, por exemplo, vou
inserir
manualmente meu e-mail e minha senha e verificar se sou humano e vou me inscrever porque quero mostrar como você pode configurar o Github Em vez de fazer isso
da maneira mais fácil aqui, quero mostrar
o formato
padrão de como
fazer isso. Então esse é o
raciocínio por trás disso. Então, vou pegar o
e-mail e passar por Drew. Eu recomendo que você faça o mesmo, realize a verificação
e se inscreva. Em seguida, você precisaria acessar seu e-mail e também
verificar seu e-mail Clique em um link para verificar e ele
o levará à página que
mostrarei depois
que tudo isso for concluído. Então, pela primeira vez, eu recomendo
fazer isso manualmente e, quando estiver
mais confortável,
você pode seguir diretamente
a rota do Github, mas essa é a razão pela qual
vou fazer isso por mais tempo Então, vamos
começar. Tudo bem, bem-vindo de volta. Acredito
que depois de clicar
no botão
ou link de verificação em seu e-mail, você será redirecionado eventualmente para uma página parecida com esta Agora, isso é o que eu quis dizer anteriormente
ao fazer a maneira manual. Então, aqui podemos dizer que
conecte o Github, e isso vai
continuar e solicitar que
instalemos um CloudFlare autorizado os trabalhadores
e as páginas,
e você pode decidir se o deseja para todos os repositórios ou
apenas selecionar repositórios e
selecioná-lo apenas selecionar repositórios , os trabalhadores
e as páginas,
e você pode decidir se o deseja para todos os repositórios ou
apenas selecionar repositórios e
selecioná-lo.
Então,
realmente depende de você. Então, aqui, eu vou apenas
dizer selecione o repositório. Então eu vou dizer
instalar e autorizar. Então, isso só vai
levar um momento. Aqui, ele vai aparecer em
verde de vez em quando e depois podemos continuar
com o Github agora Então, podemos ver que ele
selecionou nosso repositório aqui, é
claro, basta clicar
nele e dizer a seguir Depois, podemos simplesmente rolar para baixo e ver
tudo como está sendo dito aqui. O nome do projeto,
o repositório. Além disso, você pode adicionar comandos de
compilação e ajustar aqui, mas vamos
deixar tudo
no padrão e dizer implantar. Isso é essencialmente para
iniciar nosso aplicativo, você só quer seguir em frente e talvez precise adicionar algo
aqui. Vamos apenas verificar. Sim, isso parece bom. Então, você só quer seguir em frente e implantar seu aplicativo aqui. Portanto, pode estar nos levando a ajustar o nome do projeto
se não disser implantar, então vou
dizer aqui aplicativo Em seguida, role para baixo.
Agora, caso, como podemos ver aqui, o que
é uma boa lição a opção ou botão de implantação
aqui não responda, o que você pode fazer é apenas
atualizar sua página aqui OK. Você pode simplesmente ir em frente e ver como se conectar
com o Github novamente. Basta selecionar seu repositório, ir para a próxima etapa e deixar tudo como está e ver a implantação Às vezes, esse bug ocorre
e é bom que o
estejamos vendo pela primeira vez aqui. Isso é apenas algo que eu quero mencionar que pode ocorrer. Como você pode ver agora
, estamos apenas configurando nosso repositório e isso só
vai levar alguns minutos Tenha isso em
mente se isso acontecer. Mas, infelizmente, no meu caso, aconteceu que
não correspondia a mim. Aqui podemos ver
que tudo foi inicializado no ambiente de
construção. Parando e nosso aplicativo está prestes a
ser implantado Tudo o que precisamos fazer é
esperar alguns instantes. Acho que levará
talvez 20 segundos. Se não pausar o
vídeo, podemos ir até uma cerca e
esperar que seja concluído, mas não deve
demorar 20 segundos Pronto, a construção
foi concluída. Nosso aplicativo foi implantado. Agora, o que podemos fazer é
acessar os domínios aqui. Você pode clicar com o botão direito do mouse e
abri-lo em um novo bate-papo e basicamente, o CloudFlare nos
fornecerá Você poderia dizer como posso dizer
um nome de domínio padrão aqui? Como você pode ver, é
conhecido como URL do trabalhador. É público e você
pode realmente visitá-lo. Então, se eu clicar com o botão direito
do mouse e abrir o link em uma nova
guia, aqui está. Aqui está meu portfólio
em funcionamento
e acessível com um nome de domínio padrão
que foi atribuído a mim. Então é isso, para que você possa criar uma conta CloudFlare
e como você pode essencialmente implantar
seu aplicativo partir de um Tudo bem, pessoal, então é
isso para esta lição.
7. Gerenciando atualizações do código-fonte: Tudo bem. Agora, na
próxima lição, vamos nos concentrar em gerenciar
nossa atualização de código-fonte. Então, digamos que
há uma mudança que queremos
fazer em nosso aplicativo e queremos
reimplantar tudo Então, tudo será integrado
automaticamente
agora no Cloudflare Então você realmente não
precisa fazer nada. Vai ser
automatizado. Agora, eu só vou
te mostrar um teste aqui. Então, digamos que eu ajuste isso, basta dizer olá, eu sou
Ono como exemplo. Então, vou ver
meu código-fonte aqui, e vou fazer
essa alteração mínima aqui, e vou
dizer olá, eu sou ono. Assim mesmo. E podemos ver que
foi modificado. Então, se olharmos em nosso
diretório modificado, se formos para o GitHub Desktop,
ele vai pegar isso Então, o vermelho aqui, é claro, era o código antigo e o verde
é o código substituto. Então, ele vai dizer
atualizar o índice para HML. Então, às vezes, o título aqui
é dinâmico e atualizado. Então, vamos confirmar isso e
enviar esse código-fonte agora. OK. E se voltarmos
ao nosso repositório, basta dizer dispensar isso
e veremos que ele fará esse
ajuste aqui,
atualizando o ponto de índice
HML para o Cloud FIRE atualizando o ponto de índice
HML para Então, se pudermos ver aqui, podemos
clicar em Construção em andamento, e podemos ver que
isso se refere a Atualizar HTML com pontos de índice, que está sendo
enviado agora e será implantado a
qualquer momento, e então
poderemos atualizar nosso aplicativo e ver essa alteração
que foi Então, se eu simplesmente rolar até aqui, indexar em HTML, essa
compilação específica foi concluída, vamos atualizar esta E podemos ver que diz
vazio, eu sou uma honra. Que você pode gerenciar qualquer
atualização de código em seu aplicativo. Como você pode ver,
é muito simples em todo o seu aplicativo, como podemos ver aqui
com o Get up Desktop, seu repositório e o CloudFller Então é isso para esta lição. E se você
atualizasse seu repositório, agora
podemos ver
que essa atualização específica
foi um sucesso
8. Creating your own project: Olá a todos, bem-vindos
à próxima lição, que será focada na criação de seu próprio projeto. Certo, crie seu próprio projeto. Agora que você tem todas essas novas habilidades
que adquiriu, agora
é hora de
colocar tudo isso uso e criar
seu próprio projeto. O que você pode fazer agora
é acessar
a seção de projetos e
recursos deste curso para obter
mais informações sobre como seguir em frente e garantir
o acompanhamento do projeto e, em seguida como você pode prosseguir
e compartilhá-lo para que eu possa dar uma olhada
e deixar meu feedback. Certo, pessoal. É
isso para esta lição.
9. Obrigada!: Oi, pessoal. E apenas
uma nota final minha, que é apenas obrigado por decidir
fazer este curso Eu realmente espero que tenha ajudado você a obter algum conhecimento perspicaz. Então, muito obrigado novamente, e é profundamente
apreciado que você tenha decidido se inscrever
comigo nesta jornada Outra coisa que eu
gostaria de mencionar é , por favor, considere deixar
um comentário para esta aula. Seria muito apreciado. Você não precisa se não
quiser,
mas é sempre útil, no meu caso, tentar entender o
feedback que está sendo dado a mim e como melhorar
melhor minhas aulas. Obrigado novamente e boa
sorte em sua jornada.
Arno Pretorius, IT Freelancer
