Criando um site estático com HexoJS

Creditos@MenteDigital

Saudações pessoal. Para matéria de hoje estarei dando algumas dicas para a criação de um blog estático com o gerador hexo, ferramenta com a qual criei este blog.
Então. Antes de qualquer outro passo, é recomendado que já tenhas o Node js instalado em sua máquina. No caso de ainda não estar instalado, Considerando que já tenhas instalado o Nodejs e o NPM (Node package Manager), o próximo passo é instalar o hexo em seu pc para então poder criar o blog.
(Recomendo que use um pc com Linux nestes casos, o windows não é a melhor das opções infelizmente.)

Abra a linha de comandos (cmd/shell) e digite:

$ sudo npm install hexo -g
Depois que concluir a instalação do Hexo, digite

hexo -v

e se estiver realmente instalado, vai retornar o log como abaixo (dependendo no entanto da versão).

janilson@mentedigital:~$ hexo -v
hexo-cli: 0.1.4
os: Linux 3.2.0–75-generic-pae linux ia32
http_parser: 1.0
node: 0.10.33
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.29
zlib: 1.2.3
modules: 11
openssl: 1.0.1j
janilson@mentedigital:~$

Se chegou até ai então está pronto para criar seu primeiro blog com Hexo. Então vamos a isso.
No passo a seguir, iremos criar a estrutra de um blog, com o comando

hexo init

Ainda na Linha de comandos, digite o seguinte: hexo init nome-do-seu-blog

Repare que nome-do-seu-blog é a pasta que será criada e também onde o hexo irá gerar os arquivos que farão rodar o blog. No caso eu escolhi “meusite” para o nome da pasta, logicamente deves escolher por qualquer que desejas. Ex:

hexo init meusite

De seguida teremos o resultado similar a este:

janilson@mentedigital:~/workshop$ hexo init meusite
INFO Copying data to ~/workshop/meusite
INFO You are almost done! Don’t forget to run ‘npm install’ before you start blogging with Hexo!
janilson@mentedigital:~/workshop

O passo a seguir, é instalar os modulos hexo; hexo-deployer-git; hexo-generator-archive; hexo-generator-category; hexo-generator-tag; hexo-render-ejs; hexo-renderer-marked; hexo-renderer-stylus; hexo-server. Isto com o comando npm install, conforme foi indicado quando criamos a pasta meusite. Antes porém, se reparar, por defeito o Hexo não vem com o plugin hexo-deployer-git. Podias instala-lo apenas no final, mas vale faze-lo no príncipio para poupar tempo e trabalho, e também porque hás de precisar mesmo dele. Então, abra o ficheiro package.json e adicione o hexo-deployer na lista de dependencias, ficando assim:

{ “name”: “hexo-site”, “version”: “0.0.0”, “private”: true, “hexo”: { “version”: “”
}, “dependencies”: { “hexo”: “^3.0.0”, “hexo-deployer-git”: “0.0.3”, “hexo-generator-archive”: “^0.1.0”, “hexo-generator-category”: “^0.1.0”, “hexo-generator-index”: “^0.1.0”, “hexo-generator-tag”: “^0.1.0”, “hexo-renderer-ejs”: “^0.1.0”, “hexo-renderer-stylus”: “^0.2.0”, “hexo-renderer-marked”: “^0.2.4”, “hexo-server”: “^0.1.2”
}
}

Agora sim pode executar o comando npm install para baixar e instalar todas dependencias listadas acima. No final teremos o resultado assim:

