Se procuras instalar um certificado SSL (ou Secure Sockets Layer) no teu blog WordPress alojado no DigitalOcean, este tutorial é para ti.

(Se quiseres saber como instalar um blog WordPress no DigitalOcean, podes seguir este tutorial).

Os certificados SSL têm sido alvo de bastante conversa ultimamente; para além de conferirem credibilidade a um site (especialmente se se tratar de uma loja online ou de uma webapp), apresentando o habitual cadeado ao lado da barra de endereços do browser, é também (desde 2014) um sinal de ranking para o Google – o que significa que para além da segurança acrescida, até por motivos de SEO é boa ideia adquirir um.

Os obstáculos para um certificado SSL

Até há bem pouco tempo, existiam no entanto dois problemas:

1. adquirir um certificado SSL custava dinheiro;
2. a sua instalação era um processo relativamente complexo.

O Let’s Encrypt, um serviço criado pelo Internet Security Research Group (ISRG), veio resolver o 1º problema.

Este projecto saíu da beta este ano e é, neste momento, a melhor opção gratuita para criar certificados SSL, tendo registado enorme adopção nos primeiros meses de existência, contando já com mais de 2 milhões de certificados emitidos.

Resta-nos a 2ª questão – o processo de instalação. Existem inúmeros guias pela web fora, como este, que são interessantes se quisermos entender melhor os passos necessários para a emissão de um certificado.

Não é um processo muito complicado para quem tem alguma confiança na linha de comando, mas como temos de repetir este processo de 3 em 3 meses para renovar o certificado, o melhor será mesmo recorrer a um script – felizmente, também já alguém tratou disso.

Assim, o tutorial que se segue tem em conta este excelente script criado por Rudy Affandi – não só serão menos passos como só terás que fazer isto uma vez – e sim, também funciona para vários blogs na mesma conta DigitalOcean!

Requisitos para este tutorial

Antes de começar, vamos então recordar os requisitos:

• blog WordPress;
• alojamento no DigitalOcean com Ubuntu 12.04 ou 14.04 de 64-bit e acesso root;
• integração do serviço ServerPilot (como aqui referido);

NOTA: outras versões do Ubuntu poderão funcionar, mas estas são aquelas que testei. O autor do script também já referiu que pode não ser compatível com o Ubuntu 16.04.

Para este guia, adquiri um domínio barato para testes (testesdobrito.xyz), que servirá como exemplo daqui em diante.

Vamos começar!

#1: Acesso via SSH

O primeiro passo será aceder à máquina do DigitalOcean via SSH. Como estou num Mac, gosto de utilizar o iTerm, que é grátis. Em Windows, o Powershell não é mau mas prefiro o Git Bash, simplesmente por ter uma shell que me é mais familiar.

Seja em que programa for, deverás aceder à máquina digitando ssh root@xxx.xx.xx.xxx trocando os “x” pelo IP da tua máquina DigitalOcean. De seguida, deves inserir a password da conta root, que deverás ter recebido por e-mail quando criaste o droplet no DigitalOcean.

Agora que o login está efectuado, estás ligado remotamente e tudo o que fizeres será nesse computador.

#2: Instalação do script

De seguida vamos descarregar o script que referi em cima e torná-lo executável. O mesmo deve ficar instalado na pasta /usr/local/bin.

Para tal, estes são os comandos a inserir:

1. cd /usr/local/bin para navegar até essa directoria;
2. wget https://raw.githubusercontent.com/lesaff/serverpilot-letsencrypt/master/sple.sh para descarregar o ficheiro do script directamente do Github;
3. sudo chmod +x /usr/local/bin/sple.sh para o tornar executável.

#3: Emissão do Certificado Let’s Encrypt

Chegou a altura em que devemos arrancar o script para instalar o certificado Let’s Encrypt no nosso blog. Para tal, basta escrever sudo sple.sh, confirmar que o queremos instalar (digitando Y) e inserir o nome da app do nosso blog, que deverá ser o mesmo do ServerPilot.

Por fim, inserimos o(s) domínio(s) respectivo(s). Para concluir o processo, após um par de minutos terás de inserir o teu e-mail e concordar com a licença.

Passados alguns segundos, deverás ler a seguinte mensagem de sucesso:

