0

Netflix Clone: Como fazer um Deploy do seu WebSite

Vagner Bellacosa
Vagner Bellacosa

Como fazer um Deploy do seu WebSite


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.



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:


https://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/



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.


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?


No repositório do GITHub


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



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::



Nas imagens ensino passo a passo para habilitar o servidor web


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


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.


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.


Metatags


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 Icone, 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çoes 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>


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? 


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).


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:


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


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


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>


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.


Bom curso a todos.


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


 https://github.com/VagnerBellacosa/


Pode me dar uma ajudinha no YouTube?


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

0
0

Comentários (5)

1
Bruno Ferreira

Bruno Ferreira

19/07/2021 12:40

Bom conteúdo! Obrigado

0
Vagner Bellacosa

Vagner Bellacosa

18/07/2021 15:34

Monara, agradeço pelo carinho e feedback

1
Monara Calado

Monara Calado

18/07/2021 03:43

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

0
Vagner Bellacosa

Vagner Bellacosa

17/07/2021 17:43

Compartilhando o conhecimento para juntos irmos mais longe.



1
Dolisdeis Veloso

Dolisdeis Veloso

17/07/2021 16:02

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




Analista Programador dinossauro IBM Mainframe

Brasil