Criar um site é um investimento sério; você tem que pagar por cada etapa da construção de um site.
Quer criar um site gratuito para crescimento pessoal ou profissional? Aqui está uma maneira de projetar seu próximo site com um nome de domínio personalizado, hospedagem gratuita vitalícia e criptografia SSL absolutamente gratuita. Uau! 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 as empresas, mas os 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 habilitando a criptografia SSL, você deve estar pronto para esvaziar seus bolsos. Somando-se à dor, algumas dessas despesas são recorrentes e continuam para sempre.
E se eu lhe disser que você pode criar um site gratuito enquanto executa todas as etapas cruciais mencionadas acima na construção de sites também gratuitamente? Por mais fora do mundo que possa parecer, 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.
últimas postagens
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 ressalvas do GitHub Pages. Prometi uma maneira de permitir que você crie um site gratuito com o nome de domínio personalizado e veja como você pode fazer isso.
O GitHub oferece a chance de aproveitar 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 de cair o queixo em ferramentas populares como Canva, Namecheap, Microsoft Azure, Discord, Name.com e StreamYard, entre um zilhão de outras.
Neste artigo, usaremos o Namecheap para registrar um domínio personalizado gratuito e usaremos as páginas do GitHub para hospedar nosso site. Em seguida, veremos maneiras de projetar e enviar seus arquivos HTML, CSS e JavaScript para as páginas do GitHub. Eventualmente, também habilitaremos a criptografia SSL para o site, mas antes de tudo, precisamos nos registrar no Student Developer Pack.
Como se inscrever no GitHub Student Developer Pack?
O processo de registro para o Student Developer Pack se resume a ter um endereço de e-mail de estudante concedido pela universidade. Um endereço de e-mail de estudante geralmente termina com o nome de domínio da sua universidade, por exemplo, [email protected] Existem outras maneiras de se registrar para o pacote, mas elas exigem tempos de revisão muito maiores do que usando um e-mail do aluno. Se você tiver seu endereço de e-mail de aluno pronto, veja como se inscrever no pacote:
Passo 1: Vá para Educação do 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 os passos 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.
Etapa 4: Agora preencha as caixas necessárias com detalhes sobre o nome da sua escola e seu propósito de usar o GitHub.
Etapa 5: Por fim, envie sua inscrição usando a opção “Enviar suas informações”.
Você deve receber um e-mail de confirmação sobre o pacote de 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 solicitar o 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, aqui está como você pode se inscrever para o pacote de estudante através deste método:
Passo 1: Siga os passos mencionados acima para criar uma conta através do seu e-mail pessoal.
Passo 2: Agora faça o upload do comprovante de seu status acadêmico usando a opção de câmera ou faça o upload das fotos diretamente para o GitHub usando o botão Upload.
Etapa 3: em seguida, preencha todos os detalhes necessários, como o nome da escola e a finalidade do uso do GitHub.
Passo 4: Envie sua inscrição.
Como registrar seu domínio personalizado usando Namecheap?
Suponho que você tenha sua conta do GitHub Education em funcionamento. 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:
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 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 do 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.
Etapa 4: encontre seu domínio preferido na barra de pesquisa e clique em Localizar.
Você deverá 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.
Etapa 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 enquanto continua.
Depois de registrar com sucesso seu nome de domínio personalizado e escolher o GitHub Pages 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 na sua conta do GitHub e clicando na seção “Seus repositórios”. O GitHub Pages não oferece ferramentas visuais e temas pré-criados para seu site; você precisa codificar todo o site manualmente e fazer upload de arquivos relacionados para o repositório GitHub recém-criado.
Como criar um site gratuito e hospedá-lo no GitHub Pages?
Como mencionado acima, você terá que criar todos os arquivos HTML, CSS e JavaScript relacionados ao seu site. Se você gosta de Web Dev e sabe como codificar, é bom 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 o cobrimos. Você pode usar as etapas abaixo e criar seu próprio site usando algum HTML básico:
Passo 1: Vá para HTML5 PARA CIMA e role até o design do site que você gosta. Você pode escolher qualquer outro tema pré-construído de qualquer plataforma. Aqui eu escolhi “Massively” do HTML5 UP, mas você é livre para baixar e personalizar qualquer design de site de sua escolha.
Passo 2: Extraia o arquivo zip baixado do seu design de site favorito.
Você deve ver arquivos chamados index.html e generic.html e pastas como ativos 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.
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 selecione a opção “Abrir no Live Server”. Esta opção permite visualizar as alterações em seu arquivo HTML em seu navegador em tempo real.
Como personalizar o design do seu site?
Não vou chamar o processo além deste ponto de “Passos” para personalizar seu site. Personalizar os arquivos HTML depende inteiramente de sua preferência, mas aqui está como eu personalizei o design “Massively” 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
Começando meu processo de personalização, mudei a tag de título “Massively”. 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 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 | Tech Content Writer”, 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 transformei em “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ê pode modificar o número de botões de navegação de acordo com sua escolha.
Mais tarde, 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 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 para 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é Tags de lista com Twitter, Instagram e muito mais escritos neles.
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 seu link preferido.
Modificando o conteúdo da página inicial
Primeiro, mudei a tag H2 e fiz “Meu nome é Samyak Goswami” e, posteriormente, alterei a tag Parágrafo para “Sou um entusiasta de tecnologia…”. Eu sugiro que você altere a tag H2 com algo que corresponda ao conteúdo da sua página inicial e a tag de parágrafo explicando isso.
Agora estamos chegando à parte mais crucial dessa personalização; modificar o conteúdo dos blocos do artigo.
Para fazer isso, vá para a seção Postagens no arquivo de índice e você verá vários trechos de código contidos nas tags do artigo. Você pode adicionar links às suas histórias modificando a seção href como fizemos ao adicionar links aos ícones de mídia social.
Mais tarde, 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 é muito 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 incrementar nosso site adicionando imagens personalizadas a ele.
Imagens originais
Para fazer isso, navegue até a pasta onde você extraiu anteriormente o arquivo zip “Massively”. 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 Article.
Você pode adicionar imagens personalizadas e modificar o arquivo de índice com os nomes dessas imagens ou adicionar as imagens e nomeá-las de forma semelhante às imagens padrão. Dar nomes idênticos às imagens evita que modifiquemos o código e muito tempo posteriormente.
Imagens modificadas
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: smyakgoswami.me.
Como fazer upload do código do seu site para o GitHub Pages?
Depois de finalmente codificar e projetar seu site, é hora de carregá-lo no GitHub Pages e torná-lo ativo na Internet.
Veja como você pode 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. Entre neste 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 do GitHub.
Passo 4: Selecione todos os cinco arquivos e pastas; ativos, imagens, elementos, genéricos, índice 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.
Etapa 5: navegue até Configurações> GitHub Pages para ver o status do seu site. Você deve ver o prompt “Seu site está publicado em your_custom_domain”.
Agora você pode acessar seu endereço da Web e verificar o site por conta própria. Lembre-se, o site pode levar algum tempo antes de ir ao ar inicialmente.
Como habilitar a criptografia SSL no GitHub Pages?
HTTP é uma maneira 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. O GitHub Pages oferece 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 “Enforce HTTPS” no final da janela. A criptografia SSL deve ser ativada assim que você marcar a caixa de seleção Impor HTTPS.
Caso você encontre a opção Aplicar HTTPS indisponível para seu domínio, você pode habilitar a criptografia SSL seguindo as etapas abaixo:
Passo 1: Faça login na sua conta Namecheap e vá para a seção “Lista de Domínios”.
Etapa 2: Agora navegue até Gerenciar domínio e, posteriormente, para 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”. O próximo 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.
Etapa 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, a hospedagem e a criptografia SSL o tornam ainda mais maravilhoso.
Agora você pode ler “Como escolher um host para seu novo site”.
Aqui estão algumas ferramentas de monitoramento de velocidade de página para notificá-lo quando seu site cair.