Hospedando sites

Uma dúvida que pode surgir na cabeça de alguém que está começando a aprender HTML, CSS & cia. é como transformar aqueles arquivos .html todos em páginas que qualquer pessoa pode acessar.
Eu havia escrito dois textos sobre isso faz alguns anos, mas ambos estão ultrapassados, o que me levou a reciclar algumas coisas e escrever esse guia prático, voltado para iniciantes.

1. O arquivo index.html

Geralmente os servidores (assunto do item 2) entendem que arquivos com nome “index.html” é aquele que contém os códigos da página inicial do site.

A diferença prática de saber isso é a seguinte: suponha que o endereço do seu site seja “www.meusite.com” e que você tenha o código da sua página inicial pronto. Então você salva como “index.html” e em seguida faz uma cópia desse arquivo e dá o nome de “pagina.html”.
Se você fizer upload de “pagina.html” no servidor do seu site, para visualizar o resultado você precisará visitar o endereço “www.meusite.com/pagina”. Caso o upload seja do arquivo “index.html”, o resultado poderá ser visto em “www.meusite.com” mesmo.

Assim, segue o código da minha página inicial:

<html>

<head>
<title>Página inicial</title>
</head>

<body>
<br/>
<h5 style="text-align: center;">Teste</h5>
</body>

</html>

2. O serviço de hospedagem

Depois de ter escrito o código da sua página o desafio é encontrar um serviço de hospedagem razoável. Existem muitos, para todos os gostos e bolsos.

Entre as opções gratuitas eu comecei usando o Orgfree, e depois de testar pelo menos cinco outras opções eu classifico o Free Hosting como (de longe) o melhor serviço de hospedagem gratuito que eu já usei.
Contudo pra quem está começando e tem projetos/ideias mais simples, a diferença entre eles não é significativa.
Assim, eu vou usar uma antiga conta minha no Orgfree para exemplificar o processo. A dinâmica geral do processo é parecido em todos os serviços.

Para criar uma conta no Orgfree basta acessar o endereço http://www.freewebhostingarea.com/ e digitar o nome que você quer que seu site tenha no campo “Free subdomain hosting” seguido de um sufixo característico de domínios grátis.

screen1
Neste caso o domínio escolhido foi “radiatamangabr” e o subdomínio foi “orgfree.com”

“Domínio” é uma outra maneira de se referir ao endereço principal, digamos, de um site. De modo prático, o domínio de um site pode ser visto como o trecho comum de todos os endereços do site, por exemplo:

 

– http://radiatamangabr.orgfree.com/manga/volume2
– http://radiatamangabr.orgfree.com/missoes/preguerra
– http://radiatamangabr.orgfree.com/recrutamento

Nesse caso o domínio do site “Radiata Stories Mangá Br” é “radiatamangabr.orgfree.com”.

Eu todo caso, assim que você escolher os nomes todos e clicar em “PROCEED”, será redirecionado para uma página de criação de senha. Feito isso em algum momento surgirá uma página com todas as informações de login.
Recomendo bastante que essa página seja salva em um arquivo pdf ou coisa do tipo.

O login é feito no endereço http://orgfree.com/. Na área de administração, clique em “File Manager”

screen2

A área seguinte é praticamente uma segunda tela de login, a diferença é a necessidade de inserir o servidor FTP, que foi informado assim que a conta foi criada, mas que na prática é só o subdomínio escolhido.

Finalmente a próxima página é onde de fato ficam os arquivos que compõem o site.

screen3

Cada pasta é um subdiretório do site, por exemplo: supondo que seu site se chame “meusite.com” e você adiciona uma pasta chamada “natureza” e nessa pasta adiciona dois arquivos, “amazonia.jpeg” e “poluicao.html”. Então o endereço da imagem será “meusite.com/natureza/amazonia.jpeg” e sua página sobre poluição estará em “meusite.com/natureza/poluicao”.

No entanto o objetivo agora é fazer o upload do arquivo que vai dar origem à página inicial do site, então  basta clicar em “Upload” e escolher “index.html” e clicar no certinho verde.

screen5

3. Filezilla (opcional)

Talvez tenha ficado a impressão de que é preciso passar por muitas etapas para simplesmente conseguir deixar as páginas online. Realmente, para adicionar uma página foi preciso seguir o seguinte caminho:

Login -> Conta -> Login FTP -> Área FTP -> Janela de Upload -> Janela de seleção de arquivo do sistema -> Janela de confirmação

Uma maneira de simplificar o a vida é usar os chamados clientes FTP. Um cliente FTP serve como uma espécie de intermediário entre você e o servidor, o que acaba te livrando de algumas das etapas acima.
O cliente FTP que eu sempre usei é o Filezilla e é ele que vou usar para mostrar como funciona esse tipo de programa.

Para baixar o Filezilla para Windows, clique aqui. Para Ubuntu (e demais distribuições Linux, creio eu) o programa está disponível na Central de Programas.

print2

Este é o Filezilla para Ubuntu 10.04. Na parte superior se encontram os campos “host”, “usuário” e “senha” (além de proxy, que eu sempre deixo em branco). Para acessar sua pasta FTP basta preencher os campos com os mesmos dados usados para acessar o diretório FTP pelo navegador.

print3

O programa fará algumas verificações e em instantes estará pronto fazer transferências de arquivos.

A princípio pode parecer meio confuso, mas a estrutura do programa é bem simples.
O quadro superior exibe os processos, protocolos e erros.
O quadro abaixo de “site local” serve para acessar os diretórios do sistema pelo programa, permitindo realizar as transferências de arquivos arrastando-os para a área abaixo de “site remoto” que por sua vez exibe as pastas e arquivos do seu site. Arrastar um arquivo para essa área  dará início ao upload dele na pasta escolhida.
O quadro inferior exibe o status das transferências de arquivos, exibindo progressos, sucessos e falhas.

Anúncios

Comentário:

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s