Como criar um site gratuito com nome de domínio personalizado, hospedagem e criptografia SSL?

Criar um site é um investimento sério; você tem que pagar por cada etapa da construção de um site.

Quer criar um site grátis para crescimento pessoal ou profissional? Aqui está uma maneira de crie seu próximo site com um nome de domínio personalizado, hospedagem gratuita vitalícia e criptografia SSL totalmente gratuita. Ufa! O que mais você poderia pedir?

É óbvio que ter um site aumenta significativamente seus números de crescimento e hoje é mais um investimento do que um luxo. Isso não é verdade apenas para empresas, mas indivíduos também podem se beneficiar muito por meio de um site pessoal.

Seja registrando um nome de domínio, hospedando o conteúdo do seu site, construindo o site ou ativando a criptografia SSL , você deve estar pronto para esvaziar seus bolsos. Para aumentar a dor, algumas dessas despesas são recorrentes e continuam para sempre.

E se eu lhe dissesse que você pode criar um site gratuito enquanto executa todas as etapas cruciais mencionadas acima na construção do site também de graça? Por mais estranho que pareça, você pode fazer tudo isso de graça se for um estudante.

Se você conhece o GitHub, talvez conheça o GitHub Pages. É gratuito usar o serviço que acompanha todas as contas do GitHub. O GitHub Pages permite que cada usuário crie um site gratuito e o hospede, mas há uma grande ressalva. Os nomes de domínio desses sites gratuitos terminam essencialmente com github.io, o que arruína o profissionalismo do seu site.

O que é o GitHub Student Developer Pack?

Menos usuários levarão seu site a sério, e ter um nome de domínio desnecessariamente longo nunca é uma boa ideia. Mas ei! Não estamos aqui para falar sobre as vantagens ou advertências das páginas do GitHub. Prometi uma maneira de permitir que você crie um site gratuito com o nome de domínio personalizado e veja como fazer isso.

O GitHub oferece a chance de disponibilizar um kit fantástico repleto de ferramentas on-line úteis para todos os alunos matriculados em um curso de graduação ou diploma, conhecido como GitHub Student Developer Pack. O pacote inclui assinaturas profissionais e descontos incríveis em ferramentas populares como canva Namecheap, Microsoft Azure, Discord, Name.com e StreamYard, entre um zilhão de outros.

Neste artigo, usaremos o Namecheap para registrar um domínio personalizado gratuito e usar as páginas do GitHub para hospedar nosso site. Em seguida, veremos maneiras de projetar e carregar seus arquivos HTML, CSS e JavaScript nas páginas do GitHub. Eventualmente, também habilitaremos a criptografia SSL para o site, mas, antes de mais nada, precisamos nos registrar no Student Developer Pack.

Como se inscrever no GitHub Student Developer Pack?

O processo de inscrição no Student Developer Pack se resume a ter um endereço de e-mail de estudante concedido pela universidade. O endereço de e-mail de um aluno geralmente termina com o nome de domínio da sua universidade, por exemplo, imastudent@mywvm.wvm.edu. Existem outras formas de se inscrever no pacote, mas elas exigem tempos de revisão muito maiores do que usando um e-mail de aluno. Se você tiver seu endereço de e-mail de estudante pronto, veja como você pode se registrar para o pacote:

Passo 1: Vamos para Educação GitHub e clique na opção Entrar.

Você pode fazer login usando suas credenciais se já tiver o pacote. Caso contrário, você pode seguir as etapas abaixo.

Clique na opção Criar uma conta na janela Entrar.

Passo 2: Em seguida, registre-se usando seu e-mail de aluno e crie uma conta.

Etapa 3: Quando solicitado com “Qual melhor descreve seu status acadêmico?”, certifique-se de selecionar Aluno.

Passo 4: Agora preencha as caixas necessárias com detalhes sobre o nome da sua escola e sua finalidade de usar o GitHub.

Passo 5 : Por fim, submeta a sua candidatura através da opção “Enviar as suas informações”.

Você deve receber um e-mail de confirmação sobre o pacote do desenvolvedor se seu aplicativo for aprovado pelo GitHub. O processo geralmente leva alguns dias, mas o tempo pode variar significativamente durante os horários de pico.

