Melhor resposta
O GitHub Student Developer Pack fornece os recursos para configure seu próprio firstnamelastname.me domínio sem nenhum custo. No resto da minha resposta, discordo sobre por que foi inicialmente difícil para mim, por que pode ter sido uma barreira para você, criar seu próprio site. Incluo um guia curto, um tanto abrangente, destinado a um público estudantil com pouco ou nenhum conhecimento técnico, para fazer um site pessoal bastante público para você (que deve aparecer quando alguém google seu nome).
Por que é realmente difícil criar seu próprio site
Sobre querer saber como funcionam os sites: Como um entusiasta de tecnologia do ensino médio, sempre tive curiosidade em saber como os sites funcionam e realmente fiquei impressionado com as pessoas que tinham os seus próprios. Tudo parecia tão simples por fora, mas sempre que eu pesquisava “como funcionam os sites” no Google e ia mais fundo, me perdia no meio de abreviações estranhas e coisas que soavam complicadas. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – a lista continua. A tarefa de mapear esses conceitos obscuros para coisas palpáveis em computadores que eu conhecia era bastante difícil e uma daquelas coisas que exige uma enorme quantidade de motivação para sentar e analisar.
Sobre a decisão de apenas fazer um site para descobrir como eles funcionam: há uma pergunta que você pode fazer em algumas empresas de tecnologia exigentes e encontrar no anais de Glassdoor –
Quando você digita “google [dot] com” em seu navegador, o que acontece? ( Pergunta da entrevista do Google: o que acontece quando você digita …)
Mesmo no meio do caminho para estudar Ciência da Computação na faculdade, eu era um pouco preocupado com o pouco que me contaram sobre tudo isso. Frustrado, a única coisa alternativa de pesquisar no Google era “como fazer um site”. Com todo o dinheiro investido em marketing, topei com uma infinidade de sites e termos que ainda não conseguia entender – domínios, hospedagem, GoDaddy, HostGator, roteamento, CSS, HTML, Javascript, jQuery, WordPress , blogger, etc. Isso é o que me mostra agora:
Para ser honesto, todos esses nomes pareciam muito scam- y para mim, e sua incompreensibilidade excedeu minha motivação. Eu só queria ter meu próprio site com meu nome – debarghyadas.com [ignore a autopromoção], e aprender como colocar conteúdo nele.
Sobre ser muito barato para comprar coisas na internet: Quando eu envolvi minha cabeça em alguns isso, fazia sentido. Para fazer um site, eu teria que comprar um “domínio”, um nome de site e um “hosting”, um local que contém o conteúdo do meu site e dá, “serve”, para este domínio. Compra. Não é uma palavra bonita, dada a minha frugalidade não tão arraigada. tudante que vive de freeware, eu não estava muito interessado em distribuir dinheiro para comprar coisas abstratas. Levei anos para pagar US $ 1 pelo Whatsapp quando era trivial gastar US $ 4 naquele suntuoso bolo de musse de chocolate com sorvete de baunilha.
Vamos – você poderia ser mais scam-y? “Comemos a concorrência”? Ok, jacaré.
Para muitos alunos (e pessoas), o dinheiro é uma barreira e tanto para entrar. Custa cerca de US $ 10 / ano para comprar um domínio (em GoDaddy) e uma quantia semelhante para comprar hospedagem na HostGator. E envolvia trabalhar do seu jeito em vários produtos que você não conseguia entender. Me irritou que você tivesse que pagar anualmente – não era uma compra única.
Sobre recorrer a não ser barato para me motivar: Eventualmente, através de um longo e laborioso processo, distribuí o dinheiro, convencendo-me de que o investimento me motivaria a aprender as habilidades necessárias. Quer dizer, todo mundo sempre disse que HTML era simples, e é, mas sites feitos com HTML também parecem uma merda. Houve muita confusão.
No final das contas, eu estava certo – o investimento em um domínio e hospedagem por 5 anos me levou a descobrir como as coisas funcionavam e eu criei um site pessoal e iteraria nele sempre que tivesse algum Tempo livre.
Um guia um tanto abrangente para fazer seu próprio site gratuitamente
Acessando o GitHub Student Developer Pack .Sim, ele contém muitas coisas que eu nunca usei, mas o que ele não anuncia diretamente (e provavelmente deveria) é que fornece todas as ferramentas para colocar o seu site no seu domínio funcionando de graça! Parece bom demais para ser verdade agora.
Ferramentas do comércio Aqui “uma orientação geral. I não tentei pessoalmente, mas imagino que seja uma boa maneira de fazer as coisas. Você precisa (ou deve) usar os seguintes serviços pagos que o Student Developer Pack oferece (gratuitamente):
1. Repositórios privados do Github [opcional]
2. Domínio Namecheap .me
3. Namecheap SSL [opcional]
4. Hospedagem DigitalOcean
E, além disso,
1. Bootstrap
2. Vários tutoriais e ferramentas online – JSfiddle 3. Alguns sites de modelo online – StartBootstrap , BootstrapZero
O que fazer com essas ferramentas tentarei manter este mini-guia o mais simples possível . É fácil abandonar termos grandes quando você sabe o que eles significam, mas pode ser um grande impedimento para os leitores que não têm noção. Eu poderia ser mais explícito e expandir esses termos, se solicitado.
1. Configure um Github repositório [opcional]
Quando você está escrever muito código para um projeto, “há muitas coisas que podem dar errado.
- Ele pode ser excluído de sua máquina e você está ferrado
- Você pode tentar adicionar um novo recurso sem fazer backup da versão anterior e chegar a um estado em que você esqueça quantos Ctrl + Zs (desfazer) você precisa em quais arquivos para voltar ao estado de funcionamento.
- Você pode ter várias pessoas trabalhando nisso separadamente em seus próprios computadores e não ter ideia de como integrar os dois versão do projeto.
Um codificador n00b pode sugerir o uso do Dropbox para compartilhar e sincronizar projetos de código, e se você “Se você está trabalhando nisso, pode ser uma solução decente. No entanto, você ainda enfrentará o segundo problema na lista acima e fica realmente louco quando várias pessoas estão tentando trabalhar na mesma base de código simultaneamente.
Git (e antigamente, SVN e Mercurial para descolados) são usados para “criar versões” do seu código. Observe que git não é github. Ou seja, você pode fazer alterações, colocá-los “upstream” para as interwebs, onde são armazenados permanentemente em seu “repositório” (de graça). Git também é puramente um utilitário de linha de comando, o que significa que você tem que abrir uma daquelas telas de hacker de aparência assustadora em seu desktop e digitar comandos para usá-lo. Não é trivial de usar. O Github se integra com o git e permite que você veja os repositórios que você enviou para o upstream e fornece um monte de GUIs para fazer tarefas git (comportando-se como um aplicativo normal em seu computador). Você pode navegar nas suas bases de código (repositórios) na Internet a partir do seu navegador, fazer alterações, reverter as alterações para o último ponto de verificação (confirmação) e assim por diante.
O Github sempre forneceu repositórios gratuitos que eram públicos – o que significava que qualquer pessoa poderia ver seu código e usá-lo (sim, existem licenças de código aberto, mas você sabe o que quero dizer). Essencialmente, se você tivesse que trabalhar muito para projetar alguma merda incrivelmente legal e reinventar a Ciência da Computação, seu amigo poderia simplesmente pegar seu código e usá-lo em seu próprio site. Agora, com o pacote educacional, você pode obter 5 repositórios privados gratuitos (embora o Github tenha fornecido esse serviço para alunos .edu antes). Acesse os tutoriais online e descubra como configurar um repositório github privado para o código do seu site.
2. Obtenha seu grátis Namecheap .me domain
Por muito tempo, o único vendedor de domínio que conheci foi GoDaddy. O nome sempre me pareceu duvidoso, embora acabasse cedendo ao fato de comprar um domínio lá. Agora, na era das startups, temos uma alternativa melhor, mais limpa e mais barata – Namecheap.Namecheap sempre foi barato, mas agora você pode obter um domínio gratuitamente! Portanto, obtenha seu domínio firstnamelastname.me agora gratuitamente, antes que seu nome comum seja roubado (se ainda não for). E tente não voltar atrás para os dias de e-mail dos anos 90 e compre um raj2kul4skul.me . Não faça isso. Por favor. A única pessoa que vai impressionar são os amigos sem os quais você está melhor.
Eu mencionei que é grátis?
3 . Obtenha Namecheap SSL [opcional]
Isso é opcional, e eu ainda não comprei no meu site (porque ainda custa dinheiro no GoDaddy). SSL (Secure Sockets Layer) é uma coisa bonita isso basicamente significa que seu conteúdo da web pode ser veiculado “com segurança”. Você também obtém aquele cadeado verde legal em seu site, tem um site https , em vez de http, e sinta-se muito legal e autêntico:
Sem ser muito técnico, o que você precisa saber é que – isso não é estritamente necessário para o seu site pessoal, onde eu duvido que você estará fazendo coisas que exigem segurança estrita. No entanto, se você está aprendendo coisas sobre a web, também pode. Afinal, é grátis?
4. Configure Digital Ocean hospedagem.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap é para GoDaddy como DigitalOcean é para HostGator – uma inicialização mais legítima, mais barata, melhor projetada e mais fácil de usar alternativa. Quando você compra um domínio, o que ele servirá (mostrará) ao usuário? Seu site, certo? Mas você não pode simplesmente dizer pegue esses arquivos no meu computador e mostre a eles. Bem, você pode, e é assim. Com o DigitalOcean, você obtém “hospedagem” gratuita. A DigitalOcean chama uma instância de hospedagem de “gota”.
Isso significa que você pode enviar seu site para uma máquina virtual (leia-se: um computador) e informar seu nome de domínio para veicular o conteúdo desse computador. Sem entrar em muitos detalhes, muitas coisas acontecem no meio que a DigitalOcean deve cuidar – coisas como configurar e escolher um servidor da web – nginx ou Apache e solicitações de roteamento em seu domínio especificamente para seu conjunto de arquivos.
5. Fazer o site real.
Agora vamos à parte “escrever algum HTML”. Fazer um site tem vários graus de dificuldade – de mostrar o envie “Hello World” em Arial para criar um Facebook ou Google. Normalmente, um int aplicativos erativos que requerem dados e contêm estados são difíceis de fazer.
O que você provavelmente fará é criar um site estático (um monte do mesmo texto / imagens que são veiculados para todos o tempo todo). Isso é muito mais fácil. Provavelmente não e não posso escrever um tutorial completo para isso, mas o que os estudantes universitários geralmente fazem é aprender e usar as seguintes coisas –
- HTML – este é o conteúdo real de texto / links / imagens / vídeos
- CSS – isso faz com que o conteúdo acima pareça bonito
- Javascript (JS) – permite elementos dinâmicos e animações bonitas. Suponha que você queira fazer um botão que carregue uma imagem que não era em seu HTML ou adicione conteúdo dinamicamente a seu HTML. Então, você usa JS. Uma breve história – JS foi hackeado há cerca de 10 dias e contém muitos bugs, e pode ser muito prolixo e complicado se você escrever muito. Normalmente, um iniciante usaria uma biblioteca como o jQuery para torná-lo menos prolixo e fácil (embora o jQuery também possa parecer intimidante no início com todos os seus sinais $).
- Bootstrap – Bootstrap é uma estrutura de front-end go-to feita pelo Twitter. O HTML bruto vem com coisas de aparência padrão bastante ruins. O botão HTML não é apresentável, e escrever CSS para ele leva tempo e experimentação (quero dizer, vamos ser reais – ninguém REALMENTE “conhece” CSS). Bootstrap envolve baixar alguns arquivos, adicionar uma linha ao seu HTML e talvez ler alguns documentação e adicionando algumas classes CSS que eles fornecem – e pronto! Seu site não apenas parece automaticamente muito mais bonito, mas também pode ser compatível para dispositivos móveis (novamente, um esforço não trivial).
6. Colocando seu site online (implantação) Assim que terminar de criar e testar seu site localmente (em seu próprio computador), ativando seu host local (servidor da web local – google.Talvez você não precise disso para sites estáticos), e teste e se misture com seu CSS usando as muito úteis Ferramentas do desenvolvedor do Chrome, e estiver satisfeito com sua saída, você pode ir para o Digital Ocean, compactar seu site e enviá-lo para seu servidor. Se você fez tudo certo, aguarde alguns segundos e vá para firstnamelastname.me e deverá ver seu conteúdo. E todo mundo deveria ser capaz também.
7. Tornando seu ótimo site pesquisável (SEO)
Uma última etapa é SEO – otimização de mecanismo de pesquisa. O objetivo final é ter um nome incomum e colocar seu site entre os principais resultados quando alguém pesquisar seu nome no Google. Isso pode levar algum tempo (mas pode ser feito agora com um custo monetário). Existem várias maneiras de fazer isso e você pode pesquisar no Google para todas elas. Existem maneiras de associar seu Facebook a ele, sua antiga conta do G + que você nunca usa com ele, adicionando metadados personalizados para aparecer em sua Pesquisa Google , etc. etc. Em última análise, dentro de várias semanas, a menos que seu nome seja extremamente comum ou infelizmente igual ao de uma pessoa famosa, você deve ser um dos poucos resultados principais no Google.
Coisas diversas que você deve saber
Sobre tomar atalhos para fazer uma página bonita: Dependendo de quanto trabalho você deseja colocar em seu site, você pode sempre pegar um modelo de bootstrap prático online ou criar manualmente suas próprias classes CSS, se quiser um visual único, ou até mesmo mantê-lo simples e ir para HTML / CSS básico (que é o que um grande número de acadêmicos faz). Por exemplo, Jon Kleinberg “s Homepage .
Sobre não ter que saber PHP e outras coisas sofisticadas: como você está projetando um site estático, não há conhecimento de coisas sofisticadas como criar um back-end, criar muitas páginas e ter bancos de dados. Sim, estou falando com você, todos os pessoas que querem usar PHP e MySQL sem um bom motivo (mesmo se você precisar, tente ficar longe do PHP). Há um monte de excelentes estruturas de back-end por aí destinadas a criar outros tipos de sites complicados de Ruby on Rails (em Ruby) a Django (em Python) para Play! (em Java e Scala) leves como CherryPy (em Python) ou Flask (em Python). Na verdade, existem estruturas para quase todas as linguagens que você pode imaginar – Comparação de estruturas de aplicativos da web , mas não se esgote usando / aprendendo sobre elas ainda.
Outras coisas a considerar adicionar ao seu site: Outras coisas que você pode querer fazer no seu site pessoal –
- Comprima suas imagens se você usar muitas delas, seu site levará muito tempo para carregar.
- Use plug-ins sociais do Facebook / Quora / Twitter
- Adicione o Google Analytics (na verdade, é quase obrigatório). O Google Analytics permite que você veja, entre muitas outras coisas, quantas pessoas estão visitando seu site, de onde são, etc. É um bom motivador (espero) para atualizar seu site e mantê-lo atualizado. Além disso, é muito fácil de usar – envolve apenas copiar e colar algumas linhas de código em sua página.
- Reduza seus scripts. Muitos JS e CSS de um site ainda podem ser visíveis para qualquer pessoa que visite seu site. Se você pensa você fez algo terrivelmente interessante que deseja ocultar, reduza seu JS / CSS. Caso contrário, isso arruína o propósito de ter um repositório privado. Além disso, torna seu site mais rápido.
- Criptografe seu HTML . Novamente, se você realmente não quiser que as pessoas vejam como você fez seu site, há maneiras de criptografar seu HTML para que mesmo clicando no botão “Exibir código-fonte” sua página da web não revele nada de interessante.
Ao escrever esta resposta: Muitas pessoas perguntam sobre como fazer seu próprio site. Achei que seria útil escrever um pequeno tutorial curto (discutível) e fácil de entender para ajudar a todos. É realmente uma daquelas coisas fáceis para as quais você precisa se concentrar. Ah, e eu mencionei que agora é grátis?