2523 4/9/2015

Uma parceria com:

Está na hora de você aprender Photoshop!

Deixe seu nome e e-mail que te informamos logo logo quando ele estiver pronto
Valorizamos sua privacidade. Seu e-mail não será compartilhado com terceiros!

WordPress: Hospedagem Gratuita Usando Heroku

Heroku e WordPress

Após procurar bastante a melhor forma (leia-se: barato e rápido) de hospedar um site WordPress hoje em dia, cheguei a conclusão que a PaaS (Platform as a Service – Plataforma como Serviço) Heroku é a melhor alternativa. A possibilidade de criar aplicativos gratuitos que rodam em computadores bem rápidos, juntamente com a facilidade de escalá-lo e adicionar recursos, faz desse sistema o alvo ideal para quem busca não só bons preços como qualidade.

O Heroku é um sistema altamente confiável que simplifica a vida de quem está querendo por online sites ou aplicativos que rodam com velocidade e segurança. Antigamente este sistema só aceitava programas desenvolvidos na linguagem Ruby, mas há poucos anos atrás essa situação mudou com a adição do suporte para um número muito maior de tecnologias. Php, linguagem que o WordPress usa, foi uma dessas linguagens adicionadas e, não surpreendentemente, nosso querido administrador de conteúdo já está podendo rodar com tranquilidade.

Obs: Este site está hospedado usando uma configuração muito próxima da que vou passar nesse tutorial.

Antes de começar

Naturalmente, temos que lembrar que há alguns pontos que podem afastar algumas pessoas:

1- Se você quiser escalar seu aplicativo, terá que pagar um valor alto.

2- Quem nunca teve contato com os termos: Prompt de Comando e Git, terá que dedicar um tempinho para se familiarizar com os sistemas.

3- Não é possível adicionar ou atualizar arquivos, plugins ou temas diretamente no WordPress.

Contudo, todas essas três questões são muito simples de resolver:

1- Provavelmente, quando você chegar ao nível de escalar, já deve estar ganhando um dinheiro com seu site; mas se não tiver, pode mudar para outro sistema de hospedagem muito facilmente já o que o WordPress conta com recursos de migração muito simples.

2- Explicarei detalhadamente os processos aqui, então mesmo que não entendam o que estão fazendo, conseguirão por o site online sem problemas.

3- Todos os temas e plugins serão adicionados localmente (no seu computador) e, então, enviados para o servidor . Quando houver uma atualização, é só baixar o arquivo no seu computador, trocar na pasta de instalação e mandar para a nuvem. Já quanto as imagens e arquivos que adicionarem nos posts, portfólios, artigos, etc, utilizaremos um plugin chamado Amazon S3 and Cloudfront que enviará todos os arquivos para um armazenamento nos servidores da Amazon S3, que são gratuitos por um ano e não mais do 3 reais por mês após isso (a não ser que você esteja colocando vídeos imensos no seu site).

Requisitos

Para começar, devemos ter três contas já prontas para serem configuradas: Uma conta no Heroku, uma conta na Amazon Web Services e uma conta no Github. Se você já as tem, pode pular para a próxima etapa; caso contrário, abaixo estão as configurações.

Github

Entre na página principal do Github e logo à direita haverá um pequeno formulário para se registrar. O preencha com seus dados, entre na página inicial, agora já logado, e vá até a página de Set Up. Baixe o instalador, o execute e abra o Prompt de Comando; no cado do Windows, basta procurar por 'CMD' por 'Prompt' ou, no Mac, por 'Console'. Agora é só digitar:

Primeiro vamos configurar seu usuário:

git config --global user.name "<em>Your Name Here</em>"

E em seguida seu email:

git config --global user.email "<em>your_email@example.com</em>"

Heroku

Entre na página de registro de um novo usuário e adicione seu email. Confirme, preencha seus dados e, logo em seguida, você poderá fazer o download do "Heroku Toolbelt" para o seu sistema operacional ( Suporte para Windows, Mac e Linux). Baixe o aplicativo, o execute e abra o Prompt de Comando (ou Console).

heroku login

e ponha seu usuário e sua senha.

Amazon Web Services

Para terminar, a parte um pouco mais complicada. Entre no site da AWS e, logo em cima, clique em Cadastrar-se. Escolha um nome de usuário ou entre com sua conta se já for cliente de algum serviço oferecido pela Amazon. Continue o registro colocando seus dados até chegar no momento de informar seu cartão de crédito. Você não será cobrado se não utilizar os serviços além da cota gratuita no primeiro ano, então pode ficar tranquilo em adicionar um cartão. Informe seu número de celular, um robô da Amazon irá te ligar e informar um número. O digite no campo que aparecerá na tela e, finalmente, a conta estará concluída.

Acesse, agora, sua central do administrador, clique em 'Services' e escolha a opção 'S3′. Clique no botão azul 'Create Bucket', dê um nome para ele e agora só falta um pequeno detalhe para termos o site mais rápido e barato possível atualmente. Vamos criar uma Rede de Distribuição de Conteúdo (CDN) para poder facilitar o uso de nossas imagens e deixar o site bem rápido.

