Recentemente mudei a plataforma que usava para publicar os posts do blog. Começei a publicar usando o Hexo, que é uma ferramenta incrível
para gerar arquivos estáticos para o seu blog ou para a página do seu projeto, como bem descrito nesse post do Fernando Daciuk.
Porém, no meio do caminho, conheci o Harmonic que é um projeto feito por desenvolvedores da comunidade JS brasileira e que está sendo escrito, já com as mais novas implementações da Javascript(ES2015/ES6 - ES2016/ES7). Isso me chamou a atenção. Vi a oportunidade de, além de publicar, aprender mais sobre o desenvolvimento de uma ferramenta dessas e também possibilidade de construir temas para o Harmonic.

Pois bem, eis que surgem as demandas.

Começei a construir meu próprio tema, o harmonic-theme-profile, e aprendi muito com essa iniciativa. Mas surgiram alguns contratempos referentes ao workflow.

O “Problema”

No Harmonic não temos a opção de fazer o deploy diretamente do CLI como encontramos no Hexo. Mas isso não é um impedimento, muito pelo contrário. É um estímulo para contribuir com o projeto. Não acham? (Veja aqui como contribuir)

A Resolução

Enquanto não temos essa feature no CLI do Harmonic, podemos contornar esse nosso “problema” com uma ferramenta muito útil para o front-end.
E é aqui que entra o Gulp. Um automatizador de tarefas para front-end que da conta de várias tarefas repetitivas no workflow.

Nesse caso, ele vai nos ajudar a fazer o deploy dos estáticos do blog para o Github Pages.

Temos que seguir alguns passos antes de ter condições para fazer o deploy, vamos lá?

1. Instalar o Gulp globalmente com o camando: npm install --global gulp
2. Instalar o Gulp como devDependencies do seu projeto: npm install --save-dev gulp
3. Instalar o gulp-gh-pages que é o plugin que fará o deploy: npm install --save-dev gulp-gh-pages
4. Criar na raiz do seu projeto um gulpfile.js

Depois de seguir esses passos, já temos condições de criar a task que irá realizar o deploy.

Nosso Gulpfile parcial ficará assim então:

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

Depois de fazer os requires do gulp e do gulp-gh-pages, começamos a escrever a task. Como primeiro parâmetro passamos o nome da task, deploy, e como segundo, uma função anônima. Nela está descrito o diretório onde queremos que os arquivos sejam pegos, no caso ./dist/**/*. Este comando irá, recursivamente, pegar todas as pastas e arquivos, para depois, com a função ghPages() realizar o deploy de fato.

Aqui temos algumas opções. Vamos inserir um objeto na função ghPages() com duas propriedades, remoteUrl e branch. A primeira irá dizer ao plugin para qual repositório queremos enviar os arquivos selecionados e a segunda escolheremos qual branch queremos que ele ocupe no github, no caso, a master. Mas você pode conferir mais opções para o deploy na página do projeto gulp-gh-pages no Github.

Bem, o resultado final do nosso gulpfile até aqui é o seguinte:

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages({
      remoteUrl: 'https://github.com/youruser/youruser.github.io.git',
      branch: 'master'
    }));
});

Com tudo ok, é só irmos para o terminal, rodar a task assim: gulp deploy, nós autenticarmos no github e pronto. Nossos arquivos estáticos estarão atualizados no Github Pages.

Conclusão

Vimos como é simples usar o Gulp para fazer deploy no Github Pages. Suas funcionalidades para o front-end são inúmeras e não param de crescer. Recomendo fortemente que você separe um tempo para conhecer mais a fundo o Gulp.

É isso. Espero que com esse passo a passo, consigamos resolver esse “problema” do deploy no Harmonic.

Um abraço e até a próxima.

UPDATE: Voltei a publicar com Hexo e o tema do Harmonic não está mais sendo desenvolvido, mas acredito que o post ainda é útil.