Como se inscrever no GitHub Student Developer Pack sem o e-mail do aluno?

O GitHub também oferece a opção de se inscrever no pacote usando uma carteira de estudante válida ou qualquer outra prova de seu status acadêmico. As únicas ressalvas são o longo tempo de espera e a maior taxa de rejeição. De qualquer forma, veja como você pode se inscrever para o pacote de estudante por este método:

Passo 1: Siga os passos mencionados acima para criar uma conta através do seu e-mail pessoal.

Passo 2: Agora carregue a prova do seu status acadêmico usando a opção da câmera ou carregue as fotos diretamente no GitHub usando o botão Upload.

Etapa 3: Em seguida, preencha todos os detalhes necessários, como o nome da escola e a finalidade de usar o GitHub.

Passo 4: Envie sua aplicação.

Como registrar seu domínio personalizado usando Namecheap?

Presumo que você tenha sua conta do GitHub Education funcionando. As etapas a seguir envolvem o uso do Namecheap para registrar seu domínio personalizado gratuito e hospedá-lo por meio do GitHub Pages. Siga estas etapas para registrar seu nome de domínio preferido:

Passo 1: Faça login na sua conta do GitHub Education e vá para a seção Benefícios.

Você deve ver um Web Kit de desenvolvimento e um kit de evento virtual.

Passo 2: Vá para o Virtual Event Kit e role para baixo para encontrar Namecheap.

O GitHub oferece um registro de nome de domínio de 1 ano no TLD .me, que você pode acessar clicando na opção Obter acesso.

Etapa 3: A janela a seguir solicitará que você autorize a solicitação de conexão de Namecheap para sua conta do GitHub. Autorize Namecheap e prossiga para a próxima etapa.

Você deve ver um prompt dizendo: “Verificamos com sucesso seu pacote de estudante com o GitHub” após a autorização bem-sucedida.

Passo 4: Encontre seu domínio preferido na barra de pesquisa e clique em Localizar.

Você deve ver a disponibilidade do nome de domínio na próxima tela. Se o seu nome de domínio estiver disponível, você poderá comprá-lo gratuitamente.

Passo 5: Faça o checkout usando o endereço de e-mail do GitHub Education e selecione GitHub Pages como seu método de hospedagem durante o processo.

Depois de registrar com sucesso seu nome de domínio personalizado e escolher as páginas do GitHub como sua hospedagem, o Namecheap deve criar automaticamente um repositório em sua conta do GitHub. Este repositório está completamente vazio e contém apenas um arquivo README.md.

Você pode acessar este repositório fazendo login em sua conta do GitHub e clicando na seção “Seus repositórios”. O GitHub Pages não oferece ferramentas visuais e temas pré-construídos para o seu site; você precisa codificar todo o site manualmente e fazer upload de arquivos relacionados para seu repositório GitHub recém-criado.

Como criar um site gratuito e hospedá-lo no GitHub Pages?

Conforme mencionado acima, você terá que criar todos os arquivos HTML, CSS e JavaScript relacionados ao seu site. Se você gosta Web Dev e saiba como codificar, você é bom para fazer upload de seus arquivos em seu repositório GitHub e colocar seu site em execução. Você pode rolar até a seção deste artigo que trata do upload do código do site para o GitHub Pages.

Mas se você é alguém que tem pouca ou nenhuma informação sobre Web Dev, nós cuidamos de você. Você pode usar as etapas abaixo e criar seu próprio site usando um pouco de HTML básico:

Passo 1: Vamos para HTML5 UP e vá até o design do site que você gosta. Você pode escolher qualquer outro tema pré-construído de qualquer plataforma. Aqui eu escolhi “Massivamente” de HTML5 UP, mas você é livre para baixar e personalizar qualquer design de site de sua escolha.

Passo 2: Extraia o arquivo zip baixado do design do seu site favorito.

Você deve ver os arquivos denominados index.html e generic.html e pastas como recursos e imagens na pasta extraída.

