image

Access unlimited bootcamps and 650+ courses forever

60
%OFF
Article image
Vagner Bellacosa
Vagner Bellacosa17/07/2021 15:38
Share

Netflix Clone: Como fazer um Deploy do seu WebSite em 3 passos . [Tutorial]

  • #Programação para Internet
  • #GitHub
  • #HTML

Como fazer um Deploy do seu WebSite

image

Salve padawan, tenho visto no Fórum que inúmeros colegas têm concluído o Projeto Clone do Netflix, baseado no fabuloso trabalho do Felipe Aguiar, para nos galerinha da DIO, o FELIPAO, que nos legou um super trabalho em HTML CSS e JavaScript.

image

Mas tenho notado que a grande maioria utiliza o GITHUB, porem desconhecem uma ferramenta única e maravilhosa, oculta dentro das diversas configurações do GITHub, permitindo subir sua página html para a WEB com URL própria conforme o exemplo abaixo:

Meu site: Lusoflix - https://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/

GITHub WebServer

image

O WebServer do GITHub hospeda sites estáticos e existe uma serie de requisitos a serem observados, citarei alguns, mas recomendo a leitura das diretrizes de comunidade.

  • Nao permitido a sites comerciais
  • proibida a venda ou sublocação do site a terceiros
  • vedado a prostituição, pornografia e sites de racismo ou ódio
  • nao divulgue drogas e atos ilícitos

A url gerada ficara no seguinte formato <nome do >.github.io/<nome do >

🚀 Precisa de ajuda? Veja dicas para ser salvo, use e abuse do GitHub.

https://web.dio.me/articles/precisa-de-ajuda-veja-dicas-para-ser-salvo-use-e-abuse-do-github-H6JWKH

🚀 GITHub: O que colocar? Como criar um repositório profissional?

https://web.dio.me/articles/github-o-que-colocar-como-criar-um-repositorio-profissional

Html Tree

Recapitulando um pouco, lembra-se da estrutura da pagina?

Nosso projecto tem a seguinte árvore de diretórios, onde armazenamos cada arquivo em seu respectivo gaveta.

image

INDEX.HTML

  • Bin - usado para debugar
  • OBJ - debug
  • img - pasta com todas as imagens do site
  • js - pasta do Javascript
  • Style - pasta om os arquivos CSS

Lembre-se jovem padawan, código limpo, cada arquivo em seu lugar. Em TI organização e tudo, o maior ladrão de tempo é o retrabalho. Por isso procure fazer o certo na primeira vez.

🚀 Os misterios do CLI, computaçao no seculo XXI

https://web.dio.me/articles/os-misterios-da-cli-computacao-no-seculo-xxi

🚀 Aprenda MS-DOS e seus scripts bat no Windows

https://web.dio.me/articles/aprenda-ms-dos-e-seus-scripts-bat-no-windows

Agora é a hora do show começar

Com nossa pagina terminada, testada e funcional, vamos preparar o deploy na WEB.

image

Estou falando de um servidor Web com domínio próprio para publicar seu Website na Internet e poder compartilhar com a família toda, via Twitter, Facebook, Linkedin e Whatsapps. Tudo de graça, só necessitando de algumas linhas adicionais de código HTML.

image Como assim tiozão?

Calma padawan, vou ensinar passo a passo, este artigo foi dividido em 3 partes visando facilitar o trabalho, a primeiro ensino a configurar o repositório do GitHub para transforma-lo numa página WEB, depois ensino a truques que funcional no Windows, mas não no Servidor WEB e por fim apresento os Metatags e seu superpoder. Preparados para colocarem mão na massa?

image

1° Passo: No repositório do GITHub

Utilizando o projeto Clone do NetFlix, abra a pagina do repositório no GITHub..

image

Habilitando o GitHub Pages

No repositório clicamos no botão “Settings” no menu superior da tela. A partir disso, seremos redirecionados para a tela de configurações do repositório que, navegando dentre inúmeras configurações, encontrara uma seção chamada “GitHub Pages”, veja o exemplo abaixo:

imageNossa missão começa nos Settings

Procure a opçao GitHub Pages igual ao print abaixo:

image

Ao clicar no "Check it Out Here!", sera aberta a seguinte pagina:

image

Nas imagens ensino passo a passo para habilitar o servidor web, lembrando de trocar o user-id na url :)

https://github.com/VagnerBellacosa/002_WebDeveloper_ReplicaNetflix/settings/pages

image Dica importante

Em todos os diretórios deveram conter um arquivo “INDEX.HTML” para auxiliar o servidor a caminhar pela estrutura de arquivos e bloquear o acesso a arquivos importantes do seu projeto.

image Quebrando o galho e evitando dores de cabeça.

