---
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 é).