Etapa 3: Agora abra os arquivos extraídos usando o Visual Studio Code e selecione o arquivo index.html.

Passo 4: Baixe e instale a extensão “Live Server” no Visual Studio Code, caso ainda não a tenha.

Passo 5: Selecione o arquivo index.html, clique com o botão direito do mouse e selecione a opção “Abrir no Live Server”. Esta opção permite que você visualize as alterações em seu arquivo HTML em seu navegador em tempo real.

Como personalizar o design do seu site?

Não vou denominar o processo além deste ponto como “etapas” para personalizar seu site. Personalizar os arquivos HTML depende inteiramente de sua preferência, mas aqui está como eu personalizei o design “Massivamente” do HTML5 UP e o converti em um portfólio. Você pode optar por se inspirar nisso ou personalizar seu site inteiramente por conta própria. A escolha é sua!

Modificando as tags de Título e Parágrafo

Iniciando meu processo de personalização, mudei a tag de título “Massivamente”. A tag de título do seu arquivo HTML decidirá seu nome ao ser aberto em uma guia do navegador. O título padrão para o Massively deve ser “Massively by HTML5 UP” e eu recomendo alterá-lo para algo parecido com o seu site.

Mudei a tag de título para “Samyak Goswami | Escritor de conteúdo técnico”, pois se adequava perfeitamente ao meu portfólio. Em seguida, mudei a seção Intro do site, que dizia: “This is Massively” (contido na tag H1) e a tornei “Samyak’s Portfolio” por razões óbvias. Posteriormente, alterei o texto abaixo nas tags de parágrafo para “Uma vitrine dos meus projetos e minhas habilidades”.

Indo para a seção Navigation (Nav) no arquivo de índice, omiti dois dos três botões de navegação contidos na tag List. Eu queria criar um site de página única com todos os detalhes em uma única página, mas você é livre para modificar o número de botões de navegação de acordo com sua escolha.

Mais tarde, mudei o texto “This is Massively” no botão de navegação para “My Articles”.

Modificando os links e ícones de mídia social

Você também deve ver os vários ícones de mídia social no servidor ao vivo, como Twitter, Facebook, Instagram e GitHub. Decidi omitir o Twitter e o Facebook e manter o Instagram e o LinkedIn como meu caso de uso.

Você pode modificar os ícones de mídia social e seus links acessando a seção Navegação (Nav) e rolando até Marcas de lista com Twitter, Instagram e mais escritas dentro delas.

Observe como não há links anexados a esses ícones de mídia social, pois a tag href é deixada em branco. Você pode adicionar links à tag href substituindo “#” pelo link de sua preferência.

Modificando o conteúdo da página inicial

Primeiro, mudei a tag H2 e fiz “Meu nome é Samyak Goswami” e, posteriormente, mudei a tag Parágrafo para “Sou um entusiasta de tecnologia…”. Sugiro que você altere a tag H2 com algo que corresponda ao conteúdo de sua página inicial e à tag de parágrafo que a explica.

Agora estamos chegando à parte mais crucial dessa personalização; modificando o conteúdo dos blocos do artigo.

Para fazer isso, vá para a seção Posts no arquivo de índice e você verá vários trechos de código contidos nas tags de artigo. Você pode adicionar links para suas histórias modificando a seção href como fizemos ao adicionar links para ícones de mídia social.

Posteriormente, você pode alterar o nome dos artigos modificando o conteúdo nas tags H2. Você também pode adicionar uma descrição aos seus artigos usando a tag de parágrafo.

Repita o processo para cada artigo adicionando links, alterando nomes e adicionando uma descrição a todos os seus artigos.

Adicionando imagens aos seus sites

Você deve ter notado que a visualização fica bem diferente das imagens presentes no site HTML5 UP. Isso se deve ao avião e às fotos sem graça no arquivo personalizável. Vamos apimentar nosso site adicionando imagens personalizadas a ele.

Para fazer isso, navegue até a pasta onde você extraiu anteriormente o arquivo zip “Massivamente”. Abra a pasta extraída e vá para a pasta Imagens. Você deve ver imagens diferentes chamadas bg, pic01, pic02 e assim por diante. Estas são as imagens vinculadas aos nossos artigos na tag Artigo.