Your Let's Encrypt SSL certificate has been installed. Please update your .htaccess to force HTTPS on your app
Cheers!

Está feito! Vamos só então forçar o HTTPS, conforme sugerido, porque neste momento estás a apresentar ambas as versões do site.

#4: Forçar o HTTPS (redireccionar de HTTP para HTTPS)

Agora que tens uma versão HTTPS do site, deverás forçar o redireccionamento, para que quem não digite https:// seja automaticamente transportado para a versão segura.

Para tal, deverás ir à raíz da tua aplicação WordPress (que será em /srv/users/serverpilot/apps/xxx/public, trocando o xxx pelo nome da tua app) e criar (ou modificar) um ficheiro intitulado .htaccess (atenção ao .) – podes realizar este passo através de um programa de FTP como o Filezilla ou através do terminal, como preferires.

Nesse ficheiro, deves colocar o seguinte pedaço de código logo no início:

RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=302,L]

E pronto! Agora, se digitares http://oteusite.com deverás ser automaticamente levado para https://oteusite.com.

Está feito! Em princípio deverá ficar tudo OK. Se não for o caso, sugiro que comeces por instalar o plugin SSL Insecure Content, porque ainda podem existir alguns redireccionamentos em falta.

Se tiveres uma CDN como a Amazon Cloudfront, é possível que tenhas de realizar mais algum trabalho de investigação – este blog, por exemplo, utiliza CloudFront e ainda não consegui que funcionasse a 100% com HTTPS.

Conclusão

Como vês, criar um certificado HTTPS para um blog WordPress não tem que ser dispendioso ou complicado – e graças a este script, não terás que repetir estes passos de 3 em 3 meses!

Estes serviços estão cada vez melhores!

A DigitalOcean começou em 2011 e registou um crescimento verdadeiramente astronómico nos últimos tempos – é, actualmente, uma das 3 maiores empresas de hosting do mundo!

Tal não será de admirar se experimentares o serviço – por 5 dólares por mês, tens uma VPS (Virtual Private Server) pronta a utilizar, que te garante maior liberdade e velocidade se compararmos com os alojamentos partilhados que são, para sites com muito pouco tráfego, geralmente a 1ª escolha.

As VPS sempre foram vistas como difíceis de configurar ou dispendiosas, mas como verás, a DigitalOcean veio simplificar o processo. E, com VPS a partir de 5 dólares, o alojamento acaba até por ser mais barato do que muitos serviços de alojamento partilhado.

Mas se estás a ler este artigo, provavelmente já conheces os benefícios de uma VPS e queres simplesmente saber como tirar maior partido do serviço, certo?

Vamos a isto!

DigitalOcean + ServerPilot = WIN!

Na passada semana, migrei 14 blogs WordPress para uma conta de $5 mensais da DigitalOcean. Aqui, vou-te explicar os meus passos, para beneficiares de várias instalações WordPress – não te esqueças é que se alguns dos teus sites forem populares (ie, muitos milhares de visitas diárias), uma conta de $5 poderá não chegar, mas podes esticá-la ao máximo se utilizares um plugin de caching como o W3 TotalCache e uma CDN, que podes aprender a configurar aqui.

Vamos então começar pelo DigitalOcean.

Criar um droplet no DigitalOcean

Depois de te registares no serviço, deves criar um droplet.

O DigitalOcean anuncia com orgulho que podes ter uma aplicação instalada em menos de 1 minuto recorrendo a um dos seus populares droplets. Com um par de cliques, poderás instalar um blog WordPress, Drupal ou Ghost.

Com a nova parceria DigitalOcean / Bitnami, novas apps são constantemente adicionadas, tornando o serviço ainda mais interessante.

É também aqui que escolhes as capacidades da tua máquina – tendo impacto directo no preço – e a região (tens 3 à escolha na Europa).

Aqui, o instinto seria criar um droplet WordPress, mas não é isso que vamos fazer. Vamos, isso sim, criar uma Distribution que terá de ser o Ubuntu 14.04 de 64-bit.

A razão para isto é simples: temos de integrar o ServerPilot, que só funciona nesta configuração. Se tivesses optado pela Application WordPress, só terias direito a um blog por droplet, que não é o pretendido, visto que se tivesses 3 blogs terias de pagar, no mínimo, 15 dólares mensais.

