1º MEETUP NODEJS CEARÁ - NUG-CE

Static Generators

No Backend, No problem!

Felipe Sousa

Front-End Developer

Web e Mobile <3

Linux

Pra quê serve?

Porquê de uma nova alternativa?

Pra quem serve?

O que são Static Generators

Geradores estáticos usam várias funcionalidades que estamos acostumados a utilizar, como includes, loopings, condições, etc. Porém sem banco de dados, sem dependências server-side, tudo é gerado para um HTML simples e puro.

Lógica de funcionamento

  • Arquivos de Configuração

  • Templates

  • Conteúdo / Artigos

Arquivos de Configuração

title: "Your Title"
titleSecondary: "Your Description here..."
author: "Fulano não sei das quantas"
language: "pt-BR"
permalink: :year/:month/:title
_config.yml

Templates


article.ejs

Artigos

---
title: "Como eu nasci"
tags: ['nascimento', 'birth', 'eu', 'mae', 'pai']
comments: true
image: 'MinhaFotoDivando.jpg'
---

// body article
name_article.md

Tipos de Static Generators


www.staticgen.com

A fast, simple & powerful blog framework.

hexo.io/

Características

  • NodeJS
  • Open Source
  • Responsivo
  • Plugins
  • Comentários
  • Temas
  • Grunt (GULP GANHA FÁCIL)
  • Stylus <3
  • ...

Estrutura

source/
scaffolds/
theme/
-----scripts/
-----layout/
-----source/
-----Gruntfile.js
-----package.json
-----_config.yml
package.json
_config.yml 
menu:
- INICIO: /
- SOBRE: /about
- PROJETOS: /projects
- ARTIGOS: /archives
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
theme/_config.yml

Plugins

  • Sistema de busca
  • Paineis de administração
  • Feed
  • Sitemap
  • Mapas
  • Deploy
  • ...

Módulos

  • UNCSS
  • Livereload
  • Imagemin
  • Spotify/Deezer
  • CoffeScript
  • Less/SASS
  • Jade
  • ...

Deploy

deploy:
	type: git
	repo: https://github.com/username/repositoryName.git
	branch: master
_config.yml

Como começar?

$ npm install hexo-cli -g
$ hexo init "Name"
$ cd Name/
$ [sudo] npm install
$ hexo server

Deploy

$ hexo generate
$ hexo deploy

Perguntas?

@felipz_sousa

/felipesousa

felipesousa.github.io

Até a próxima!