Na mesma central do administrador, agora clique na opção 'CloudFront' e, em seguida, no botão 'Create Distribution'. Deixa a opção 'Download' selecionada e continue no formulário. Onde estiver pedindo 'Origin Domain Name', escolha, pela lista que irá aparecer, seu Bucket que acabamos de criar no S3 e pode deixar o resto das opções como estão (a não ser que você queira que a URL que servirão suas imagens contenham o seu domínio, ex: boglr.com. Se quiser, siga os passos opcionais abaixo). Agora sim! Todos os pré-requisitos estão em ordem e agora é só instalar nosso WordPress.

Opcional DNS para URLs bonitas

Clique no ícone de informação de sua distribuição recém configurada e, na aba 'General', clique no botão 'Edit'. No campo 'Alternate Domain Names(CNAMEs)' entre com o seu domínio desejado (ex: media.boglr.com) e salve. Agora vá até seu provedor do domínio e altere as configurações do DNS. Crie um registro 'CNAME' que aponta a URL que indicou no passo anterior, 'midia.seudominio.com', para o nome de domínio especificado em sua distribuição ( Domain Name). Salve e, dependendo da hora, demora de 1 minuto até mais de duas horas (por experiência, de madrugada demora mais).

Instalando o WordPress

Seguiremos agora pelo método mantido por Mchung, cujo tutorial em inglês será repassado aqui. A primeira coisa a se fazer, no entanto, e entrar no repositório do projeto clicar no botão 'Fork' (o que isso fará é criar uma cópia desse repositório na sua conta). Entre no Prompt de Comando e digite a linha abaixo substituindo 'username' por seu usuário do github e 'myblog' pelo nome de seu site:

git clone git://github.com/username/wordpress-on-heroku.git myblog

Isso copiará o repositório para seu computador, então agora vamos entrar na pasta baixada com o comando:

cd myblog

e então começar a configurar nosso servidor com esse comando:

heroku create -s cedar

e este:

heroku config:add BUILDPACK_URL=https://github.com/mchung/heroku-buildpack-wordpress.git

Para terminar, envie o conteúdo da pasta para o servidor com o comando:

git push heroku master

Muito bem!! O blog já está pronto para ser usado e você pode testá-lo digitando:

heroku apps:open