Integrando o ServerPilot

Agora, é tempo de criar uma conta no ServerPilot. O ServerPilot tem uma versão gratuita que permite criar apps sem limites, pelo que não terá qualquer custo para nós.

Ao delegarmos a instalação do WordPress para o ServerPilot, estamos basicamente a garantir que esta instalação será optimizada para a nossa VPS do DigitalOcean, criando uma instalação mais segura e mais rápida (utilizando Nginx), como podes consultar aqui.

Criada a nossa conta gratuita, devemos depois então associá-la ao nosso servidor, onde inserimos o endereço IP, a password SSH para ‘root’ (que deverás receber num e-mail enviado pela DigitalOcean) e uma palavra-passe, à tua escolha, para o utilizador SFTP que o ServerPilot criará por ti, com o nome serverpilot.

Criar uma app

Criado o servidor, podemos prosseguir para a configuração da nossa app – é aqui que será instalado um WordPress por nós.

Damos um nome, indicamos o domínio e decidimos se queremos uma instalação fresca do WordPress ou não. Se já tiveres uma migração do WordPress preparada, podes ignorar este campo.

Se optares por uma instalação nova, é aqui que defines o nome do teu blog e os acessos, para fazeres depois o login.

Por fim, escolhes a versão do PHP e o servidor, que será aquele que inseriste no passo anterior.

Se não colocaste o visto em WordPress, o próximo passo será criar uma base de dados, dando um nome, um username e uma password, para depois introduzires no habitual wp-config.php do WordPress (o DB_HOST será “localhost”, já agora).

Se optaste por uma instalação nova do WordPress, o teu blog já deverá estar a funcionar!

Copiando os ficheiros para a migração

Este é um passo opcional, que assume que queres importar a informação do teu WordPress já existente – para tal, a minha recomendação é utilizares o brilhante plugin Duplicator, que cria um package que consiste num ficheiro ZIP com todos os conteúdos e um ficheiro, de nome installer.php.

Começa por instalá-lo no teu blog WordPress actual e activá-lo. Depois, cria o package, que levará alguns minutos, e descarrega-o para o teu computador.

Depois, deves aceder ao FTP da DigitalOcean (como root ou como serverpilot, cujo acesso configuraste em cima) e fazer upload dos 2 ficheiros que descarregaste.

NOTA: o caminho no teu FTP deverá ser algo do género /srv/users/serverpilot/apps/o_teu_blog/public

Para o configurar, basta depois ires ao [teudomínio.com]/installer.php e completar a instalação, dando os detalhes da base de dados que configuraste em cima.

Terminado este processo, já deverás ter o teu blog pronto a usar!

Adicionando mais blogs WordPress

O mais trabalhoso já passou. Agora é repetir estes passos para cada instalação ou migração WordPress, com umas pequenas diferenças.

No DigitalOcean…

… não precisas de criar mais nenhum droplet. Tudo o que precisas é de ir à área DNS da tua conta e adicionar o domínio, escolhendo o droplet que já criaste.

No ServerPilot…

… deves repetir todos os passos descritos, criando uma nova app com o domínio respectivo e, opcionalmente, a base de dados e posterior upload dos ficheiros.

Por fim, não te esqueças de actualizar os nameservers

Se já tinhas o teu site online, terás que actualizar os teus nameservers, se não os utilizadores continuarão a ser redireccionados para o site do alojamento antigo.

Se quiseres evitar o downtime, podes utilizar um serviço intermediário como o CloudFlare, que é grátis e excelente para gerires os teus DNS – basta apontares os teus nameservers para o CloudFlare e sempre que precisares de fazer alguma alteração, actualizas no CloudFlare (em vez de ser na empresa onde tens o teu domínio), que o disponibiliza instantaneamente.

Se adquiriste um domínio novo, podes claro também ligá-lo aos nameservers da CloudFlare ou directamente aos da DigitalOcean, que são:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

NOTA: os nameservers da CloudFlare são variáveis, pelo que te deves registar e adicionar um site para ver quais é que te são atribuídos. Acredita que este serviço vale muito a pena!

Conclusão

O DigitalOcean é o serviço de hosting deste site desde Novembro de 2014 e estou super satisfeito até hoje.