janilson@mentedigital:~/workshop/meusite$ npm install
npm WARN optional dep failed, continuing fsevents@0.3.5
npm WARN optional dep failed, continuing fsevents@0.3.5
npm WARN optional dep failed, continuing fsevents@0.3.0
> dtrace-provider@0.4.0 install /home/janilson/workshop/meusite/node_modules/hexo/node_modules/bunyan/node_modules/dtrace-provider
> node scripts/install.js
hexo-renderer-ejs@0.1.0 node_modules/hexo-renderer-ejs
├── ejs@1.0.0
└── lodash@2.4.1
hexo-generator-tag@0.1.0 node_modules/hexo-generator-tag
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-archive@0.1.1 node_modules/hexo-generator-archive
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-category@0.1.1 node_modules/hexo-generator-category
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-index@0.1.0 node_modules/hexo-generator-index
├── object-assign@2.0.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-renderer-marked@0.2.5 node_modules/hexo-renderer-marked
├── object-assign@2.0.0
├── marked@0.3.3
├── strip-indent@1.0.1 (get-stdin@4.0.1)
└── hexo-util@0.1.6 (ent@2.2.0, bluebird@2.9.14, highlight.js@8.4.0)
hexo-server@0.1.2 node_modules/hexo-server
├── object-assign@2.0.0
├── open@0.0.5
├── mime@1.3.4
├── bluebird@2.9.14
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── morgan@1.5.2 (basic-auth@1.0.0, depd@1.0.0, on-finished@2.2.0, debug@2.1.3)
├── connect@3.3.5 (utils-merge@1.0.0, parseurl@1.3.0, finalhandler@0.3.4, debug@2.1.3)
├── compression@1.4.3 (vary@1.0.0, on-headers@1.0.0, bytes@1.0.0, compressible@2.0.2, debug@2.1.3, accepts@1.2.5)
└── serve-static@1.9.2 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.12.2)
hexo-renderer-stylus@0.2.3 node_modules/hexo-renderer-stylus
├── stylus@0.50.0 (css-parse@1.7.0, mkdirp@0.3.5, sax@0.5.8, debug@2.1.3, source-map@0.1.43, glob@3.2.11)
└── nib@1.1.0 (stylus@0.49.3)
hexo-deployer-git@0.0.3 node_modules/hexo-deployer-git
├── moment@2.9.0
├── hexo-util@0.1.6 (ent@2.2.0, bluebird@2.9.14, highlight.js@8.4.0)
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.17)
└── hexo-fs@0.1.3 (escape-string-regexp@1.0.3, graceful-fs@3.0.6, bluebird@2.9.14, chokidar@0.12.6)
hexo@3.0.0 node_modules/hexo
├── hexo-front-matter@0.2.2
├── pretty-hrtime@1.0.0
├── abbrev@1.0.5
├── archy@1.0.0
├── titlecase@1.0.2
├── text-table@0.2.0
├── bluebird@2.9.14
├── moment@2.9.0
├── lodash@3.6.0
├── moment-timezone@0.3.1
├── strip-indent@1.0.1 (get-stdin@4.0.1)
├── tildify@1.0.0 (user-home@1.1.1)
├── hexo-i18n@0.2.1 (sprintf-js@1.0.2)
├── hexo-cli@0.1.4 (minimist@1.1.1)
├── js-yaml@3.2.7 (argparse@1.0.2, esprima@2.0.0)
├── hexo-util@0.1.6 (ent@2.2.0, highlight.js@8.4.0)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
├── minimatch@2.0.4 (brace-expansion@1.1.0)
├── through2@1.1.1 (xtend@4.0.0, readable-stream@1.1.13)
├── nunjucks@1.1.0 (chokidar@0.9.0, optimist@0.6.1)
├── warehouse@1.0.1 (graceful-fs@3.0.6, cuid@1.2.4, JSONStream@0.10.0)
├── cheerio@0.18.0 (entities@1.1.1, lodash@2.4.1, dom-serializer@0.0.1, htmlparser2@3.8.2, CSSselect@0.4.1)
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.17)
├── bunyan@1.3.4 (safe-json-stringify@1.0.1, dtrace-provider@0.4.0, mv@2.0.3)
└── hexo-fs@0.1.3 (escape-string-regexp@1.0.3, graceful-fs@3.0.6, chokidar@0.12.6)
janilson@mentedigital:~/workshop/meusite$

Beleza, temos o nosso blog acabadinho de ser criado. Se quiser ver como está, execute hexo server. Por defeito o hexo usa o ip 0.0.0.0 e a porta 4000, então o resultado será equivalente a esta mensagem:

janilson@mentedigital:~/workshop/meusite$ hexo server INFO Hexo is running at http://0.0.0.0:4000/ Press Ctrl+C to stop.

Traduzindo, a mensagem indica que o blog está rodando no endereço citado acima, logo, se acessar o mesmo verá a página inicial do blog, que por defeito também vem com uma postagem experimental, nomeado “hello world”, o querido Olá mundo!. Eís um print do visual da página.

E então. Já terminamos?
Hum.. Ainda não meu amigo. Tem paciência que agora precisamos fazer algumas modificações/configurações básicas e importantes. Vamos editar os ficheiros _config.yml e package.json, e já era. Primeiro abra o ficheiro package.json e altere o nome que lá está pelo nome do teu site e se preferir, também pode modificar a versão (linhas 2 e 3).

