Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jekyll the static site generator

C8156ce921d0d9b743cebff74c96d6c8?s=47 bruno2ms
August 20, 2015
Technology
0
23

Jekyll the static site generator

Jekyll the static site generator

C8156ce921d0d9b743cebff74c96d6c8?s=128

bruno2ms

August 20, 2015
Tweet

More Decks by bruno2ms

See All by bruno2ms
Will Js Kill CSS
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
0
150
Google Design Sprints
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
0
140
Building UX Team
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
3
61
Jekyll the static site generator Liquid For Designers
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
0
32
Bad Leaders - Manual de como falhar como líder
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
0
16
Lean UX
C8156ce921d0d9b743cebff74c96d6c8?s=48 bruno2ms
3
230

Other Decks in Technology

See All in Technology
Micro frontends and micro services
Acc7788c2c6d2c4b43b875fcad502cd2?s=48 kashif98
0
160
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
10
19k
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
325ce6fcd0a74ff78990b8632817da55?s=48 yukihirochiba
0
3.3k
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
2f73f93f91c4401b0baf12029226a681?s=48 tobachi
PRO
5
1.9k
Simplify Cloud Native Security with Trivy
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
0
810
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
8785139c395ce2345ce535822b522dde?s=48 kentosuzuki
1
560
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
860
Goで実装するブランドネットワークとの接続ポイント
E10d51de51c08e913216385be87dc1ca?s=48 pongzu
2
300
プロダクトマネージャーの役割と育成、評価
4ab5447926c5d5cb2c2ff6873b626d2f?s=48 middleokada
18
12k
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
3
640
Identidad en Web3
A68cb0f927eafc449f4046ea3edc09a2?s=48 dschenkelman
0
100
Getting Started in Product Management
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
140

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
267
21k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
15
3.9k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
6
580
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.6k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k

Transcript

  1. Sta$c  Site  Generator @bruno2ms

  2. Como  começar?

  3. Ruby  +  Liquid  +  YAML

  4. Como  funciona? • Converte  Markdown,  Tex$le  e  HTML  com  

    Liquid  Tags   • Aplica  templates  e  Layout  Pages   • Converte  arquivos  sass   • Se  aproveita  da  estrutura  de  pastas  para   gerar  blog  e  posts   • Transforma  isso  tudo  em  HTML  está$co

  5. O  que  já  vem  pronto? • Paginação   • Estrutura

     personalizada  de  permalinks   • Posts  relacionados   • Syntax  highlight   • Conversão  Markdown/Tex$le

  6. Estrutura  Inicial

  7. Configuração  Centralizada _config.yml

  8. Configuração  YAML • Configuração  de  variáveis  globais   • Variáveis

     reu$lizáveis  de  acordo  com   estrutura  dos  arquivos   • Adicione  as  chaves  que  desejar  para   reaproveitar  em  todo  o  site

  9. Exemplo

  10. YAML  Front  MaJer --- layout: post title: Blogging Like a

    Hacker permalink: /path/to/my/page/ published: true categories: [categoria1, categoria2] --- <!DOCTYPE HTML> <html> <head> <title>{{ site.name }} - {{ page.title }}</title> </head> <body> ...

  11. Deploy? • Instancia  grá$s  do  Heroku   • GitHub  Pages

      • Direto  para  a  Amazon  S3   • Qualquer  lugar  que  aceite  páginas  está$cas   • hTp:/ /jekyllrb.com/docs/deployment-­‐ methods/

  12. Comentários  do  Blog? Extender   -­‐ Disqus  (exemplo)   -­‐

    Intense  Debate   -­‐ Facebook  Comments

  13. Disqus ... layout: default comments: true # other options ...

    {% if page.comments %} {% include disqus.html %} {% endif %} <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = ‘your_user'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/ javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> sua_pagina.html _includes/disqus.html

  14. Data  Files? _data/*/*.yml _data/*/*.csv _data/*/*.json

  15. Data  Files - name: Tom Preston-Werner github: mojombo - name:

    Parker Moore github: parkr - name: Liu Fengyun github: liufengyun <ul> {% for member in site.data.members %} <li> <a href="https://github.com/{{ member.github }}"> {{ member.name }} </a> </li> {% endfor %} </ul> index.yml _data/members.yml

  16. Data  Files name: Bluesoft members: - name: Tom Preston-Werner github:

    mojombo - name: Parker Moore github: parkr _data/orgs/blueso\.yml _data/orgs/webgoal.yml name: Webgoal members: - name: Tom Preston-Werner github: mojombo - name: Parker Moore github: parkr <ul> {% for org_hash in site.data.orgs %} {% assign org = org_hash[1] %} <li> <a href="https://github.com/{{ org.username }}"> {{ org.name }} </a> ({{ org.members | size }} members) </li> {% endfor %} </ul>

  17. Arquitetura  de  Plugins (facilidade  de  extender) _plugins/*.rb hTp:/ /jekyllrb.com/docs/plugins/

  18. OBRIGADO (confira  as  próximas  apresentações  avançadas) @bruno2ms