Investir na criação de um site exige recursos financeiros; cada fase do desenvolvimento de um site envolve custos.
Deseja construir um site sem custos para impulsionar seu crescimento pessoal ou profissional? Apresentamos uma maneira de criar seu próximo site com um nome de domínio personalizado, hospedagem vitalícia gratuita e criptografia SSL, também sem custos. Incrível, não é? O que mais você poderia desejar?
É evidente que possuir um site eleva significativamente o potencial de crescimento, sendo mais um investimento do que um luxo nos dias atuais. Isso se aplica não apenas a empresas, mas também a indivíduos que podem obter grandes vantagens com um site pessoal.
Desde registrar um nome de domínio, hospedar o conteúdo do seu site, construir o site até ativar a criptografia SSL, é preciso estar preparado para desembolsar recursos financeiros. Para piorar a situação, algumas dessas despesas são recorrentes e perduram indefinidamente.
E se lhe disser que é possível criar um site gratuitamente, realizando todas as etapas cruciais mencionadas na construção de sites sem nenhum custo? Por mais improvável que possa parecer, isso é possível se você for estudante.
Se você conhece o GitHub, provavelmente já ouviu falar do GitHub Pages. É um serviço gratuito que acompanha todas as contas do GitHub. O GitHub Pages permite que cada usuário crie um site gratuitamente e o hospede, mas há uma ressalva importante: os nomes de domínio desses sites gratuitos terminam com github.io, o que compromete o profissionalismo do seu site.
O que é o GitHub Student Developer Pack?
Menos pessoas levarão seu site a sério, e ter um nome de domínio desnecessariamente longo não é uma boa ideia. Mas calma! Não estamos aqui para discutir as vantagens e desvantagens do GitHub Pages. Prometi mostrar uma maneira de criar um site gratuito com um nome de domínio personalizado e vamos ver como isso é possível.
O GitHub oferece a oportunidade de obter um kit repleto de ferramentas online úteis para todos os estudantes matriculados em cursos de graduação ou técnicos, conhecido como GitHub Student Developer Pack. Este pacote inclui assinaturas profissionais e descontos incríveis em ferramentas populares como Canva, Namecheap, Microsoft Azure, Discord, Name.com e StreamYard, entre muitas outras.
Neste artigo, utilizaremos o Namecheap para registrar um domínio personalizado gratuito e as páginas do GitHub para hospedar o site. Em seguida, veremos como criar e enviar seus arquivos HTML, CSS e JavaScript para as páginas do GitHub. Por fim, também ativaremos a criptografia SSL para o site, mas antes, precisamos nos inscrever no Student Developer Pack.
Como se inscrever no GitHub Student Developer Pack?
O processo de inscrição no Student Developer Pack é simples: basta ter um endereço de e-mail estudantil fornecido pela sua universidade. Geralmente, esses e-mails terminam com o domínio da instituição, como por exemplo, aluno@universidade.edu. Existem outras formas de se inscrever no pacote, mas elas demandam tempos de revisão muito maiores do que o uso de um e-mail estudantil. Se você já possui seu endereço de e-mail estudantil, veja como se inscrever no pacote:
Passo 1: Acesse Educação do GitHub e clique na opção “Entrar”.
Se você já tiver o pacote, poderá fazer login usando suas credenciais. Caso contrário, siga os passos abaixo.
Clique na opção “Criar uma conta” na janela de login.
Passo 2: Em seguida, inscreva-se usando seu e-mail estudantil e crie uma conta.
Etapa 3: Quando perguntado sobre “Qual a melhor descrição do seu status acadêmico?”, selecione “Estudante”.
Etapa 4: Agora, preencha os campos com os dados solicitados sobre o nome da sua instituição e o objetivo de uso do GitHub.
Etapa 5: Por fim, envie sua inscrição utilizando a opção “Enviar suas informações”.
Se sua solicitação for aprovada pelo GitHub, você receberá um e-mail de confirmação sobre o pacote de desenvolvedor. O processo geralmente leva alguns dias, mas o tempo pode variar em períodos de maior demanda.
Como se inscrever no GitHub Student Developer Pack sem o e-mail estudantil?
O GitHub também oferece a possibilidade de solicitar o pacote com uma carteirinha de estudante válida ou qualquer outra comprovação de sua situação acadêmica. As desvantagens são o maior tempo de espera e a maior taxa de rejeição. De qualquer forma, veja como se inscrever no pacote de estudante por este método:
Passo 1: Siga os passos mencionados acima para criar uma conta usando seu e-mail pessoal.
Passo 2: Agora, envie o comprovante de sua situação acadêmica usando a câmera ou faça o upload das fotos diretamente no GitHub com o botão “Upload”.
Etapa 3: Em seguida, preencha todos os dados solicitados, como o nome da instituição e o objetivo de uso do GitHub.
Passo 4: Envie sua inscrição.
Como registrar seu domínio personalizado usando o Namecheap?
Partimos do princípio que sua conta do GitHub Education já está ativa. As próximas etapas envolvem o uso do Namecheap para registrar seu domínio personalizado sem custos e hospedá-lo através do GitHub Pages. Siga estas etapas para registrar seu nome de domínio preferido:
Etapa 1: Faça login na sua conta do GitHub Education e vá para a seção “Benefícios”.
Você deverá ver um Web Dev Kit e um Virtual Event Kit.
Passo 2: Vá para o Virtual Event Kit e role para baixo até encontrar o Namecheap.
O GitHub oferece o registro de um nome de domínio por 1 ano no TLD .me, ao qual você pode ter acesso ao clicar na opção “Obter acesso”.
Etapa 3: A próxima janela solicitará que você autorize a conexão do Namecheap à sua conta do GitHub. Autorize o Namecheap e prossiga para a próxima etapa.
Após a autorização bem-sucedida, você deverá ver uma mensagem indicando: “Verificamos seu pacote de estudante com o GitHub”.
Etapa 4: Digite seu domínio preferido na barra de pesquisa e clique em “Localizar”.
Na próxima tela, você verá se o nome de domínio está disponível. Caso esteja, você poderá comprá-lo gratuitamente.
Etapa 5: Finalize a compra usando o e-mail do GitHub Education e selecione GitHub Pages como método de hospedagem ao prosseguir.
Após registrar seu nome de domínio personalizado e escolher o GitHub Pages como hospedagem, o Namecheap criará automaticamente um repositório em sua conta do GitHub. Este repositório estará vazio e conterá apenas um arquivo README.md.
Você pode acessar este repositório entrando 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 seu site; você precisará codificar todo o site manualmente e fazer o upload dos arquivos correspondentes para o repositório recém-criado do GitHub.
Como criar um site gratuito e hospedá-lo no GitHub Pages?
Conforme mencionado, você precisará criar todos os arquivos HTML, CSS e JavaScript do seu site. Se você gosta de desenvolvimento web e sabe programar, pode enviar seus arquivos para seu repositório GitHub e colocar seu site em funcionamento. Você pode pular para a seção deste artigo que aborda o envio do código do site para o GitHub Pages.
Mas, se você tem pouco ou nenhum conhecimento em desenvolvimento web, nós ajudamos você. Você pode seguir as etapas abaixo e criar seu próprio site com HTML básico:
Passo 1: Acesse HTML5 UP e escolha o design de site que você preferir. Você pode escolher qualquer outro tema pré-construído de qualquer plataforma. Aqui, selecionei o tema “Massively” do HTML5 UP, mas você pode baixar e personalizar qualquer design de site de sua preferência.
Passo 2: Extraia o arquivo zip do design de site de sua preferência.
Na pasta extraída, você deverá encontrar arquivos como index.html e generic.html e pastas como assets e images.
Etapa 3: Agora abra os arquivos extraídos no Visual Studio Code e selecione o arquivo index.html.
Etapa 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 escolha a opção “Abrir com o Live Server”. Esta opção permite visualizar as alterações no arquivo HTML em seu navegador em tempo real.
Como personalizar o design do seu site?
A partir deste ponto, não vamos chamar o processo de “Passos” para personalizar seu site. A personalização dos arquivos HTML depende totalmente de suas preferências, mas aqui está como personalizei o design “Massively” do HTML5 UP e o transformei em um portfólio. Você pode usar isso como inspiração ou personalizar seu site por conta própria. A escolha é sua!
Modificando as tags de título e parágrafo
Iniciando o processo de personalização, alterei a tag de título “Massively”. A tag de título do seu arquivo HTML definirá o nome que aparece na aba do navegador. O título padrão do tema Massively é “Massively by HTML5 UP” e recomendo alterá-lo para algo que represente seu site.
Mudei a tag de título para “Samyak Goswami | Tech Content Writer”, pois combinava perfeitamente com meu Portfólio. Em seguida, alterei a seção Intro do site, que dizia “This is Massively” (contida na tag H1) e a transformei em “Samyak’s Portfolio” por razões óbvias. Depois, modifiquei o texto abaixo nas tags de parágrafo para “Uma vitrine dos meus projetos e minhas habilidades”.
Passando para a seção de Navegação (Nav) no arquivo index, omiti dois dos três botões de navegação presentes na tag List. Eu queria criar um site de página única com todos os detalhes em uma única página, mas você pode modificar o número de botões de navegação como preferir.
Posteriormente, alterei 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 verá diversos í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 no meu caso.
Você pode modificar os ícones de mídia social e seus links acessando a seção Navegação (Nav) e rolando até as tags da lista com Twitter, Instagram e outros escritos neles.
Note que não há links anexados a esses ícones de mídia social, pois a tag href está em branco. Você pode adicionar links à tag href substituindo “#” pelo seu link desejado.
Modificando o conteúdo da página inicial
Primeiro, mudei a tag H2 para “Meu nome é Samyak Goswami” e, posteriormente, alterei a tag Parágrafo para “Sou um entusiasta de tecnologia…”. Sugiro que você altere a tag H2 para algo que corresponda ao conteúdo da sua página inicial e a tag de parágrafo para explicá-lo.
Estamos chegando à parte mais crucial da personalização: a modificação do conteúdo dos blocos dos artigos.
Para fazer isso, vá para a seção “Postagens” no arquivo index e você verá diversos trechos de código contidos nas tags article. Você pode adicionar links aos seus artigos modificando a seção href como fizemos ao adicionar links aos ícones de mídia social.
Posteriormente, você pode alterar o nome dos artigos modificando o conteúdo das tags H2. Você também pode adicionar uma descrição aos seus artigos utilizando a tag de parágrafo.
Repita o processo para cada artigo adicionando links, alterando os nomes e adicionando uma descrição a todos os seus artigos.
Adicionando imagens aos seus sites
Você deve ter notado que a visualização é bastante diferente das imagens presentes no site do HTML5 UP. Isso ocorre por causa da imagem do avião e outras fotos simples no arquivo personalizável. Vamos adicionar imagens personalizadas para deixar nosso site mais interessante.
Imagens originais
Para fazer isso, navegue até a pasta onde você extraiu o arquivo zip “Massively” anteriormente. Abra a pasta extraída e vá para a pasta “Images”. Você deverá encontrar várias imagens chamadas bg, pic01, pic02 e assim por diante. Essas são as imagens vinculadas aos nossos artigos na tag “Article”.
Você pode adicionar imagens personalizadas e modificar o arquivo index com os nomes dessas imagens, ou adicionar as imagens e nomeá-las de forma similar às imagens padrão. Nomear as imagens de forma idêntica evita a necessidade de modificar o código e poupa muito tempo.
Imagens modificadas
Sugiro que você revise e modifique outras seções do seu site que não sejam tão importantes. Este é o portfólio que criei utilizando as etapas que mencionei acima: smyakgoswami.me.
Como fazer upload do código do seu site para o GitHub Pages?
Depois de codificar e projetar seu site, é hora de enviá-lo ao GitHub Pages e torná-lo visível na internet.
Veja como enviar seu site para o GitHub Pages:
Etapa 1: Faça login na sua conta do GitHub e vá para a seção “Meus repositórios”.
Etapa 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 o upload dos arquivos no repositório do GitHub.
Passo 4: Selecione todos os cinco arquivos e pastas: assets, images, elements, generic e index, arraste e solte-os no repositório.
Depois que os arquivos forem carregados, confirme o código e espere o GitHub processar os arquivos.
Etapa 5: Vá para Configurações > GitHub Pages para ver o status do seu site. Você deve ver a mensagem “Seu site está publicado em your_custom_domain”.
Agora você pode acessar seu endereço web e verificar o site. Lembre-se de que pode levar algum tempo para o site entrar no ar inicialmente.
Como habilitar a criptografia SSL no GitHub Pages?
HTTP é uma forma insegura de gerenciar solicitações de usuários em seu site. Qualquer pessoa com más intenções e conhecimento técnico sólido pode interceptar as interações entre o usuário e seu site. Por outro lado, o HTTPS proporciona uma sessão de navegação muito mais segura a todos os visitantes. O GitHub Pages oferece criptografia HTTPS gratuita, veja como aproveitá-la:
Role até a seção “Páginas” no repositório.
Você deverá ver a opção “Enforce HTTPS” no final da janela. A criptografia SSL será ativada assim que você marcar a caixa de seleção “Impor HTTPS”.
Caso você não encontre a opção “Aplicar HTTPS” disponível para seu domínio, você pode ativar a criptografia SSL seguindo as etapas abaixo:
Passo 1: Faça login na sua conta do Namecheap e vá para a seção “Lista de Domínios”.
Etapa 2: Agora, vá para “Gerenciar domínio” e depois para a seção “DNS avançado”.
Você deverá encontrar alguns registros CNAME e A existentes.
Adicione os seguintes registros A com host como “@” e endereço IP como “185.199.108.153”. O seguinte com o nome do host “@” e endereço IP como “185.199.109.153”.
Siga esta lógica até ter 4 Registros A com o endereço IP “185.199.111.153”.
Remova todos os registros A anteriores.
Etapa 3: Em seguida, adicione um registro CNAME com o host como “www” e o valor como seu nome de usuário do GitHub (ponto) github (ponto) io.
Remova os registros CNAME anteriores. No final, suas configurações de DNS deverão ter 4 registros A e 1 registro CNAME.
Etapa 4: Agora, acesse as páginas do GitHub na seção “Configurações”. A opção “Aplicar HTTPS” deverá estar disponível para seu domínio.
Resumindo 👈
O GitHub oferece uma oportunidade fantástica para todos os alunos criarem e gerenciarem um site sem custos. Apesar de não ser possível usar o GitHub Pages para lidar com grandes volumes de tráfego, ele atende a todos os requisitos para um site estático de pequena escala. O nome de domínio personalizado gratuito, a hospedagem e a criptografia SSL o tornam ainda mais valioso.
Você pode ler agora “Como escolher um host para seu novo site”.
Aqui estão algumas ferramentas de monitoramento de velocidade de página para avisá-lo quando seu site estiver fora do ar.