{ “name”: “tutorialhexo”, “version”: “0.0.1”, “private”: true, “hexo”: { “version”: “3.0.0”
}, “dependencies”: { “hexo”: “^3.0.0”, “hexo-deployer-git”: “0.0.3”, “hexo-generator-archive”: “^0.1.0”, “hexo-generator-category”: “^0.1.0”, “hexo-generator-index”: “^0.1.0”, “hexo-generator-tag”: “^0.1.0”, “hexo-renderer-ejs”: “^0.1.0”, “hexo-renderer-stylus”: “^0.2.0”, “hexo-renderer-marked”: “^0.2.4”, “hexo-server”: “^0.1.2”
}
}

O que segue é o contéudo do ficheiro _config.yml. Conforme veêm, precisamos trocar por exemplo o nome do Site, o slogan, a descrição, nome do admin (autor). enfim… Abra o ficheiro no teu editor de textos favorito, se tiver o Sublime Text instalado é só executar o comando subl _config.yml e modifique as informações referentes ao teu blog. Conforme ia dizendo, vamos alterar a principio as áreas onde estão:

#SITE(Nome, slogan, descrição, autor)
#URL(links permanentes)
#CATEGORY & TAG(categoria predefinida)
#DATE/TIME FORMAT(formato de data dos posts)
#DEPLOYMENT(repositório onde será hospedado o site no github)

Antes de alterado.

# Hexo Configuration
## Docs: http:
## Source: https:
# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child' and root as ‘/child/’
url: http:
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: enable: true line_number: true tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http:
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http:
## Themes: http:
theme: landscape

# Deployment
## Docs: http:
deploy: type:

Onde no final, depois de alterado teremos o seguinte resultado. Porém lembrando que deve estar configurado os detalhes sobre o teu site.

# Hexo Configuration
## Docs: http:
## Source: https:
# Site
title: tutorial Hexo
subtitle: Exemplo
description: Este é um site criado para exemplo
author: José Cage
language:
timezone:
# URL
## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child' and root as ‘/child/’
url: http:
root: /
permalink: :category/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: enable: true line_number: true tab_replace:
# Category & Tag
default_category: teste
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http:
date_format: DD-MM-YYYY
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: http:
## Themes: http:
theme: landscape
# Deployment
## Docs: http:
deploy: type: git repository: https: branch: [master] message:

Até aqui, considere que o teu blog já está pronto para ser visualizado por outras pessoas na web. Mas então.

Como posso coloca-lo na internet?
A resposta é símples. Olhe lá pra címa, no ficheiro _config.yml na linha 67 abaixo onde indicamos o repositório onde será feito o deploy (upload) do site. Para isto, antes deves te lembrar de criar o tal repositório no github com o nome do teu site, por exemplo: tutorialhexo.github.io (nome-do-seu-blog.github.io). Este mesmo nome é correspondente ao que colocas no _config.yml (repito: conforme no exemplo). É de extrema importância também ter em conta que para o site estar no endereço principal “nome-do-seu-blog.github.io”, devemos colocar na branch Master, poís no caso de na configuração colocarmos branch ghpages o site estará teoricamente num sub-diretório e não no endereço principal: nome-do-teu-perfil.github.io/nome-do-seu-blog.github.io (Que bagunça né?). Poís é, além de bagunçado fica tão feito a URL completa. Ninguém vai querer lembrar do teu blog se o endereço for tão longo e bagunçado como nome-do-teu-perfil.github.io/nome-do-seu-blog.github.io. Mas agora que percebeste e já terminaste de configurar o teu blog, vamos criar o nosso primeiro post e depois fazer deploy do site. Execute o comando $ hexo new seguido do titulo post dentro de duas aspas duplas. Ficaria:

janilson@mentedigital:~/workshop/meusite$ hexo new “Meu primeiro post”
INFO Created: ~/workshop/meusite/source/_posts/Meu-primeiro-post.md
janilson@mentedigital:~/workshop/meusite$

Done. Post criado com sucesso. Navegue até a pasta _posts dentro da pasta source e abra o ficheiro meu-primeiro-post.md. O que teremos na página é o titulo do post, a data em que foi escrita o post e também veremos o ítem tags.

title: "Meu primeiro post" date: 2015-03-28 17:04:37 tags: ---

Abaixo das três últimas linhas tracejadas, é onde vamos escrever o contéudo do post. Veja o exemplo:

