5 de janeiro de 2014

Hexo - criando um blog ao estilo "miojo"

Você é desenvolvedor web e gosta de escrever em Markdown? Então aprenda como fazer um blog em apenas 3 minutos com o Hexo!

O Hexo é um framework para criação de blogs, escrito em NodeJS para geração de arquivos estáticos. Com ele, é possível criar um blog em apenas 3 minutos! Quer apostar? ;)

Primeiros passos

Primeiramente você precisa ter o NodeJS e o Git instalados no seu computador. Se ainda não tem e não sabe como fazê-lo, recomendo esse tutorial para instalar o Node, ou esse outro, direto do site do Hexo, mostrando a melhor forma de instalar em qualquer sistema. Com o Node e o Git instalados, vamos instalar o Hexo.

Instalando o Hexo

Para instalar o Hexo, utilize o comando abaixo no seu terminal:

[sudo] npm install -g hexo

Esse comando instalará o Hexo globalmente, deixando o comando hexo disponível no terminal.

Criando os arquivos

Agora vamos criar os arquivos necessários para o nosso projeto.
Crie um diretório chamado my-hexo-blog. Acesse esse diretório no seu terminal, e execute o comando:

hexo init

E pronto!

Será gerada a seguinte estrutura de arquivos:

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

Explicarei mais à frente sobre essa estrutura.

Iniciando o Server

Agora, para ver seu blog rodando, execute o comando:

hexo server

Se tudo correu bem, você receberá a seguinte mensagem:

[info] Hexo is running at localhost:4000/. Press Ctrl+C to stop.

Agora acesse http://localhost:4000/ no seu navegador e veja como ficou seu blog!

Muito fácil não? Um blog like a miojo :P

Agora vou mostrar como fazer algumas configurações mais básicas para o seu blog, como trocar de tema, mudar título, etc., e depois fazer deploy para o Github Pages, para que você tenha um local para hospedar seu blog.

O arquivo _config.yml

Nesse arquivo fica toda a configuração padrão do blog. Cada tema pode ter um _config.yml também, para configurações específicas do tema. Não tem muito segredo em mexer nele.

Digamos que o YML (pra quem não conhece), seja um JSON sem os brackets {} e as aspas duplas "". Ele trabalha com base na indentação.

Exemplo de um JSON:

{
  "propriedade": "valor",
  "propriedade2" : "valor2",
  "propriedade3" : {
    "propriedade4" : "valor4"
  }
}

O YML referente a esse JSON ficaria assim:

propriedade: valor
propriedade2: valor2
propriedade3:
  propriedade4: valor4

Ao editar o arquivo _config.yml, vai ver algumas propriedades como title, author, url, etc. Mude conforme as configurações do seu blog. Para ver para que serve cada um, consulte esse link.

Escrevendo seu primeiro post

Para criar um novo post, execute o comando no terminal:

hexo new "Meu novo post"

Isso irá criar um arquivo meu-novo-post.md no diretório source/_posts/ com o seguinte conteúdo:

title: Meu novo post
date: 2014-01-05 20:53:29
tags:
---

Abaixo dos 3 traços --- é onde você deve começar a digitar o seu post no formato Markdown. As variáveis title, date e tags são usadas no tema para mostrar essas informações ao usuário.

Para fazer com que Hexo assista todas as alterações no seu post enquanto você escreve, execute o servidor com o parâmetro --debug:

hexo server --debug

Pressione Ctrl+C quando quiser parar.

Gerando os estáticos

Agora você precisa gerar os arquivos estáticos que serão “upados” para o Github Pages. Para isso, rode o comando no terminal (no diretório my-hexo-blog):

hexo generate

Perceba que o Hexo criou um diretório public, com todos os arquivos estáticos necessários para o seu blog funcionar.

PS.: Você pode mudar o nome dos diretórios public e source no arquivo _config.yml

O Hexo já vem com um post padrão Hello World. Você pode remover esse arquivo do diretório source/_posts/ sem maiores problemas.