As VPS deixaram ser um “bicho papão”, estando agora muito acessíveis e fáceis de utilizar, mesmo se o teu objectivo passa por configurar um simples blog.

E, como se viu, podes ir muito longe com apenas 5 dólares mensais – com a ajuda do ServerPilot podes criar um número ilimitado de blogs e, se alguns deles forem (ou se tornarem) populares, podes sempre configurar uma CDN como a Amazon Cloudfront para aliviar o tráfego do teu site (e torná-lo ainda mais rápido)!

Se tens um site (ou estás a pensar criar um brevemente), provavelmente já conhecerás o WordPress. Afinal de contas, 1 em cada 5 sites utiliza esta plataforma.

Não sendo o caso deste blog, que usa o Ghost, a verdade é que o WordPress ainda é o CMS (Content Management System) top-of-mind para a maioria das pessoas, muito devido à sua versatilidade, ao apoio da comunidade e ao número de plug-ins e integrações de que dispõe.

Actualmente na versão 4, o WordPress permite criar qualquer tipo de site com pouco esforço – seja ele um simples blog, um site institucional ou até uma loja.

Para muitas pessoas, o problema não é escolher a plataforma – é criar um site com um look apelativo e profissional sem gastar muito dinheiro ou contratar um designer.

O WordPress oferece milhares de temas gratuitos – com meia-dúzia de cliques conseguimos alterar o design de todo o nosso site sem perder a informação que já criámos. Mas conseguiremos melhores resultados se optarmos por um tema premium.

Um tema premium trará várias vantagens face a um tema gratuito, tais como:

• actualizações mais frequentes;
• elevado grau de personalização;
• grande nível de suporte, quando precisamos de ajuda;
• inclusão de plug-ins premium, como por exemplo sliders;
• maior qualidade no código (que se traduzirá num site mais rápido) e no design.

Não é que os temas gratuitos sejam maus – mas na minha experiência, as actualizações são menos frequentes e não podemos contar com grande apoio ao cliente.

Mesmo pagando, haverá bons e maus produtos – tudo dependerá da equipa que trabalha para o projecto. Mas, de um modo geral, poderemos contar com um melhor produto (e apoio) se investirmos 50 ou 60 dólares num tema premium.

Estes temas podem ser adquiridos em marketplaces como o ThemeForest ou o Creative Market.

Como rapidamente podemos constatar, existem milhares de temas disponíveis – geralmente, ordeno sempre pelos temas mais vendidos/populares para iniciar a minha pesquisa, porque mais vendas é habitualmente sinónimo de maior detecção de bugs por parte dos utilizadores e de actualizações mais frequentes por parte dos programadores. Se comprarmos um tema que só tem 10 ou 20 clientes, corremos o risco de encontrar programadores desleixados que demoram muito tempo a responder ou que deixam de trabalhar em actualizações para esse produto.

O que nos traz para o tema de hoje. Não é por comprarmos um tema popular que acabaremos por ficar com um site igual aos outros. Com um pouco de personalização, conseguiremos criar um site apelativo e único.

Para tal, precisamos de 3 coisas:

• conhecimentos (mínimos) de CSS;
• o Firebug, uma extensão disponível para Chrome e Firefox;
• uma forma de inserir CSS personalizado, recorrendo ao custom CSS.

Conhecimentos mínimos de CSS

O código CSS (ou Cascading Style Sheets) é responsável por informar o browser da forma como o código HTML deve ser apresentado – que tipos de letra, que cores, que tamanho, etc.

Na imagem em baixo, vemos o mesmo site só com HTML e, à direita, com HTML e CSS. Sem CSS, a web não teria graça nenhuma!

Como veremos mais à frente, não é necessário ser um programador para fazer pequenos ajustes no site – basta um pouco de bom senso e tentativa e erro.

Dito isto, há 3 excelentes locais para aprofundar esta linguagem, para quem quiser levar os seus conhecimentos para um nível mais avançado:

• os cursos gratuitos de CSS do CodeAcademy;
• a página de Shay Howe, designer e programador;
• a secção de CSS do w3schools.com (ideal para ficar a conhecer tudo o que o CSS é capaz).

Estes 3 sites são totalmente opcionais e ficam para os mais curiosos – o que importa é a aplicação na prática, cortesia dos 2 pontos seguintes.

O Firebug

