Hexo.js & Github Pages

Hexo.js é um gerador de páginas estáticas escrito em Node.js, que pode ser configurado para hospedagem em github pages.

Transcript

1. Hexo.js Como fazer um blog antes do café ficar pronto
2. Ricardo Gouveia Ciência da Computação - UFOPA - 2013 Estagiário - Hoolyn Q @ricardogouveia3 a
3. → Introdução: ↪ Definições: Blog framework / Página Estática / Hexo ↪ Pré requisitos do Hexo ↪ Vantagens do Hexo sobre os outros → Básico: ↪ Como o Hexo funciona? ↪ Instalação ↪ Criando um blog ↪ Configurando o seu blog 1 ↪ Postando e prevendo o seu blog → Intermediário: ↪ Configurando seu blog 2 ↪ Github & Github Pages ↪ Configuração do Github Pages → Avançado: ↪ Embedded JavaScript ↪ Modificando templates → Referências TÓPICOS
4. INTRODUÇÃO
5. Blog Um site onde uma pessoa escreve sobre opiniões pessoais, atividades ou experiências. Framework Um plano estrutural ou base de um projeto / Uma estrutura ou armação suportando ou contendo algo. DEFINIÇÕES
6. Página Estática É uma página onde o arquivo HTML é entregue ao cliente da mesma forma em que é armazenado no servidor (oposto de aplicação web).
7. Hexo.js É um gerador de páginas estáticas escrito em Javascript (Node.js).
8. Git Git é um sistema de controle de versão d i s t r i b u í d o e u m s i s t e m a d e gerenciamento de código fonte, com ênfase em velocidade. Ele nos permite armazenar diferentes versões do blog, navegar entre elas, e mandar para o github. Node.js Node.js é um interpretador de código JavaScript server-sido que permite a c r i a ç ã o d e a p l i c a ç õ e s d e a l t a escalabilidade, capazes de manipular dezenas de milhares de conexões simultâneas, numa única máquina física Aqui, ele ajuda a gerar as páginas do Blog e rodar o servidor local. Você também vai precisar de um computador com shell, um editor de texto… PRÉ-REQUISITOS
9. Poucas dependências Desenvolvimento fácil e rápido Fácil hospedagem (opções gratuitas) Geração de arquivos extremamente rápida VANTAGENS
10. BÁSICO
11. COMO O HEXO FUNCIONA blog iniciado publicado configuração hexo server pré-visualização em localhost hexo new post/page “title” arquivo title.md gerado hexo generate arquivos estáticos gerados hexo deploy arquivos estáticos enviados para o servidor
12. Dependências: Hexo: INSTALAÇÃO sudo apt-get install git nodejs npm sudo npm install hexo-cli -g (ubuntu & derivados)
13. Gerar arquivos base: Instalar pacotes gerados: CRIANDO UM BLOG hexo init npm install hexo --no-optional --save npm install
14. . !"" _config.yml !"" package.json !"" scaffolds !"" scripts !"" source | !"" _drafts | #"" _posts #"" themes CRIANDO UM BLOG
15. Abra o arquivo: blog/_config.yml CONFIGURAÇÃO DO BLOG 1 Configurações básicas: # Site title: | subtitle: | description: | author: # Date / Time format date_format: | time_format:
16. hexo new post “título” POSTANDO E PREVENDO O BLOG Seu post está em blog/source/_posts/título.md escreva em markdown
17. SINTAXE DO MARKDOWN # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 *ênfase*/_ênfase_ **super-ênfase**/ __super-ênfase__ ~~tachado.~~ 1. Lista 2. Lista 1. Lista dentro de lista * Lista não ordenada [texto](url) [texto](url “alt”)  `code` ```code block``` | Tabela | texto | | ------- |:------:| | texto | texto | >Citação Ou escreve em html mesmo… (!!)
18. hexo server POSTANDO E PREVENDO O BLOG
19. INTERMEDIÁRIO
20. Abra o arquivo: blog/_config.yml CONFIGURAÇÃO DO BLOG 2
21. Configure o tema blog/themes/*tema*/_config.yml Mude o CSS blog/themes/*tema*/source/css CONFIGURAÇÃO DO BLOG 2
22. O Github é uma rede social de repositórios Git. GITHUB & GITHUB PAGES Linux, AngularJS, JQuery, RoR, Hexo…
23. O Github Pages uma funcionalidade gratuita do Github que permite a hospedagem de páginas estáticas para pessoas, organizações e repositórios. GITHUB & GITHUB PAGES
24. Crie um repositório com a seguinte nome: seu-username.github.io Clone o repositório na sua máquina: CONFIGURAÇÃO DO GITHUB PAGES git clone seu-username.github.io.git
25. Copie o conteúdo da pasta /blog/ para a pasta /seu-username.github.io/ Configure o deploy em /_config.yml CONFIGURAÇÃO DO GITHUB PAGES deploy: type: git repo: https://github.com/seu-username/seu-username.github.io.git
26. Gere os arquivos estáticos e mande para o repositório: CONFIGURAÇÃO DO GITHUB PAGES hexo generate hexo deploy Veja online em http://seu-username.github.io
27. AVANÇADO
28. São linhas de código que recuperam informações dos arquivos de configuração e jogam dentro dos arquivos HTML EMBEDDED JAVASCRIPT FILE.EJS <h1><% config.title %></h1> FILE.HTML <h1>Título</h1> _CONFIG. YML title: Título
29. MODIFICANDO TEMPLATES Os templates são arquivos .ejs que funcionam como instruções para montagem do site PAGE.EJS <%- partial('_partial/article', {post: page, index: false}) %> Importe o conteúdo de “/_partial/article.ejs” | Tipo de post: página, No index? não
30. MODIFICANDO TEMPLATES Tema Casper: fazendo um menu
31. MODIFICANDO TEMPLATES As modificações dos templates alteram TODOS os objetos desse tipo, ou que incluem esse componente, tanto novos como os já criados
32. REFERÊNCIAS
33. REFERÊNCIAS https://hexo.io/docs/ https://nodejs.org/en/docs/ http://www.criarweb.com/ artigos/256.php /* Pg Estática vs Dinâmica*/ http://jekyllrb.com/docs/ frontmatter/ http://blog.da2k.com.br/ 2014/01/05/hexo-criando-um- blog-ao-estilo-miojo/ https://pages.github.com http://www.embeddedjs.com/ http://lucasmaiaesilva.com.br/ tecnologias-que-usei-para- criar-esse-blog/