Os servidores web são case sensitive, por isso cuidado ao nomear os arquivos, pois caso tenha maiúsculas e minúsculas, o link, a imagem e ou arquivo apresentaram erro 404, pois o servidor não encontrar o arquivo. Vire e mexe tenho esse problema e sou obrigado a usar o Google para localizar o erro.

image Aproveitando a oportunidade, veja o about

Antes de sairmos do repositório no GitHub, que tal inserirmos umas hashtags e colocar um informativo sobre o projeto, auxiliando o visitante a situar-se em seu projeto. Voltemos ao canto superior direito do repositorio.

image

Clique nos settings e veja

image

Podemos editar toda essa informaçao assim:

image

Seu projeto ficara com um aspecto profissional e bem cuidado ao olhar dos visitants.

image

2° Passo: Metatags

Elementos meta são marcas usadas em documentos HTML e XHTML para fornecer metadados estruturados sobre uma pagina web. Sao tags localizadas no Header do HTML, que possuem diretrizes e comandos internos relativos a performance, exibiçao, localizaçoa e cadastro da pagina.

image

Uma ferramenta muito importante que auxilia e deixa seu site com aparência profissional estou falando dos Metatags, tags especiais usadas no header do HTML, que auxiliam o navegador a executar funções adicionais, num próximo artigo ensinarei todos os segredos. 

Por hora apresentarei o Titulo e o Ícone, abaixo temos , um enxerto de código, o Title e Lnk, todos conhecem de outros projetos, agora a grande novidade é poder usar para colocar um ícone no topo da página conforme o exemplo

Estes dois Metatags tem 2 funções especificas primeiro informar na aba do navegador o nome do site e segundo ao adicionar atalhos no navegador, ele ira armazenar o nome e o ícone.

<head>
<!-- Apresentaçao -->
<title>LUSOFLIX CLONE</title>
<link rel="shortcut icon" href="img/icoportugal.ico" type="image/x-icon">
</head>

image

3° Passo: SEO, Metatags avançado e OpenGraph 

Anteriormente comentei sobre duas tag dos metadados, porém existem mais e poderosas tags que vamos utilizar, quem teve a oportunidade de trabalhar com SEO, pera tiozão, novo conceito? 

image O que é SEO?

Mais uma sopa de letrinhas, em linhas gerais, SEO e um acrônimo para otimização dos motores de busca (Search Engine Optimization), ou seja, é o processo de otimização de sites para que tenham uma excelente classificação nos resultados dos motores de busca através de consultas orgânicas (não pagas).

image Como funciona?

Ao utilizarmos as tags Generator, Author, Keywords, Description estamos sinalizando ao robot de qualquer motor de busca, muitos detalhes do nosso site e que auxiliaram na classificação e otimização dentro do Banco de Dados da Engine.

Uau, quer dizer que ao usar esse comandos no header da minha pagina html, minha pagina esta melhor identificada e com maior probabilidade de aparecer em pesquisa no Google e afins.

Mas o que elas fazem afinal?

  • Generator: indica o software onde a página foi editada
  • Author: indica quem foi a pessoa que editou e construiu a pagina 
  • Keywords: palavras chaves que identificam o assunto da página, semelhante as hashtags
  • Description: Breve resumo do conteúdo da pagina

Exemplo:

<head>
<!-- SEO -->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Vagner Bellacosa">
<meta name="Keywords" content="Bootcamp HtmL Recriando a Pagina do Netflix Portugal e turismo no Youtube">
<meta name="Description" content="Aplicação dos comandos html css javascript aplicados em uma homenagem a Portugal e suas belezas naturais históricas e culturais">
</head>

OG Open Graph

Hoje irei apresentar de linhas gerais, visando aplica-lo em nosso projeto, como processa, num próximo artigo irei explorar as potencialidades destas tags.

O Que são tags OPenGraph? 

No passado o Facebook encontrou problemas ao compartilhar links externos em suas páginas, a informação não batia bota com perdigota, por isso os sábios engenheiros criaram um padrão de processamento para sites externos.

Esse padrão foi a criação da metalinguagem OG ou Open Graph, cuja função principal é criar um pequeno preview do website para ser compartilhado dentro do History do Facebook, a ideia foi tao bem aceite, que outras redes sociais adoratam a ideia também, veja os exemplos abaixo:

Twitter

image

https://twitter.com/BellacosaVagner/status/1416432747263008772

🚀 Sem vergonha: O Twitter para padawans.

https://web.dio.me/articles/sem-vergonha-o-twitter-para-padawans

Linkedin

image

https://www.linkedin.com/feed/update/urn:li:activity:6822200096940138496/

🚀 Desmitificando o LINKEDIN.

https://web.dio.me/articles/desmitificando-o-linkedin

image OG Metatags

