0Pricing
Linux Server Deployment & SSH Mastery · Aula

Hospedagem de Sites Estáticos

Configure o servidor web escolhido para fornecer arquivos estáticos HTML, CSS e JavaScript, tornando seu primeiro site acessível.

Hospedagem de Sites Estáticos é uma aula grátis de Linux Server Deployment & SSH Mastery no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Linux Server Deployment & SSH Mastery, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Linux Server Deployment & SSH Mastery inclui 4 aulas no total.

O que são websites estáticos?

Boas-vindas! Nesta lição, vamos aprender a colocar seu website simples no ar.

Um website estático é composto por arquivos como HTML, CSS e JavaScript, entregues ao navegador do usuário exatamente como estão armazenados no servidor.

  • Não há processamento no servidor (como PHP ou Python).
  • É rápido, seguro e fácil de hospedar.
  • É perfeito para portfólios, blogs ou sites informativos simples.

Criando seu primeiro arquivo HTML

Vamos criar um arquivo index.html muito simples. Ele será a página principal do nosso website estático.

Normalmente, você criaria esse arquivo no seu servidor, por exemplo, usando um editor de texto como nano ou vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

Adicionando CSS e JavaScript

Nosso arquivo HTML faz referência a style.css e script.js. Vamos criar esses arquivos também para concluir nosso site básico.

Esses arquivos ficarão no mesmo diretório que o nosso index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Configurando o diretório web

Precisamos de um local dedicado no servidor para armazenar esses arquivos do website. Um local comum é dentro de /var/www/.

Primeiro, crie um diretório para o seu website. Depois, copie para ele os arquivos index.html, style.css e script.js.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: noções básicas do bloco de servidor

O Nginx usa blocos de servidor (semelhantes aos Virtual Hosts do Apache) para definir configurações de websites específicos.

Cada bloco de servidor escuta solicitações em uma porta (como a 80 para HTTP) e responde com base no nome de domínio.

  • Geralmente ficam em /etc/nginx/sites-available/.
  • São ativados com a criação de um link simbólico para /etc/nginx/sites-enabled/.

Nginx: diretivas root e index

Dentro de um bloco de servidor, duas diretivas importantes informam ao Nginx onde encontrar seus arquivos:

  • root: especifica o caminho absoluto para os arquivos do seu website. É nesse local que o Nginx procurará o conteúdo.
  • index: define o arquivo padrão que o Nginx deve disponibilizar quando um diretório é solicitado (por exemplo, quando alguém acessa yourdomain.com/, o Nginx procura index.html).

Nginx: configuração completa de um site estático

Veja uma configuração completa de bloco de servidor do Nginx para nosso site estático. Salve-a como /etc/nginx/sites-available/mywebsite.conf.

Lembre-se de substituir your_domain.com pelo seu domínio real ou pelo IP do servidor.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: equivalente ao Virtual Host

Se você estiver usando o Apache, o conceito é semelhante com os Virtual Hosts. Você criaria um arquivo de configuração (por exemplo, /etc/apache2/sites-available/mywebsite.conf).

As principais diretivas são DocumentRoot (como o root do Nginx) e DirectoryIndex (como o index do Nginx).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Ativando e recarregando seu servidor

Depois de criar seu arquivo de configuração, você precisa ativá-lo e recarregar o servidor web para que as alterações entrem em vigor.

  • Para o Nginx: crie um link simbólico e recarregue o serviço.
  • Para o Apache: ative o site e recarregue o serviço.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Testando seu website no ar

Excelente trabalho! Seu website estático agora deve estar acessível.

Abra o navegador web e acesse o endereço IP do seu servidor ou o nome de domínio que você configurou.

Você deverá ver a mensagem "Hello CoddyKit!"!

Verificação rápida: diretivas do Nginx

Considere o seguinte trecho de bloco de servidor do Nginx:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Se um usuário acessar http://example.com/, qual arquivo o Nginx tentará disponibilizar primeiro?

Recapitulação: hospedando sites estáticos

Você aprendeu a hospedar um website estático com sucesso!

Vimos:

  • A criação de arquivos básicos de HTML, CSS e JS.
  • A configuração de um diretório dedicado para o conteúdo do seu website.
  • A configuração de blocos de servidor do Nginx (ou Virtual Hosts do Apache) usando root/DocumentRoot e index/DirectoryIndex.
  • A ativação e o recarregamento do servidor web.
  • O teste do seu website no ar em um navegador.

Em seguida, vamos explorar a configuração de hosts virtuais para hospedar vários websites em um único servidor!

Perguntas Frequentes

A aula “Hospedagem de Sites Estáticos” é grátis?

Sim — o texto completo de “Hospedagem de Sites Estáticos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Linux Server Deployment & SSH Mastery, atualize para CoddyKit PRO. O curso de Linux Server Deployment & SSH Mastery inclui 4 aulas no total.

O que vou aprender em “Hospedagem de Sites Estáticos”?

Configure o servidor web escolhido para fornecer arquivos estáticos HTML, CSS e JavaScript, tornando seu primeiro site acessível. Você pratica Linux Server Deployment & SSH Mastery com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Linux Server Deployment & SSH Mastery?

Nenhuma experiência prévia é necessária. Linux Server Deployment & SSH Mastery no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Hospedagem de Sites Estáticos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Linux Server Deployment & SSH Mastery?

Sim. Cada aula de Linux Server Deployment & SSH Mastery inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Instalação do Nginx/Apache
  2. Hospedagem de Sites Estáticos
  3. Configuração Básica de Hosts Virtuais
  4. Habilitando HTTPS com Let's Encrypt
← Voltar para Linux Server Deployment & SSH Mastery