Como desenvolvi meu blog

Como desenvolvi meu blog

Nesse artigo vou descrever o processo que utilizei para desenvolver meu blog.

  • Registrando o domínio
  • Escolhendo a tecnologia
  • Preparando o ambiente de desenvolvimento
  • Criando o blog
  • Contratando a hospedagem
  • Configurando os DNSs
  • Preparando o ambiente de produção
  • Configurando o deploy
  • Definindo o controle de versão
  • Testando o deploy
  • Configurando o Nginx

Registrando o domínio

O primeiro passo foi escolher o nome para o meu blog e consultar a disponibilidade de registro. No Brasil, a entidade responsável pelas atividades de registro e manutenção dos nomes de domínios é o Registro.br. Acessei minha conta e registrei o dominio showmethecode.com.br.


Escolhendo a tecnologia

Minha escolha para o desenvolvimento desse blog foi o Jekyll.

Atualmente existem muitos sistemas de gerenciamento de conteúdos disponíveis na Internet. Os mais conhecidos são Wordpress, Joomla e Drupal.

Os sistemas mais populares de gerenciamento de conteúdo são baseados em PHP e utilizam muitos plugins para as coisas mais básicas de um site. Sabemos que a grande maioria dos sites desenvolvidos em PHP possuem suas vulnerabilidades conhecidas. Além disso, existe a dependência de banco de dados.

Jekyll, pelo contrário, é um gerador de site estático. Ao invés de servir conteúdo dinâmico, ele serve arquivos estáticos através de um Nginx ou Apache, dois dos servidores web mais testados do planeta. Outros aspectos que levei em consideração foram: performance, custo e flexibilidade.

Caso queira conhecer mais a respeito do Jekyll, acesse a documentação oficial.


Preparando o ambiente de desenvolvimento

Para desenvolver o blog eu vou utilizar o Windows 10, mas o Jekyll pode ser instalado em qualquer sistema operacional.

Git Bash

Essa é a ferramenta que eu recomendo para trabalhar com linha de comando no Windows. Ela reúne as funcionalidades do git e do bash em uma única ferramenta. Para baixar o Git Bash acesse https://git-scm.com/ e utilize as opções padrões para a instalação.

Git Bash
Git Bash

Visual Studio Code

Atualmente é o editor de códigos que mais me agrada: leve, simples e objetivo. É um editor da Microsoft, com código-fonte aberto e pode ser baixado em: https://code.visualstudio.com/. Visual Studio Code pode ser chamado de VS Code ou simplesmente Code.

VS Code
VS Code

Instalando o Jekyll

Essa foi a parte mais chata que encontrei durante todo o processo, pois o Windows ainda não é suportado oficialmente pelo Jekyll. A documentação oficial indica a leitura de um blog para as instruções de instalação. Em um próximo artigo, escrevo sobre como instalar o Jekyll no Windows. No Linux e no OSX a instalação é bem simples.


Criando o blog

Com o ambiente de desenvolvimento preparado, podemos iniciar a criação do blog. Vou criar o projeto no meu diretório pessoal.

Criando o projeto com o Jekyll

Acesse seu diretório pessoal no Git Bash:

$ cd

Crie um novo projeto no diretório showmethecode:

$ jekyll new showmethecode

Acesse o diretório que foi criado:

$ cd showmethecode

Compile e execute o servidor de visualização do Jekyll:

$ bundle exec jekyll serve 

Todas as alterações que forem feitas no código, automaticamente serão refletidas no navegador. Basta alterar qualquer arquivo e dar refresh no navegador.

Para visualizar o projeto, basta abrir o navegador e ir para http://localhost:4000.

Jekyll no browser
Jekyll no browser

Pronto, nosso projeto está criado e rodando.

Abrindo o projeto no VS Code

Abra o Visual Studio Code, escolha File > Open folder... e informe o diretório onde você criou o novo projeto. A estrutura de arquivos e diretórios é mostrada na imagem abaixo.

VS Code

No site oficial, existem mais informações sobre:

Esses tópicos estão fora do escopo desse artigo.


Contratando a hospedagem

Depois de finalizar todas as alterações necessárias, é hora de hospedar o blog.

Para a hospedagem do blog eu optei pela AWS - Amazon Web Services, serviço de Cloud mais completo na minha opinião, extremamente confiável e o preço é justo.

Vou utilizar uma instância padrão Amazon EC2 para hospedar o blog.

Acessei minha conta e realizei os seguintes passos:

  1. Console > Services > Compute > EC2
  2. Launch Instance > Ubuntu Server 16.04 LTS (HVM), SSD Volume Type - ami-6edd3078
  3. Finish

No final da instalação você deverá baixar sua chave SSH. Essa chave será utilizada para acessar o servidor que acabamos de criar. É muito importante que você guarde essa chave em um local seguro no seu computador.


Configurando os DNSs

Para que o domínio que acabamos de criar possa ser direcionado para o nosso servidor, precisamos configurar o serviço de DNS.