title: "Meu primeiro post" date: 2015-03-28 17:04:37 category: Hexo tags: - Tutorial - Hexo - Generators --- Este blog nomeadamente "Tutorial Hexo" foi criado por [José Cage](http://github.com/JoseCage) para demostração do tutorial no qual fala como criar um blog estático usando o [Hexo](http://hexo.io). Qualquer questão ou dúvida que venham a ter refente a isto, podem contactar-me mandando email para [josejanuario7@gmail.com](mailto:josejanuario7@gmail.com), seguindo no twiter [@JanilsonPy](http://twitter.com/JanilsonPy) ou ainda pode me adicionar no facebook procurando por José Cage (que acredito ser o único com este nome na rede social) [José Cage no facebook](http://facebook.com/justinjanuario). Todo código gerado no final da criação do site pode ser visto no github: [Clique aqui](http://github.com/JoseCage/tutorialhexo.github.io). Sintam-se livre para visual/alterar segundo suas necessidades.

Prestou atenção no que adicionamos no ficheiro meu-primeiro-post.md além do texto abaixo das três linhas tracejadas? Se não, dá uma olhada e confirma. Adicionamos a Categoria a qual o post pertence e também adicionamos as tags (palavras chaves) do post. Sempre que criar um novo post não esqueça de colocar categoria e tag no mesmo.

Yupiii.

Finalmente terminamos de criar e configurar o nosso primeiro blog, então só nos falta fazer o deploy e mostrar para nossos amigos nas redes sociais…

Abra a linha de comandos (caso tenha fechado). Execute $ hexo generate para então gerar todos ficheiros estáticos na pasta public (pasta esta que o github pages entenderá como a pasta onde está o site). Veja um exemplo claro:

janilson@mentedigital:~/workshop/meusite$ hexo generate
INFO Files loaded in 677 ms
INFO Generated: js/script.js
INFO Generated: fancybox/jquery.fancybox.pack.js
INFO Generated: fancybox/jquery.fancybox.js
INFO Generated: fancybox/jquery.fancybox.css
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO Generated: fancybox/helpers/jquery.fancybox-media.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO Generated: fancybox/helpers/fancybox_buttons.png
INFO Generated: fancybox/fancybox_sprite@2x.png
INFO Generated: fancybox/fancybox_sprite.png
INFO Generated: fancybox/fancybox_overlay.png
INFO Generated: fancybox/fancybox_loading@2x.gif
INFO Generated: fancybox/fancybox_loading.gif
INFO Generated: fancybox/blank.gif
INFO Generated: css/style.css
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: Hexo/Meu-primeiro-post/index.html
INFO Generated: teste/hello-world/index.html
INFO Generated: archives/index.html
INFO Generated: archives/2015/index.html
INFO Generated: archives/2015/03/index.html
INFO Generated: categories/Hexo/index.html
INFO Generated: index.html
INFO Generated: tags/Tutorial/index.html
INFO Generated: tags/Hexo/index.html
INFO Generated: tags/Generators/index.html
INFO 33 files generatd in 1.75 s
janilson@mentedigital:~/workshop/meusite$

Agora sim, o comando seguinte é hexo deploy.
Depois que o executares, vai te solicitar para preencher as tuas credencias do github, propriamente, nome de usuário e senha. Se preencheres os dados certos ele vai fazer deploy e quando terminar poderá acessar o seu site na internet no endereço nome-do-seu-blog.github.io e terminamos…
Nota: Sempre que fizer alteração no site no repositório local, para que a mudança sejá igualmente feita no site online faça sempre um hexo deploy.

Mas…

Ainda não é tudo!

Ainda há outros pormenores e funções que podem/devem ser alteradas/adicionadas ao nosso site, como comentários, informações do autor.. Um monte de funcionalidades que com o tempo pode ir estudando e colocar no site. Mas de momento é tudo.

Abaixo deixo alguns links oficiais do Hexo, para poderem ver mais sobre o generator e quiça, lá poderão ver algumas dicas para personalizar o site.

-> Site oficial
-> Configuração
-> Plugins
-> Temas
-> Guia de Deploy

Qualquer dúvida ou sugestão que tiverem acerca do artigo ou do blog em sí deixem no comentário ou podem mandar uma mensagem no Facebook ou escrever um email para josejanuario7@gmail.com..
Até breve..


Originally published at mentedigital.github.io.

Show your support

Clapping shows how much you appreciated José Cage’s story.