Criando seu site com Hexo

##Introdução

Nesse post vamos aprender a criar um site estático com um framework de blog, chamado Hexo.
Como na descrição do próprio framework o Hexo é rápido, simples e poderoso. O grande diferencial e que me fez adotar o Hexo para criar esse blog é que é realmente simples, e pelo fato de fazer um deploy diretamente para o GitHub Pages facilitando assim muito a produção e o ambiente de desenvolvimento.
Claro que você pode levar outras coisas em conta, mas se você quer aprender coisas novas, usar linha de comando e ainda assim gerar artigos você poderá fazer isso com Hexo.

##Características

1. Rapidez para gerar os arquivos. Com a base feita em nodejs, isso agiliza e muito a hora de produção e criação do seu blog/site.
2. Apenas um comando para publicar, ou seja, digitou hexo deploy no seu terminal e seu blog é publicado no mesmo momento.
3. Suporta Markdown, é uma linguagem de marcação, ou como eles dizem, não é uma linguagem de marcação, é uma forma de você escrever o seu site sem a necessidade de ficar abrindo e fechando tags em HTML etc. Pode ser estranho no início, mas a curva de aprendizado é bem rápida.
4. Suporta Plugins, não é um wordpress da vida, mas também tem suporte a alguns plugins que iremos falar mais abaixo.
5. Estrutura de pastas de fácil entendimento.
6. Permite personalização através de temas, (futuramente irei postar como criar e personalizar temas).

##Iniciando

Para começar você deve ir até o site do Hexo e presumindo que você já tenha o nodejs instalado, caso não tenha, vá até o site do NodeJs e instale para o seu sistema operacional, aqui no meu caso eu uso Windows (e não tenho problema com isso ;p).

Feito isso basta rodar o comando:

npm install hexo-cli -g

Feito isso você poderá executar os comandos do hexo através do terminal do cmd. Apenas uma observação aqui.

Você pode configurar o windows de uma forma que você consiga executar node, ruby, git etc, tudo pelo cmd, configurando as variáveis de sistema. Qualquer dúvida deixem nos comentários.

Os próximos comandos de exemplo são:

hexo init blog
cd blog
npm install
hexo server

O primeiro deles inicia o projeto dentro de uma pasta chamada blog no diretório que você estiver.
O segundo entra dentro da pasta blog.
O terceiro comando vai instalar todas as dependências do Hexo
E o quarto e último você vai rodar o servidor localhost do seu projeto, que por padrão fica no localhost:4000.

Com isso já temos um blog de exemplo sendo executado, cabendo a nós apenas a personalização do mesmo. E claro a criação de conteúdo e também o deploy para o GitHub Pages.
Então vamos lá que ainda temos bastante coisa para ver ^.^

###Página de Exemplo do Blog

Na página de demonstração do Hexo ele nos apresenta a mais 3 comandos novos.

1. hexo new “Meu novo Post”
2. hexo generate
3. hexo deploy

O primeiro faz com que o hexo crie um novo post sendo que o que estiver entre as aspas será o título do post. Feito isso o hexo irá criar um arquivo com o nome do seu post, preenchendo os espaços vazios com hífens. O arquivo vai ficar dentro da pasta source/_post. Abrindo ele você poderá criar todo o conteúdo que você deseja para o seu post.

A primeira estrutura que aparece no arquivo é:

title: Meu novo Post
date: 2015-07-22 19:59:28
category: Desenvolvimento web
tags:
 - hexo
 - sites estáticos
 - github pages
 - tutorial
---

Title: Definirá o Título da página e do post
date: Data que o post foi criado
category: Você pode criar categorias para agrupar seus posts
tags: Serve como uma categoria também porém mais fraca.

Abaixo dos - - -

Ai você pode criar o que você quiser usando markdown para formatar.
Teremos um guia de sintaxe markdown em breve não se preocupe, por hora essa página pode te ajudar Markdon Basics.

###Personalizando

A princípio quando instalamos o Hexo e rodamos o comando hexo server no nosso terminal, acamos sendo redirecionado para a página de exemplo e também com o tema padrão que vem com o hexo. O tema padrão é o landscape você pode substituir esse tema facilmente através da lista de temas do próprio hexo que pode ser encontrada na lista de temas ou aqui no GitHub(que é bem mais abrangente)

Depois de escolher o tema que você quer, basta seguir a documentação do mesmo para configurar ele e fazer funcionar de acordo com a sua necessidade, em relação a post, recursos e etc.

Outras coisas importantes pessoal sobre personalização e entra também a questão de configuração, é dar uma atenção especial ao seu arquivo _config.yml pois através dele você pode configurar qualquer coisa no seu blog/site e principalmente é aqui que você deve alterar o nome do tema na linha theme para o nome do tema que você baixou e escolheu.

As informações são separadas por blocos e autoexplicativas, caso tenham dúvidas podem perguntar nos comentários e caso haja necessidade eu crio um outro post explicando linha a linha do arquivo.

###Plugins

Plugins são outras fontes muito valiosa para qualquer blog/site. No caso do Hexo não poderia ser diferente e o mesmo possui uma lista de plugins. Temos plugins diversos para diversas ações, desde melhorar o código gerado, com para deploy que iremos usar na seção abaixo. Caso tenha alguma dúvida você pode estar lendo a página de plugins na documentação ou a própria página do plugin que você escolheu e está com dificuldade. A documentação está em inglês por enquanto, não sei se alguém está trabalhando na tradução, mas eu estou e falta traduzir a API e três páginas apenas da documentação. Então logo mais terá em português BR também

###Deploy GitHub Pages

Para fazer deploy direto para o dominio.github.io você terá que alterar isso no seu arquivo de _config (aqui você pode optar pelo do Hexo ou pelo do seu tema, caso esteja usando algum tema que tenha essa opção.)
Antes de mais nada pessoal a primeira coisa que deve ser feita é criar o repositório no GitHub com o nome do seu site, ex: meusite.github.io, depois disso vá até a página de deploy e siga as instruções para que você possa fazer o deploy diretamente para o seu site.

A segunda coisa a fazer, conforme está na página é a instalação do plugin do git com o comando

$ npm install hexo-deployer-git --save

Depois disso no seu arquivo _config.yml você altera ou cria a opção:

deploy: 
  type: git
  repo: https://github.com/seurepositório/meusite.github.io.git

E por último quando estiver pronto para fazer o deploy do seu site para o GitHub Pages, basta executar o comando:

hexo deploy --generate

Que ele irá gerar todos os arquivos estáticos do seu site/blog e irá automaticamente publicar no seu site.

Bom pessoal, espero que tenha ajudado vocês a aprender alguma coisa legal, nesse aritgo e qualquer dúvida só chamar nos comentários.

Obrigado e Abraços…