Como Hospedar Um Site Estático (como este)?
Neste artigo irei mostrar como hospedar um site estático (como este que você está lendo).
A grande vantagem é que você não precisa se preocupar com servidores ou criar uma aplicação completa com banco de dados.
Tudo funciona com alguns arquivos .html e .md (markdown).
O que vamos precisar?
- GCC e Make (
gcc -v,g++ -vemake -v) - Ruby
- RubyGems
- Jekyll (gerador de sites)
- Github, Firebase ou outro hosting estático
Jekyll: Nossa tecnologia principal
O Jekyll é um gerador de sites estáticos de código aberto escrito em Ruby. Ele foi projetado para simplificar a criação de blogs, sites pessoais e projetos web simples. A principal ideia por trás do Jekyll é transformar texto escrito em formato Markdown, junto com layouts e templates, em um site estático.
Ao contrário dos sistemas de gerenciamento de conteúdo (CMS) dinâmicos, como o WordPress, que geram páginas web sob demanda a partir de um banco de dados, o Jekyll pré-renderiza as páginas do site durante o processo de construção. Isso resulta em um site estático que pode ser hospedado em qualquer servidor web tradicional, pois não requer suporte a linguagens de servidor ou bancos de dados.
Desenvolvedores e blogueiros muitas vezes apreciam o Jekyll por sua simplicidade, desempenho rápido e a capacidade de versionar facilmente o conteúdo do site usando sistemas de controle de versão, como o Git. Além disso, o Jekyll é a base por trás do GitHub Pages, uma plataforma de hospedagem gratuita para páginas web estáticas vinculadas a repositórios do GitHub.
Pré-requisitos de instalação
MacOSX
Para instalar o Jekyll no macOS, você precisa de um ambiente de desenvolvimento Ruby adequado. Embora o macOS venha pré-instalado com o Ruby, não recomendamos o uso dessa versão para instalar o Jekyll.
Em vez disso, você precisará instalar uma versão separada e mais recente do Ruby. Recomendamos chruby porque é o mais simples e menos provável de causar problemas.
1. Instale o Homebrew
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. Instale o chruby e o Ruby mais recente
Instalando o chruby e ruby-install com Homebrew:
1
brew install chruby ruby-install xz
Instale a última versão estável do Ruby:
1
ruby-install ruby
Vai demorar! Então espere para adicionar ao seu shell o chruby (irei usar o zshell):
1
2
3
echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.2" >> ~/.zshrc # run 'chruby' to see actual version
Reinicie o terminal e verifique a versão ro Ruby:
1
2
ruby -v
# ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin23]
Deve retornar ruby 3.1.2p20 ou uma versão mais recente.
3. Instalando o Jekyll
1
gem install jekyll
Windows
Para instalar o Ruby no Windows, a maneira mais simples é utilizando o RubyInstaller - use a versão Ruby+DevKit.
Após a instalação, marque a opção MSYS2 and MINGW development tool chain.
Quando a instalação for concluída, teremos no path o Ruby disponível.
A saída deve ter algo como: ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x64-mingw-ucrt]
Instalando o Jekyll pelo Prompt de Comando
Abre uma novo cmd e execute:
1
gem install jekyll bundler
Pronto! Agora o Ruby, Jekyll e Bundler estão disponíveis no Windows.
Criando um novo site
Acesse o repositório do tema Chirpy e crie um novo repositório a partir do Template disponível no github clicando em Use this template.
Faça o clone do site e execute do diretório raiz o comando:
1
bundle
Subindo a Aplicação
Localhost
1
bundle exec jekyll s -- port 4001
O host irá aparecer em localhost:4001
Se não especificar a porta, o padrão será 4000
Produção
O Jekyll irá construir os arquivos html, css e js no diretório _site.
1
JEKYLL_ENV=production bundle exec jekyll b
Staging
Antes de subir ao hosting é possível testar o site. Para isso será necessário simular o diretório como uma path http - com o python http.server, podemos fazer:
1
2
cd _site
python3 -m http.server --directory .
O host irá aparecer em localhost:4000
Deploy no Firebase
Para hospedar o projeto nos servidores Firebase primeiro crie um projeto Firebase em firebase.com
Siga o passo a passo inicial para criar um projeto e instale o firebase cli.
1
sudo npm install -g firebase-tools
Com o CLI pronto, inicie uma sessão pelo terminal.
1
firebase login
Agora crie um projeto firebase.
1
firebase init
Nas opções, escolha o Hosting. Quando perguntar qual será a pasta public que o firebase deve escolher a pasta _site.
Execute o deploy a partir do diretório root do projeto.
1
firebase deploy
Adicionando um domínio personalizado
No menu Hosting, Add Custom Domain é possível configurar um domínio personalizado.
O SSL pode demorar até 24 horas para ativar.
