Configurando Jekyll em Máquina Local e VPS
linux • jekyll • deploy • remote • blog • 2015

Configurando Jekyll em Máquina Local e VPS

Há alguns meses, decidi voltar a produzir um blog. Pensei em reviver um dos meus blogs antigos, mas eu queria algo novo e que refletisse, realmente, minhas vontades, durante a configuração e utilização.

Assim, fui apresentado ao Jekyll, um gerador de sites estáticos, que utiliza arquivos de texto, contendo as postagens, a serem convertidas através de markdown. Para saber mais sobre o Jekyll, acesse o site.

Configuração da Máquina Local

Primeiramente atualizar o pacote do ruby, que pode ser encontrado no Site Oficial, mas é aconselhável que efetue a instalação/atualização através do gerenciador de pacotes de sua distro, caso esteja utilizando MAC, siga essas instruções e, caso queira tentar utilizá-lo no Windows, siga essas. Na minha situação, utilizando arch, apenas atualizei o pacote com o comando:

# pacman -S ruby

Após a instalação/atualização do ruby, efetuaremos a instalação do jekyll através das gems do ruby.

$ gem install jekyll

Para finalizar, instalaremos/atualizaremos o pacote git, que nos possibilitará fazer o deploy do nosso blog.

# pacman -S git

Criando o Blog (local)

No site da ferramenta podemos encontrar um guia para utilização, contendo o básico e coisas sobre a customização.

Para iniciarmos o blog é necessário navegar até onde desejamos guardar os arquivos relacionados a ele e executar o comando abaixo:

$ jekyll new myblog

Na linha acima, vemos a utilização da ferramenta jekyll seguido do comando new e por último o nome do diretório contendo os arquivos do blog. Feito isso, podemos mudar para esse diretório e verificar no browser como está o blog.

$ cd myblog
$ jekyll serve

Note que demorará um pouco para construir o blog e aparecer “Server address: http://127.0.0.1:4000/” que é o endereço a ser acessado para ver pelo navegador.

Dê CTRL+C no terminal para encerrar o server e vamos inializar o repositório git no diretório do blog, para que as alterações possar ser providas ao server.

$ git init
$ git add .
$ git commit -m "Commit Inicial"

Configuração do servidor/VPS

Nesse caso, considerarei que já tenha um server configurado com LAMP, LEMP ou outro serviço web. Também, irei considerar que o diretório público html esteja em /var/www.

No meu caso, minha VPS está com Debian Jessie, então a linha para instalar o git é:

# apt-get update && apt-get install git-core

Agora vamos instalar o ruby e o jekyll, basicamente da mesma forma como na máquina local.

# apt-get install ruby-full
$ gem install jekyll

Após as instalações vamos criar a pasta do repositório git.

$ cd ~/
$ mkdir repo && cd repo
$ mkdir myblog.git && cd myblog.git
$ git init --bare

Após inicializado, precisamos configurar a ação (hook) post-receive, um shell script que o git executará quando os arquivos forem ‘enviados’ pela máquina local.

$ vim repo/myblog.git/hooks/post-receive

Aqui usei o vim mas poderá ser utilizado o editor de texto que melhor se adequa ao seu uso, por exemplo: nano, emacs etc.

Cole o conteúdo abaixo no arquivo post-receive, encontrado no diretório hooks.

#!/bin/bash -l

###
# Faça as alterações que melhor lhe atenderem

### GIT_REPO - o diretório que se tornará o repositório git
GIT_REPO=$HOME/repo/myblog.git

### TMP_GIT_CLONE - diretório temporário para para a construção do site/blog
TMP_GIT_CLONE=$HOME/tmp/git/myblog

### PUBLI_WWW - diretório www público
PUBLIC_WWW=/var/www/myblog

git clone $GIT_REPO $TMP_GIT_CLONE
jekyll build --source $TMP_GIT_CLONE --destination $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

Após salvar o arquivo daremos permissão de execução:

$ chmod +x repo/myblog.git/hooks/post-receive

Finalizando colocaremos uma configuração no arquivo do Nginx:

# vim /etc/nginx/sites-available/site.example.com
server {
    listen       80;

    root /var/www/myblog/;
    index index.html;

    server_name site.example.com;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;


    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
         root /usr/share/nginx/www;
    }

    # do not serve pages starting with .
    location ~ /\. {
         log_not_found off;
          deny all;
    }

    ### This location definition prevents Nginx from serving any files which begin
    ### with a dollar sign, so Nginx will refuse to serve out a temp file if you
    ### are doing any editing inside a web-available directory
    location ~ ~$ {
        access_log off;
        log_not_found off;
        deny all;
    }

    ### These next two locations simply prevent Nginx from logging every time the
    ### favicon & robots.txt files are accessed, to keep the logs clean
    location = /robots.txt {
      access_log off;
      log_not_found off;
    }

    #don't need these for static site
    location ~ \.(aspx|php|jsp|cgi)$ {
            return 410;
            access_log off;
    }

    location = /favicon.ico {
      access_log off;
      log_not_found off;
    }

    location ~ \.js {
      access_log off;
      log_not_found off;
    }

    location ~ \.css {
      access_log off;
      log_not_found off;
    }
}

Após salvar o arquivo, crie um link simbólico em sites-enabled e é só reiniciar o nginx:

# ln -s /etc/nginx/sites-available/site.example.com /etc/nginx/sites-enable/site.example.com
# systemctl restart nginx

Caso você utilize apache:

# vim /etc/apache2/sites-available/000-default.conf
<VirtualHost *:80>
ServerName site.example.com
DocumentRoot /var/www/myblog
<Directory /var/www/myblog>
	Options Indexes FollowSymLinks MultiViews
	AllowOverride All
	Order allow,deny
	allow from all
</Directory>

RewriteEngine On
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule (/.+) $1.html [L,QSA]
</VirtualHost>

E insira seu servername no arquivo hosts:

# echo 127.0.0.1 site.example.com >> /etc/hosts

Nota: Não testei com o servidor apache, por isso não dou 100% de certeza que funcione a configuração.

Finalizando a máquina local

Acessando o diretório local (o atual repositório git do bloig/site), executaremos os comandos:

$ cd myblog
$ git remote add droplet user@site.example.com:repo/myblog.git
$ git push droplet master

Caso em sua VPS a porta para acesso ssh não seja a padrão, 22, utilize os comandos abaixo:

$ cd myblog
$ git remote add droplet ssh://user@site.example.com:porta/$HOME/repo/myblog.git
$ git push droplet master

Lembrando que onde encontra-se user é o seu usuário na VPS, site.example.com é o ip ou domain name e porta a porta de acesso ssh.

Assim, qualquer postagem, mudança de layout, remoção de conteúdo será atualizado, poucos segundos após a execução dos comandos básicos:

$ git add .
$ git commit -m "Meu Commit"
$ git push droplet master

#E aí, o que acharam?

Deixem suas sugestões, comentários, críticas e dúvidas logo abaixo.