Importante notar, que essas tags são parâmetros da metatag meta property. Em nosso projeto usei a seguintes tags:

  • Og:locale – indica o idioma da pagina
  • Og:url – indica a url do projeto
  • Og:tittle – titulo da pagina
  • Og:site_name – nome do site
  • Og-description – a descrição do site
  • Og:image – a imagem thumbnails do site com todos os parâmetros necessários
  • Og:article – define o tipo da pagina como artigo com todos os seus detalhes

Exemplo:

<head>
<!-- Redes Sociais -->
<meta property="og:locale" content="pt-br">
<meta property="og:url" content="https://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/">
<meta property="og:title" content="LusoFlix - Viagens a Portugal">
<meta property="og:site_name" content="LusoFlix">
<meta property="og:description" content="Em tempos de isolamento social, veja as belezas de Portugal em foto-videos no Youtube. Tantas belezas, tantos tesouros, recomendo um bom calice do Porto.">
<meta property="og:image" content="https://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/img/LusoFlixCapa.png">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="800"> 
<meta property="og:image:height" content="600"> 
<meta property="og:type" content="article">
<meta property="article:author" content="Vagner Bellacosa">
<meta property="article:section" content="HTML/CSS/JS">
<meta property="article:tag" content="Bootcamp HTML Web Developer Digital Innovation One">
<meta property="article:published_time" content="202105">
<head>

image Espero ter ajudado, se gostou, deixe um comentário e vote no menu. :) o tiozao gosta de biscoitos

Saiba mais

image Navegue sem erros nos directórios do seu projecto de Website, acesse links e arquivos internos sem erro:

https://web.digitalinnovation.one/topics/html-tricks-como-navegar-em-diretorios 

image Saiba como usar o arquivo robots.txt e otimizar o acesso ao seu site, ajudando os bots spider a navegaçao, catalogarem, indexarem e ranquearem sua pagina.

https://web.digitalinnovation.one/articles/saiba-como-indexar-seu-website-com-uso-de-robotstxt-tutorial

Conclusão

Hoje aprendemos a subir o site html para um servidor do GitHUB, habilitando o serviço de domínio e colocamos no ar nosso site, na segunda etapa aprendendo alguns truques para melhorar a apresentação na aba do navegador e dentro da lista dos favoritos e finalizamos explorando técnicas SEO e uma pequena visão do mundo OG e sua aplicação nas redes sociais.

Ficou um pouco longo e cheio de novos conceitos e informações, espero ter ajudado e qualquer duvida chama aqui ou no discord.

Espero ter ajudado ate o próximo artigo.

image Referência Bibliográfica

Twitter - FAQ dicas e truques

https://help.twitter.com/pt/using-twitter/communities

WIKIPEDIA - A Enciclopédia Livre, faça parte, ajude actualizando ou criando verbetes http://www.wikipedia.org

Google Books um repositório com milhões de livros digitalizados https://books.google.com/

Internet Archive, tudo aquilo que um dia foi publicado veio parar aqui. https://archive.org/

Biblioteca de ícones https://www.flaticon.com/

image

image Um momento de diversão e jabá, conheça Sagres e sua fortaleza, num promontório defensivo de onde podemos avistar o Oceano Atlântico em toda a sua extensão, conheça este fabuloso parque ecológico com um forte, muralhas defensivas, canhões do século XV, capela, segundo a lenda o Infante Dom Henrique aqui montou sua escola náutica, ocupado desde os celtibérico, lembrando que num passado não tão recente assim, Portugal foi o pais europeu que estava em todos os continentes e navegavam pelos 7 mares, veja uma das viagens do Tiozão, ajude o canal :)

https://www.youtube.com/watch?v=FzANYaUBRAs

Bom curso a todos.

image https://www.linkedin.com/in/vagnerbellacosa/

image https://github.com/VagnerBellacosa

Pode me dar uma ajudinha no YouTube?

image https://www.youtube.com/user/vagnerbellacosa

Share
Comments (7)
Dolisdeis Veloso
Dolisdeis Veloso - 17/07/2021 16:02

Boa tarde! Excelente conteúdo pra nós iniciantes, obrigado.




MF

Melquiedes Franco - 20/12/2022 15:44

Imagino que organizar este custou algumas horas de trabalho, meus parabéns!!!! Me será muito útil.

Vagner Bellacosa
Vagner Bellacosa - 11/11/2021 10:44

Obrigado Diogo e amigos... juntos somos mais fortes... como estao os cursos? Qual esta fazendo agora?

Bruno Ferreira
Bruno Ferreira - 19/07/2021 12:40

Bom conteúdo! Obrigado

Vagner Bellacosa
Vagner Bellacosa - 18/07/2021 15:34

Monara, agradeço pelo carinho e feedback

Monara Calado
Monara Calado - 18/07/2021 03:43

Conteúdo sensacional! Muito obrigada pelo compartilhamento, Mestre.

Vagner Bellacosa
Vagner Bellacosa - 17/07/2021 17:43

Compartilhando o conhecimento para juntos irmos mais longe.