--- title: 'Do zero à internet: seu primeiro site' summary: 'Crie uma página extremamente simples do zero usando o Bloco de Notas e coloque-a na internet com o Neocities.' permalink: 'do-zero-a-internet-seu-primeiro-site/' originalPath: /zero-to-internet-your-first-website/ tags: chapter layout: 'chapter.njk' --- # 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. {% aside 'Observação' %} Dá para fazer um site no celular ou no tablet. Mas é bem mais comum fazer no computador. Por isso, é o que vamos usar neste livro. Mesmo assim, o que você vai aprender também vale em outros contextos. Uma coisa linda da web é que existem muitos jeitos de criar nela. {% endaside %} ## 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.) {% aside 'Observação' %} Precisa de ajuda para criar uma pasta? Veja como fazer em alguns sistemas comuns. - [Criar uma pasta no Windows](https://perma.cc/H5YD-7W8S) - [Criar uma pasta no macOS](https://perma.cc/X9RD-T6RH) - [Criar uma pasta no Ubuntu Linux](https://perma.cc/B7LV-XXD5) Com o tempo, você provavelmente vai criar vários sites. Se quiser, já pode criar uma pasta `sites` e colocar `my-site` dentro dela. {% endaside %} {% aside 'Observação' %} As capturas de tela deste livro são do original em inglês. O passo a passo vale igual no português. {% endaside %} ![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".](/assets/img/zero-to-internet-01.webp) ## 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. {% aside 'Quem usa Mac' %} Sites devem ser _texto simples_, então precisamos pedir isso ao TextEdit. Clique em _Format_ na barra de menus e escolha _Make Plain Text_. Depois abra as configurações do TextEdit, clique na aba Open and Save e marque a caixa _Display HTML files as HTML code instead of formatted text_. Já que você está aí: se quiser que o TextEdit use texto simples sempre, escolha _Plain text_ na aba New Document, na seção Format. {% endaside %} Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta: ```html 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."](/assets/img/zero-to-internet-02.webp) {% aside 'Observação' %} Quando você faz sites, é essencial ver as extensões de arquivo — a parte do nome que vem depois do ponto, como `.html`. Se você não as vê, veja como fazer o [Windows](https://perma.cc/3LAG-L6YW) ou o [Mac](https://perma.cc/KYR3-6H3L) mostrá-las. {% endaside %} ## 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.](/assets/img/zero-to-internet-03.webp) ## 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](https://neocities.org). {% aside '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](https://app.netlify.com/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](https://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](https://tiiny.host/):** 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](https://codepen.io/):** 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](https://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. {% endaside %} 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](https://neocities.org/dashboard). 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.](/assets/img/zero-to-internet-04.webp) 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 é).