Configurando o DNS na AWS

Para registrar os DNSs vou utilizar o serviço Route 53. Para registrar os DNSs:

  1. Console > Services > Networking & Content Delivery > Route 53
  2. DNS management > Hosted Zones > Create Hosted Zone

Informe os seguintes dados para a criação de uma nova zona e clique em Create.

Domain name: showmethecode.com.br
Comment: showmethecode blog
Type: Public Hosted Zone

A nova zona será criada como a imagem abaixo.

VS Code

Configurando o DNS no Registro.br

Esses servidores NS que foram criados na AWS devem ser informados ao Registro.br. Para alterar os DNSs no Registro.br:

  1. Acesse sua conta do Registro.br
  2. Clique no domínio
  3. Selecione a opção ALTERAR SERVIDORES DNS
  4. Adicione os 04 servidores disponibilizados pela AWS
  5. Clique em SALVAR DADOS
Registro.br

As alterações de DNS podem levar um tempo para entrar em vigor.

Direcionando o domínio para o servidor

O último passo para configurar o DNS é informar à AWS que quando uma requisição ao domínio showmethecode.com.br for solicitada, ela deve redirecionar a requisição para o nosso servidor EC2.

Uma das informações necessárias para essa configuração é o endereço IP do nosso servidor.

Os passos para conseguir o endereço IP são:

  1. Console > Services > Compute > EC2
  2. Clicar em Running Instances
  3. Selecionar o servidor EC2 desejado e copiar o campo IPv4 Public IP.

Os passos para criar o redirecionamento são:

  1. Console > Services > Networking & Content Delivery > Route 53
  2. DNS Management > Hosted Zones
  3. Selecionar o domínio desejado
  4. Clicar em Create Record Set
  5. Informe os seguintes dados e clique em Create

Name: (deixar em branco)
Type: A - IPv4 address
Value: endereço IP

AWS Hosted Zones A

Assim que o DNS entrar em vigor, podemos dar um “ping” no servidor para confirmar se está tudo certo.

$ ping showmethecode.com.br

Pinging showmethecode.com.br [52.207.128.193] with 32 bytes of data:

Configurando o Firewall

Uma das características que mais me agrada na AWS é o controle que temos sobre nossos serviços. Por padrão, toda a comunicação com nossas instâncias está fechada. Como iremos utilizar o protocolo HTTP para acessar o blog, devemos liberá-lo no Firewall.

Acesse o Console da AWS e siga os seguintes passos:

  1. Console > Services > Compute > EC2
  2. Network & Security > Security Groups > launch-wizard-1 > Inbound
  3. Edit > Add Rule > Type: HTTP > Save

A imagem abaixo ilustra como deve ficar a configuração.

Amazon Firewall
Amazon Firewall

Preparando o ambiente de produção

Agora precisamos preparar nosso ambiente de produção para disponibilizar os arquivos do blog na Internet. Vamos instalar nosso servidor Web e nos certificar que a instalação ocorreu com sucesso.

Autenticando no servidor

Nesse momento iremos utilizar a chave SSH que baixamos quando criamos nossa instância EC2 na AWS. O nome da minha chave é showmethecode.pem.

Para autenticar no servidor:

$ ssh -i showmethecode.pem ubuntu@showmethecode.com.br

Atualizando o servidor

É importante atualizar o sistema operacional com as últimas atualizações:

$ sudo apt-get update
$ sudo apt-get upgrade

Instalando o Nginx

Nginx é um servidor Web rápido, leve e com inúmeras possibilidades de configurações.

Antes de instalar o Nginx, precisamos instalar o pacote build essential.

$ sudo apt-get install build-essential

Agora podemos instalar o Nginx.

$ sudo apt-get install nginx

Verifique se a instalação ocorreu com sucesso.

$ systemctl status nginx

Com o Nginx instalado, já podemos acessar nosso servidor a partir de nossa máquina local.

Nginx
Nginx

Mais informações sobre o Nginx: https://www.nginx.com/


Configurando o deploy

Deploy significa implantar, ou seja, é a instalação da aplicação em um servidor remoto para que ele fique disponível para os usuários.

Essa parte talvez seja a mais interessante até agora. Eu vou disponibilizar o blog para o servidor através do GIT. Assim que eu der push no ambiente de desenvolvimento, além de enviar o código para o GitHub, vou enviar o código para o servidor de produção também. O servidor será responsável em receber esse push, compilar o blog e enviar os arquivos para o diretório de produção.

Instalando o Jekyll no servidor

Precisamos instalar o Jekyll no servidor para ele compilar o blog.

Acesse o servidor remoto

$ ssh -i showmethecode.pem ubuntu@showmethecode.com.br

Instale o Ruby e o RubyGems e verifique se a instalação ocorreu com sucesso.

$ sudo apt-get install ruby-full
$ gem -v

Instale o Jekyll e verifique se a instalação ocorreu com sucesso.