O Firebug já foi referido aqui e a verdade é que a extensão funciona muito melhor no Firefox – é um excelente incentivo para manter este browser instalado no meu computador.

O Firebug inspecciona o código. Essa funcionalidade está presente na maior parte dos browsers modernos, mas esta extensão é muito mais completa.

Depois de clicar na extensão, ela surgirá no fundo da janela. Mas só depois de clicarmos no 2º botão (Click an element in the page to inspect) é que teremos acesso ao inspector.

Agora, ao passarmos o rato pelo site veremos o respectivo código CSS. Estará à direita, em Style. Aqui, seleccionei um parágrafo do artigo da semana passada: os 10 Mandamentos de Social Media.

Vamos pegar neste texto do corpo do site e alterar o tamanho (font-size) e a cor (color). Também podemos facilmente alterar o tipo de letra por algo que gostemos, com a ajuda do WhatFont.

Como queremos editar o que está no parágrafo, teremos de procurar a tag <p>. Eis o que devemos localizar:

Depois, podemos ver como ficarão as alterações, editando os campos respectivos dentro do Firebug.

Estas alterações, no entanto, não ficarão permanentes. Só nós as conseguimos ver e assim que clicarmos em Refresh, o browser voltará a mostrar o site como ele é.

Para as gravar, teremos de recorrer ao 3º e último passo.

Por agora, podemos fazer copy do que queremos alterar, colando depois no Notepad ou no meu programa de eleição, o SublimeText.

Uma forma de inserir CSS personalizado, recorrendo ao custom CSS

Podemos alterar o código CSS mexendo nos ficheiros em questão, mas é boa prática recorrermos aos campos de custom CSS para esta finalidade. Assim, sempre que há uma actualização do tema, não corremos o risco de perder as nossas modificações.

O custom CSS vai-nos permitir dizer que mudanças pretendemos e informar o browser que deve ignorar as definições originais e utilizar as nossas.

A maioria dos temas premium inclui de raíz esta caixa, dentro das opções específicas do tema, geralmente dentro do separador Apresentação.

Eis o exemplo no tema “Hot Topix”:

E agora no tema “Clubber”:

Também podemos aplicar estas alterações em temas gratuitos.

O WordPress não traz esta caixa de origem, mas podemos utilizar o plug-in Jetpack (também criado pela empresa) para activar esta funcionalidade, ou instalar algo como isto.

Eis a caixa, recorrendo ao Jetpack.

Algumas dicas

Quando compro um tema premium, tenho geralmente uma ideia muito clara do que procuro, para minimizar o esforço de personalização.

Estas são as alterações mais frequentes, que acabo por ter de fazer com regularidade após uma nova instalação…

Alterar a cor do fundo

Podemos editar a cor do fundo de qualquer objecto. Um fundo, uma linha horizontal ou um botão. Para tal, basta adicionar a linha background-color, juntamente com a web color que pretendemos utilizar.

Eis um exemplo, alterando o fundo de um botão para branco:

.button {
background-color: #fff;
}

Alterar a cor do link, quando seleccionado

Em HTML, os links são a tag <a>, mas como queremos alterar a cor apenas quando passamos o rato por cima , temos de adicionar a condição hover.

No nosso custom CSS, ficaria desta forma:

a:hover {
color: #F7931E;
}

Alterar o tamanho dos títulos

Em HTML, os títulos (e sub-títulos) fazem parte das tags <h1>, <h2>, <h3> e por aí em diante.

Para alterar o título principal, deveremos editar uma vez mais o font-size, mas do <h1>.

h1 {
font-size:36px;
}

Colocar algo invisível

O autor do tema pode ter criado algo que queremos que simplesmente não apareça. Um rodapé ou um botão, por exemplo. Para ocultar, temos de adicionar uma linha com display:none no que queremos tapar – por exemplo, para tapar os títulos com a tag <h3> escreveríamos:

h3 {
display:none;
}

Mostrar e ocultar propriedades rapidamente

O Firebug tem um botão para cancelar uma linha de código – ideal para rapidamente observarmos como fica uma seccção do site com e sem esse parâmetro.

Para tal, basta clicar no sinal vermelho que surge automaticamente quando passamos o rato em cima de cada linha:

