---
title: 'Intervalo: instalar um servidor local'
summary: 'Aprenda a rodar um servidor web no seu computador — um programinha que finge ser a internet, para testar o site com recursos mais poderosos.'
permalink: 'intervalo-instalar-um-servidor-local/'
originalPath: /intermission-installing-a-local-web-server/
tags: chapter
layout: 'chapter.njk'
---
# Intervalo: instalar um servidor local
HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.
Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.
O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.
Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um *servidor web local* é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.
Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.
## URLs relativas e URLs absolutas
Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe `..` para “subir” um nível e achar a página de destino.
Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o *nível mais alto* é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.
```html
Go to the homepage
```
A barra representa o nível mais alto (eu também poderia ter escrito `/index.html`, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página `about.html`, faria assim.
```html
Go to the About page
```
O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.
```html
My blog post
About
About
```
A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do *computador inteiro*. Com certeza não era isso que a gente queria.
Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.
## Opções de servidor web
Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.
- [Visual Studio Code (multiplataforma)](#visual-studio-code-multiplataforma)
- [macOS](#macos)
- [Windows e multiplataforma](#windows-e-multiplataforma)
- [Python e PHP (multiplataforma)](#python-e-php-multiplataforma)
## Visual Studio Code (multiplataforma)
A Microsoft publica uma extensão do VS Code chamada [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.
Depois de instalar, você vai notar a opção *Show Preview* quando clicar com o botão direito num arquivo.
Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em *Open in Browser* no menu da barra de endereço.
## macOS
Eu uso Mac, então posso recomendar de coração o ótimo aplicativo [WorldWideWeb](https://iconfactory.com/worldwideweb/). É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.
O funcionamento é assim: você aponta a pasta do site e clica no botão de play.
Quando você clica no play, o site fica disponível em algum endereço. Clique em *Open Browser* para abrir essa URL no navegador padrão.
E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.
## Windows e multiplataforma
Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.
Caso contrário, experimente o [Simple Web Server](https://simplewebserver.org/). Depois de instalar, clique no botão para criar um servidor novo.
Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.
Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.
{% aside 'Observação' %}
O Simple Web Server é multiplataforma e também funciona no macOS e no Linux. Dito isso, eu recomendo o WorldWideWeb para quem usa Mac, a menos que você precise de vários servidores rodando ao mesmo tempo.
{% endaside %}
## Python e PHP (multiplataforma)
Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.
### Python
Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à [página de downloads do Python](https://www.python.org/downloads/) e baixe o instalador do seu sistema (pegue a versão 3).
Abra uma janela do terminal e use `cd` para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.
```bash
python3 -m http.server
```
Isso deixa o site disponível em `localhost`, na porta que ele indicar (em geral 8000). Então o endereço do site fica `http://localhost:8000`.
### PHP
Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, [o PHP é útil para reutilizar pedaços de HTML](/html-reutilizavel-com-php) (tipo o menu de navegação) em várias páginas.
Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.
```bash
php -S localhost:8000
```
Isso deixa o site disponível em `http://localhost:8000`.
## A seguir
Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!