Sempre que gerar um novo post, para gerar os estáticos, sempre execute o comando hexo generate, para que os estáticos estejam atualizados com a última versão dos seus posts.

Deploy para Github Pages

Para fazer deploy para o Github Pages é bem simples. Configure no arquivo _config.yml a propriedade deploy (no final do arquivo), dessa forma:

deploy:
  type: github
  repository: git@github.com:fdaciuk/fdaciuk.github.io.git

No valor de repository, inclua o seu repositório.

O Github te dá um subdomínio com o seu nome de usuário para você usar. No meu caso, ficou como http://fdaciuk.github.io.

Se você quiser usar esse domínio para o seu blog, crie um repositório no seu Github chamada your_username.github.io, trocando o your_username pelo seu nome de usuário. Copie a URL do repositório e cole no _config.yml, na propriedade repository, como mostrado acima.

Depois execute o comando:

hexo deploy

E pronto! Aguarde algus minutos e já poderá acessar seu blog em your_username.github.io.

Agora seu blog está pronto e publicado!

Você vai perceber que o Hexo criou um diretório .deploy, onde ficarão os arquivos que irão para o seu repositório ao rodar o comando de deploy. Quando você cria um post novo, o Hexo vai enviar somente os arquivos alterados para o Github.

Veja que os diretório public e .deploy são gerados pelo Hexo. Eles contém somente os arquivos estáticos. Logo, se você precisar removê-los, não há problema algum. Pode fazer sem medo :)

Para saber mais sobre o Github Pages, siga esse link.

Domínio personalizado usando Github Pages

Se você notar, o domínio do meu blog é https://blog.da2k.com.br. Para fazer isso é muito simples. Siga os procedimentos desse link para adicionar uma entrada CNAME que irá apontar para o endereço do seu blog.

Depois, crie um arquivo chamado CNAME no diretório source com a URL do seu blog. No meu caso está assim:

blog.da2k.com.br

Execute o hexo generate para gerar os estáticos e copiar o CNAME para a raiz de public. Então, execute o hexo deploy e pronto! Aguarde até que o DNS se propague. Isso pode levar algumas horas. Em breve, seu blog estará no seu domínio personalizado ;)

Considerações sobre arquivos estáticos

Ao fazer o deploy do seu projeto, o Hexo irá gerar apenas arquivos estáticos (HTML, CSS e JS). Isso traz algumas vantagens e desvantagens.

A vantagem disso é que o conteúdo será carregado muito mais rápido do que se fosse feito em um software como o WordPress, por exemplo, pois o servidor não precisará processar nada, somente entregar para o nevagador do usuário o HTML, CSS e JS, que o navegador vai tratar de interpretar.

A desvantagem é que você perde a parte dinâmica da coisa. Não vai ser possível fazer, por exemplo, uma página de busca, comentários nativos, entre outras coisas que talvez facilitariam seu trabalho.

Claro que existem algumas soluções para isso. No caso da busca, o Hexo por padrão utiliza o Google, com a URL do seu site sendo chamada antes de fazer a busca (seusite.com.br: busca por algo). Isso faz com que o Google procure resultados somente no seu site. Mas o usuário vai pro site do Google pra ver o resultado e depois volta novamente para ver o conteúdo.

Para comentários, temos os plugins do Disqus, Google+, ou Facebook. Todos resolvem bem o problema de comentários para arquivos estáticos. Nesse caso, não há a necessidade de ter os comentários nativos.

A dica que fica é: coloque sempre na balança para ver qual a melhor solução para o seu problema. Para desenvolvedores, um gerador estático sempre é uma excelente solução. Mas se estiver fazendo um blog para um cliente, onde ele vai alimentar o conteúdo do site, não seria boa ideia deixar ele escrever em Markdown, concorda? ;)

Conclusão

Estou gostando bastante de trabalhar com o Hexo. Já estava para começar a blogar faz um tempo, e o Hexo me proporcionou uma excelente experiência para começar a fazer isso muito rapidamente. Espero que você também goste!

Até os próximos artigos!

javascript

nodejs, hexo