O que foi feito com isso tudo resultou na configuração automática do servidor Nginx-1.3.11, do php-5.4.11, WordPress 3.5.1 (que é atualizado automaticamente toda vez ue você realiza o comando 'git push heroku master' para adicionar algo no seu blog (como veremos a seguir), o banco de dados MySQL, um sistema de envio de email a partir do WordPress chamado Sendgrid e o sistema de Cache 'Memcachier' para dar ainda mais velocidade.

Configurando o WordPress

Ao criar o aplicativo no Heroku, não pudemos escolher um nome para ele, então a primeira coisa que, provavelmente, você deverá querer é dar o nome de seu site. Podemos fazer isso com o seguinte comando:

heroku apps:rename newname

substituindo 'newname' pelo nome que quiser. Em seguida, adicione o seu domínio para configurar seu aplicativo a atender por ele:

heroku domains:add seudominio.com.br
heroku domains:add www.seudominio.com.br

Se aparecer uma mensagem de erro, você precisará verificar sua conta com um cartão de crédito, senão, continue.
Agora vá, novamente, até o provedor de seu domínio e crie um CNAME apontando o seu site 'seudominio.com.br' para 'nomedoseusite.herokuapp.com', naturalmente substituindo ambos pelos devidos nomes. Há uma forma opcional para configurar um aplicativo adicional bem interessante do Heroku chamado Zerigo DNS, que irá assumir a autoridade do seu domínio já facilitando a integração com o servidor.

Zerigo DNS

Vá até seu provedor do domínio e procure pela opção de mudar a autoridade do domínio selecionado. Você verá, normalmente, três campos com URLs parecidas. As troque, respectivamente, por:

a.ns.zerigo.net b.ns.zerigo.net c.ns.zerigo.net

Normalmente não há necessidade de esperar muito, mas se não funcionar, dê alguns minutos para que a alteração propague pelos servidores. Volta ao Prompt de Comando e digite:

heroku addons:add custom_domains:basic

caso ainda não tenha adicionado domínios ao seu aplicativo. Novamente, se aparecer uma mensagem de erro, confirme sua conta com um cartão de crédito.

heroku addons:add zerigo_dns:basic

para adicionar o Add-on ao seu site e, logo em seguida

heroku domains:add seudominio.com.br heroku domains:add www.seudominio.com.br

caso não o tenha feito ainda. Uma vez que configuramos anteriormente para apontar um sub-domínio 'midia.seudominio.com', é possível que tenhamos que refazer essa adição no Zerigo (algumas vezes seus registros são transferidos junto com a mudança de autoridade). Vá até a página de seus aplicativos no Heroku, escolha seu site e clique no Zerigo DNS. Quando abrir uma nova janela, pressione 'configure' e faça o procedimento parecido da adição do CNAME para o domínio da distribuição na Amazon CloudFront.

Agora que você já deixou seu site pronto para começar a adicionar temas e plugins, é exatamente isso que faremos.

Plugins

Baixe os plugins que desejar e os extraia do '.zip' para a pasta 'Seusite/config/public/wp-content/plugins' . Além disso, para fazer uso do sistema de distribuição e armazenamento na Amazon Web Services, você deverá baixar o ' Amazon S3 and CloudFront'. O sistema que estamos usando já vem com um plugin chamado 'Wpro' (WordPress Read Only), mas eu não acho que ele seja muito bom, então sugiro este outro. Além disso, outras sugestões que faço de plugins são:

Não é necessário, nem recomendado, usar plugins para fazer cache, como o W3 Total Cache ou o WP Super Cache, pois ele já está sendo feito pelo próprio Heroku (lembre de habilitar o plugin 'batcache manager').

Amazon S3 and Cloudfront

Configurar esse plugin é bem simples. Na página principal, 'configurações -> Amazon S3′, haverá dois campos para as chaves de sua conta e um link em cima para te levar à página da AWS para gerá-las. Siga o link, crie uma chave, copie os dois valores ('key' e 'secret') e siga para a próxima etapa. Agora é só escolher o seu Bucket, marcar todas as opções, exceto 'Bucket is setup for virtual hosting', adicionar o seu domínio (ou o domínio de seu CloudFront ou o CNAME 'midia.seudominio') e partir pro abraço.

Temas

Há diversos temas gratuitos pela internet, então achar algum que seja parecido com o que você quer não será difícil. Contudo, se você quer algo um pouco melhor, com mais recursos e (muito) mais bonito, então sugiro dar uma olhada no site ThemeForest e comprar um tema legal. Assim que já estiver com seus temas, os descompacte na pasta 'Seusite/config/public/wp-content/themes'.

Agora que já está tudo pronto, é só mandar pro Heroku com os seguintes comandos:

git add .
git commit -m "nome qualquer que escolher"
git push heroku master

Tudo está indo como o planejaco, mas há mais um pequeno detalhe. O sistema que estamos usando vem com dois problemas que temos que resolver: 1- O WordPress está configurado para o idioma Inglês. 2- O WordPress está configurado para usar SSL (Secure Socket Layer – Segurança de Camada de Transporte).

Então vamos lá:

Português

Vá até o site do WordPress Brasil e baixe a versão brasileira do administrador de conteúdo. Assim que terminar, o abra e copie APENAS a pasta 'languages' para o diretório 'Seusite/config/public/wp-content' . Além disso, abra o arquivo wp-config, que está mesma pasta que colocamos a 'languages', em qualquer editor de texto para código (Notepad, Notepad ++, Dreamweaver, etc – NÃO use Microsoft Word ou outro editor de texto normal). Neste, procure pela linha

define('WPLANG', '');

e a mude para:

define('WPLANG', 'pt_BR');

SSL

Há duas opções neste caso: Ou pagar, em média, 15 dólares por mês para ter uma conexão ultra segura de seus logins no seu site comprando um certificado SSL (no próprio Heroku tem um add-on para isto), ou usar as duas linhas de comando abaixo para desabilitar a necessidade. Eu não acho tão necessário o uso de SSL para um blog/site inicial, ainda mais se não houver a gravação de dados importantes dos seus usuários (como cartões de crédito).

heroku config:set FORCE_SSL_ADMIN=false
heroku config:set FORCE_SSL_LOGIN=false

Outros Problemas Comuns

Se você estiver usando o plugin WordPress SEO by Yoast, desabilite a opção de gera um Sitemap para seu site (Use o plugin que mencionei acima para esse fim), pois ele pode gerar um conflito com os links permanentes do site – principalmente URLs derivadas de categorias.

Finalizando

Então é isso! Esse foi um longo tutorial, mas, no final das contas, podemos ter sites bem baratos, muito rápidos e não tão difíceis fáceis de se mexer. Se você quer saber o quão rápido ele é, olhe as métricas no site de Mchang ou faça você mesmo o teste noBlitz.io ou Google PageSpeed. Eu consegui excelentes resultados em todos os sites que criei usando este sistema, inclusive um que marcou 92 em 100 no PageSpeed Tool da Google já com os plugins e tema instalados.

Espero que tenha gostado, deixe nos comentários qualquer pergunta, sugestão, problemas, curiosidades ou agradecimentos; que eu logo respondo!

Uma parceria com:

Está na hora de você aprender Photoshop!

Deixe seu nome e e-mail que te informamos logo logo quando ele estiver pronto
Valorizamos sua privacidade. Seu e-mail não será compartilhado com terceiros!