$ sudo gem install bundler
$ sudo gem install jekyll
$ jekyll -v

Configurar um repositório GIT no servidor

Vamos configurar um repositório remoto para receber os arquivos do nosso ambiente de desenvolvimento.

# Crie uma pasta para o repositório
$ mkdir showmethecode.git

# Altere para o diretório criado
$ cd showmethecode.git

# Inicialize o repositório
$ git init --bare

# Altere para o diretório anterior
$ cd ..

# Clone o repositório
$ git clone showmethecode.git

Certo, agora temos dois diretórios:

  • /showmethecode.git é o diretório do nosso repositório
  • /showmethecode é o diretório que será utilizado para armazenar os arquivos de produção

Adicionando um evento no servidor

Essa configuração é necessária para que toda vez que o repositório do servidor receber um push, ele execute um script. Iremos utilizar o evento post-receive do GIT, o qual roda depois do processo inteiro estar completo.

# Alterar para o diretório dos eventos
$ cd showmethecode.git/hooks/

# Criar o arquivo post-receive
$ touch post-receive

# Editar o arquivo post-receive
$ vim post-receive

Aperte a tecla I para entrar no modo de inserção.

Conteúdo do arquivo post-receive

unset $(git rev-parse --local-env-vars)
cd /home/ubuntu/showmethecode
git pull
jekyll build

Quando finalizar a edição do arquivo, aperte ESC e digite :wq (W = Write / Q = Quit).

Alterar a permissão do arquivo post-receive

$ chmod +x post-receive

Clonando o repositório na máquina local

Agora precisamos clonar esse repositório em nossa máquina local.

$ eval `ssh-agent -s`

$ ssh-add showmethecode.pem

$ git clone ubuntu@showmethecode.com.br:~/showmethecode.git

Se tudo der certo, nós devemos ver a mensagem:

Cloning into 'showmethecode'...
warning: You appear to have cloned an empty repository.
Checking connectivity... done.

Definindo o controle de versão

Os dois mais conhecidos são GitHub e Bitbucket. Como nunca utilizei o Bitbucket e já possuo conta no GitHub, optei por utilizar o GitHub mesmo.

GitHub é um serviço de armazenamento e versionamente de código-fonte disponível na Internet. Na verdade ele é muito mais do que isso, fica até difícil descrever o que é o GitHub.

Meu perfil no GitHub: https://github.com/robertoachar

GitHub Profile
Meu perfil no GitHub

Mais informações sobre o GitHub: https://help.github.com/.

Criando o repositório no GitHub

Vamos criar um novo repositório no GitHub e se certificar de não selecionar a opção de inicializar o repositório com o README.

Agora precisamos adicionar o repositório do GitHub como um repositório remoto em nossa máquina local.

$ cd showmethecode

$ git remote add github https://github.com/robertoachar/showmethecode.git

Testando o deploy

Para testar essa integração, basta alterar qualquer arquivo e enviar para ambos os repositórios.

# Adicionar os arquivos modificados
$ git add .

# "Comittar" os arquivos
$ git commit -m "Atualizar blog"

# Enviar os arquivos para o GitHub
$ git push github master

# Enviar os arquivos para o servidor
$ git push origin master

A coisa funciona da seguinte maneira:

  1. O comando push envia as alterações para o repositório do servidor (origin)
  2. O evento post-receive é disparado e o script é executado
  3. O script altera para o diretório /showmethecode, compila os arquivos e gera o build no diretório /home/ubuntu/showmethecode/_site.

Configurando o Nginx

Agora só precisamos configurar o Nginx para servir os arquivos do diretório onde os arquivos foram gerados.

Acesse o servidor e altere as configurações do Nginx.

# Alterar para o diretório de configuração do Nginx
$ cd /etc/nginx/sites-enabled

# Editar o arquivo default
$ sudo vim default

Aperte a tecla I para entrar no modo de inserção.

Altere a linha do diretório padrão do Nginx:

# Linha original
root /var/www/html;

# Linha alterada
root /home/ubuntu/showmethecode/_site;

Quando finalizar a edição do arquivo, aperte ESC e digite :wq (W = Write / Q = Quit).

Reinicie o servidor Nginx para refletir as alterações.

$ sudo systemctl reload nginx

Abra seu navegador e a mágica acontece.

showmethecode.com.br
showmethecode.com.br

Concluindo

Espero que tenham gostado desse primeiro post.

Deixem suas dúvidas, críticas ou sugestões que terei o maior prazer em respondê-los.

Vamos em frente!

"Talk is cheap. Show me the code." - Linus Torvalds
Roberto Achar

Sobre Roberto Achar

Roberto Achar é Full Stack Web Developer e fascinado pelo mundo Open Source. Gosta de escrever sobre Node.js, TypeScript, JavaScript e Angular. Nas horas vagas joga video-game, é marido e pai do Dudu.

Autor no iMasters

Follow @robertoachar

São Paulo, Brasil

Comentários