NOTA: não confundir com o código rasurado. Se o código está assim, é porque já existe uma regra para o browser ignorar essa configuração, não apresentando o conteúdo dessa forma.

Em resumo

Personalizar um site não tem que ser dispendioso. Com algumas dezenas de dólares e com um pouco de tempo, conseguimos um site com aspecto profissional e, ainda assim, único.

Esta é também uma excelente forma de aprender CSS. À medida que os conhecimentos evoluem, maior será a nossa capacidade de tornar um site mais pessoal!

Se quiseres aprofundar este tema, não te esqueças de passar por aqui e por aqui.

Como vimos há alguns artigos atrás, uma CDN (ou Content Delivery Network) é umas das melhores formas de optimizar o desempenho do nosso site.

A grande vantagem de uma CDN é simples: servir os conteúdos de uma forma rápida e fiável, seja para um visitante de Portugal ou de Singapura. Uma CDN disponibiliza os dados a partir de vários data centers espalhados pelo mundo, chegando a informação mais depressa a qualquer utilizador.

Os grandes sites colocam os seus principais conteúdos (sejam eles texto, imagens, scripts, vídeos, podcasts ou até aplicações) em CDNs não só para melhor servir o utilizador (e obter melhor ranking no Google), mas também para diminuir o tráfego e tempo de acesso ao site. Muitas vezes, tal acção também é responsável pela redução nos custos de hosting.

Ao contrário do que se possa pensar, este tipo de serviço é tremendamente barato e, na maior parte das ofertas, só se paga o que realmente se utiliza – o que significa que pequenos negócios pagam uma conta diferente das grandes empresas ao final do mês.

A Amazon CloudFront

Há imensas empresas no mercado, mas as 3 CDNs mais populares são a Amazon CloudFront, a MaxCDN e a Cloudflare.

Acredito que todas pratiquem preços e funcionalidades similares. Devido à sua popularidade (afinal de contas, até o Dropbox a utiliza!), optei pela Amazon CloudFront e posso dizer que estou muito satisfeito com a escolha.

Quando nos inscrevemos, não temos que começar logo a pagar. A Amazon oferece o AWS Free Usage Tier, uma espécie de promoção de 12 meses, onde podemos testar os serviços de borla se a utilização for razoável.

A AWS engloba vários serviços, mas no caso da CloudFront, temos direito a 50 GB de transferências de dados e 2,000,000 de pedidos HTTP e HTTPS por mês.

No que toca a preços, estes mudam com frequência, à medida que o custo de armazenamento baixa. Ou seja mudam… para melhor.

Como referi, a despesa mensal dependerá do tráfego e da localização onde o acesso aos conteúdos foi feito, mas estamos a falar de menos de 25 cêntimos por GB transferido (no pior cenário).

Os preços podem ser consultados aqui. O login e o pagamento pode ser feito com a nossa informação habitual da Amazon.

Como se pode ver, não há grandes razões para não experimentar. A grande barreira à entrada é, na verdade, o conhecimento técnico que é necessário ter para a configurar. Mas é para isso que estou aqui hoje a escrever este artigo!

Configurando a Amazon CloudFront

Para configurarmos a CDN, primeiro temos que utilizar o serviço Amazon S3.

O S3 é basicamente o serviço de cloud storage da Amazon, como o Dropbox ou a Meo Cloud, mas bem menos sexy e intuitivo.

Só depois de criarmos um bucket (que é um pouco como uma pasta do FTP, apesar de ter algumas diferenças) é que podemos criar uma CDN para ele.

Passo #1: Entrar na Amazon S3 e criar um bucket

Depois de fazermos login, teremos de optar pelo serviço Amazon S3, que estará dentro de Storage & Content Delivery.

Aqui, será necessário criar um bucket. Já tenho aqui um criado para este blog, pelo que estou aqui vou criar um novo (até porque estou em vias de começar um podcast e a CDN será útil para o efeito).

Basta clicar no botão azul Create a Bucket, dar um nome e escolher a região mais próxima do nosso target principal – neste caso Irlanda, visto no meu caso ser predominantemente para Portugal.

Depois, podemos clicar em Create, ignorando o Set up logging.

Passo #2: Alterar as permissões

O S3 não torna os conteúdos acessíveis publicamente de origem. Teremos de mudar as permissões para que tal aconteça.

