Do zero à internet: seu primeiro site

Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web.

Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora.

Passo 1. Crie uma pasta no seu computador

Escolha um lugar no seu computador e crie uma pasta. Chame de my-site ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.)

Captura de tela de uma janela do explorador de arquivos. No painel esquerdo, a pasta "Websites" está selecionada. No painel direito, a pasta "my-site" aparece dentro da pasta "Websites".

Passo 2. Crie o index.html

Por convenção, a página inicial de um site é o index.html. Você pode ter outras páginas (como about-me.html ou o que quiser). Mas isso fica para depois.

Para criar o index.html, abra o TextEdit no Mac ou o Bloco de Notas no Windows.

Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta:

My name is Blake. I enjoy making websites and teaching others to do the same.

Agora salve este arquivo. Chame de index.html e coloque na pasta my-site que você criou no passo 1.

Uma janela de editor de texto mostrando o conteúdo de um arquivo chamado "index.html". O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same."

Passo 3. Veja a prévia do seu site

Você pode abrir o site dando um clique duplo em index.html. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em File > Open File… e navegue até o seu arquivo index.html.

Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o mundo.

Não se preocupe com a aparência. Vamos cuidar disso depois.

Uma janela de navegador mostra uma página simples, com texto preto em fundo branco. O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same." O endereço na barra é um caminho de arquivo local.

Passo 4. Publique o seu site

Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o Neocities.

Outras hospedagens

Neste livro, vou usar o Neocities como exemplo. Mas quero citar algumas alternativas, caso alguma te agrade. A maioria oferece a opção de arrastar a pasta do seu site para a página delas e começar o serviço.

Netlify Drop: Mais sofisticado que o Neocities, mas tem o recurso de arrastar e soltar a pasta para publicar. Também oferece recursos mais voltados para quem desenvolve.
static.app: Eu não tenho experiência pessoal com este. Mas parece um serviço direto, parecido com o Netlify Drop. O plano grátis dá um subdomínio (o pedaço do endereço que vem antes do nome principal) e 1 site gratuito.
Tiiny: Oferece um processo parecido com os serviços acima, com suporte a mais formatos além de um site. Eu também não tenho experiência pessoal com este serviço.
CodePen: O CodePen deixa você criar um site direto no navegador. É parecido com usar um editor de código no computador, mas os arquivos ficam no CodePen. Você trabalha até ficar pronto e depois publica na internet. Você ganha três arquivos/páginas de graça. E eles oferecem uma assinatura para aumentar bastante esse limite.
Yay.boo: Nome bobo, publicação de site sem esforço. Você só arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O Yay.boo não está aceitando cadastros no momento. Eles podem voltar em breve.

Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num subdomínio em YOURNAME.neocities.org — o YOURNAME vem antes de neocities.org. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, dndfanpage).

Quando a conta estiver criada, vá ao painel do seu site. Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o index.html do seu computador para o painel do Neocities. Isso vai substituir o index.html que já está lá.

Captura de tela do painel do Neocities mostrando um site chamado "My Cool Website" do usuário blakewatson. A interface tem opções para criar um arquivo novo, uma pasta nova ou enviar arquivos, além de informações sobre uso de armazenamento e atividade do site.

Feito isso, clique no link do seu site no topo do painel.

Parabéns, você acabou de fazer um site! 🎉

A seguir

No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).