Você pode adicionar imagens personalizadas e modificar o arquivo de índice com os nomes dessas imagens ou adicionar as imagens e nomeá-las semelhantes às imagens padrão. Dar às imagens nomes idênticos nos poupa de modificar o código e muito tempo subsequentemente.

Sugiro que você revise e modifique outras seções do seu site que não são importantes. Aqui está o portfólio que criei usando as etapas que mencionei acima: samyakgoswami.me .

Como fazer upload do código do seu site para as páginas do GitHub?

Depois de finalmente codificar e projetar seu site, é hora de carregá-lo no GitHub Pages e colocá-lo no ar na Internet.

Veja como você pode enviar seu site para as páginas do GitHub:

Passo 1: Faça login na sua conta do GitHub e vá para a seção Meus repositórios.

Passo 2: Você deve ver um repositório chamado your_username.github.io. Acesse este repositório.

Etapa 3: Você deve ver uma opção para criar seu próprio arquivo ou fazer upload de arquivos para o repositório GitHub.

Passo 4: Selecione todos os cinco arquivos e pastas; recursos, imagens, elementos, genéricos, índices e arraste e solte-os no repositório.

Depois que os arquivos forem carregados, confirme o código e aguarde até que o GitHub processe seus arquivos.

Passo 5: Navegue até Configurações>Páginas do GitHub para ver o status do seu site. Você deve ver o prompt “Seu site está publicado em seu_domínio_personalizado”.

Agora você pode ir ao seu endereço da web e verificar o site por conta própria. Lembre-se, o site pode levar algum tempo antes de entrar no ar inicialmente.

Como ativar a criptografia SSL nas páginas do GitHub?

HTTP é uma forma insegura de gerenciar solicitações de usuários em seu site. Qualquer pessoa com intenção maliciosa e conhecimento técnico sólido pode interceptar as interações entre o usuário e seu site. Por outro lado, o HTTPS oferece a todos os seus visitantes uma sessão de navegação muito mais segura. As páginas do GitHub oferecem criptografia HTTPS gratuita e veja como você pode aproveitá-la:

Role até a seção Páginas no repositório.

Você deve ver a opção “Aplicar HTTPS” no final da janela. o criptografia SSL deve entrar em operação assim que você marcar a caixa de seleção Aplicar HTTPS.

Caso a opção Aplicar HTTPS não esteja disponível para o seu domínio, você pode habilitar a criptografia SSL usando as etapas abaixo:

Passo 1 : Faça login na sua conta Namecheap e vá para a seção “Lista de domínios”.

Passo 2: Agora navegue até Gerenciar Domínio e posteriormente até a seção “DNS Avançado”.

Você deve ver alguns registros CNAME e A existentes.

Adicione os seguintes registros A com host como “@” e endereço IP como “185.199.108.153”. Em seguida, com o nome do host “@” e o endereço IP como “185.199.109.153”.

Siga a tendência até ter 4 A Records até o endereço IP “185.199.111.153”.

Remova todos os registros A anteriores.

Etapa 3: Em seguida, adicione um registro CNAME com Host como “www” e Value como seu nome de usuário do GitHub (ponto) github (ponto) io.

Remova os registros CNAME anteriores. No final, suas configurações de DNS devem ter 4 registros A e 1 registro CNAME.

Passo 4: Agora vá para as páginas do GitHub na seção Configurações. A opção Aplicar HTTPS agora deve estar disponível para seu domínio.

Resumindo

O GitHub oferece uma oportunidade fantástica para todos os alunos criarem um site gratuito e gerenciá-lo. Embora você não possa usar o GitHub Pages para hospedar grandes cargas de tráfego, ele marca todas as caixas de seleção para um site estático de pequena escala. O nome de domínio personalizado gratuito, hospedagem e criptografia SSL tornam ainda mais maravilhoso ter.

Agora você pode ler “Como Escolha um Web Hospedar para o seu novo site.”

Aqui estão alguns ferramentas de monitoramento de velocidade de página para notificá-lo quando seu site cair.