Para tal, basta seleccionarmos o bucket que acabámos de criar e, à direita, clicar em Permissions-> Edit bucket policy.

Este é o código que temos de inserir – a partir daí, qualquer ficheiro transferido para dentro do bucket ficará público.

NOTA: será necessário alterar xxx123 pelo nome do nosso bucket.

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::xxx123/*"
        }
    ]
}

Depois basta clicar em Save.

Passo #3: Criar uma distribuição no CloudFront

Agora estamos em condições de passar para a CloudFront. Para tal, acedemos ao menu do topo da página e clicamos em CloudFront.

Dentro do CloudFront, teremos de clicar em Create Distribution.

Aí, optaremos pela opção Web e clicamos em Get Started.

O menu seguinte é algo intimidante, mas na verdade tudo o que temos de fazer é preencher o primeiro campo: Origin Domain Name com o bucket que criámos no passo #1.

O resto será preenchido automaticamente e não precisamos de efectuar qualquer alteração. Depois, basta fazer scroll até ao final da página e clicar em Create Distribution.

NOTA: Os ficheiros que lá colocaremos ficarão num endereço do género domínio.cloudfront.net. Mas podemos criar um CNAME e utilizar o nosso próprio domínio (como no caso deste blog, onde todas as imagens estão em cdn.brunobrito.pt em vez de domínio.cloudfront.net).

Se pretendermos esta alteração, devemos colocar um visto na nossa recém-criada distribution e clicar em Distribution Settings e logo de seguida em Edit, na tab General.

Aí acrescentamos o CNAME desejado (algo do género cdn.omeudomínio.com, por exemplo) em Alternate Domain Names (CNAMEs). Depois, confirmamos a nossa alteração clicando no botão azul Yes, Edit.

Passo #4: Aguardar que a distribuição fique activa

Depois de completarmos os 3 passos anteriores, poderemos ter de aguardar um pouco até que tudo fique devidamente activado. Quando estiver Deployed, tudo estará OK.

No final, deveremos ter algo semelhante à imagem em baixo.

Passo #5: Adicionar o CNAME no nosso hosting (opcional)

Se no passo #3 optámos por criar um CNAME, será necessário adicioná-lo também no nosso hosting.

Cada painel de controlo é diferente e em alguns serviços será mesmo necessário entrar em contacto com a empresa para que tal aconteça.

No meu caso, recorri a um hosting partilhado que tenho na Dreamhost e pude configurá-lo sozinho.

No Dreamhost, tive de entrar no meu painel de controlo e ir a Domains-> Manage Domains. Escolhi o meu domínio e cliquei em DNS.

Depois, bastou criar o CNAME com o mesmo nome em Name e colocar o domínio da Amazon que termina em cloudfront.net em Value .

Depois de um clique em Add Record Now! e de aguardar algum tempo, tudo ficou a funcionar devidamente.

Transferindo ficheiros para a Amazon S3

Apesar de podermos transferir ficheiros na página da Amazon S3, tal é longe de ideal. Felizmente, existem alternativas.

Uma delas é o Cyberduck, uma aplicação disponível tanto para Windows como macOS. Neste artigo, vou-te apresentar outras 2 que foram, mais tarde, descontinuadas: o AirFile (para macOS) e o S3 Fox Organizer, um plug-in para Firefox.

Ambos funcionam de forma muito similar a um programa FTP. Para configurar estes programas, vamos precisar da Access Key e da Secret Key para a nossa conta S3.

Podemos obtê-las dentro da painel de controlo da Amazon AWS se clicarmos no nosso nome, no canto superior direito, e clicarmos em Security Credentials.

Aí, teremos de clicar em Access Keys e criar uma nova, se ainda não tivermos uma. Convém também guardá-la num local seguro, visto que a Amazon deixou de permitir a recuperação das Access Keys desde Abril de 2014.

Assim, podemos facilmente transferir imagens com o S3Fox para o nosso blog… como fiz para este post!

NOTA: Se depois da criação da CDN surgir o erro “Error connecting! – Temporary Redirect”, teremos de esperar um pouco mais. Na maioria das vezes, este caso acontece devido á conta ser nova e ainda não estar devidamente propagada.

E está feito. Parabéns, acabaste de configurar a tua primeira CDN!