Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jekyll the static site generator Liquid For Des...
Search
bruno2ms
August 20, 2015
Technology
0
61
Jekyll the static site generator Liquid For Designers
Jekyll the static site generator Liquid For Designers
bruno2ms
August 20, 2015
Tweet
Share
More Decks by bruno2ms
See All by bruno2ms
Will Js Kill CSS
bruno2ms
0
170
Google Design Sprints
bruno2ms
0
170
Building UX Team
bruno2ms
3
87
Jekyll the static site generator
bruno2ms
0
44
Bad Leaders - Manual de como falhar como líder
bruno2ms
0
36
Lean UX
bruno2ms
3
250
Other Decks in Technology
See All in Technology
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
110
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
740
Claude Codeは仕様駆動の夢を見ない
gotalab555
16
4.1k
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2k
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
340
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
160
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
350
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
OPENLOGI Company Profile for engineer
hr01
1
37k
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Automating Front-end Workflow
addyosmani
1370
200k
The Invisible Side of Design
smashingmag
301
51k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Speed Design
sergeychernyshev
32
1.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
How to train your dragon (web standard)
notwaldorf
96
6.2k
Raft: Consensus for Rubyists
vanstee
140
7k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Transcript
Static Site Generator @bruno2ms Liquid for Designers
Syntax {{ matched pairs of curly brackets (ie, braces) }}
{% matched pairs of curly brackets and percent signs %} Output markup (que pode retornar texto) Tag markup (não pode retornar texto)
Output Markup {{ output markup }} Hello {{ user.name }}
-> Hello Bruno Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO Letters: {{ 'bruno' | size }} -> Letters 5 Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
Filtros Concatenados {{ output markup }} Hello {{ user.name }}
-> Hello Bruno Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO Letters: {{ 'bruno' | size }} -> Letters 5 Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar {{ 5 | times:4 | plus:5 | divided_by:2 }} -> 12 {{ "a~b" | split:"~" }} -> ab • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
Ruby + Liquid + YAML
Como funciona? • Converte Markdown, Textile 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ático
O que já vem pronto? • Paginação • Estrutura personalizada
de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Textile
Estrutura Inicial
Configuração Centralizada _config.yml
Configuração YAML • Configuração de variáveis globais • Variáveis reutilizáveis
de acordo com estrutura dos arquivos • Adicione as chaves que desejar para reaproveitar em todo o site
Exemplo
YAML Front Matter --- 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> ...
Deploy? • Instancia grátis do Heroku • GitHub Pages •
Direto para a Amazon S3 • Qualquer lugar que aceite páginas estáticas • http://jekyllrb.com/docs/deployment- methods/
Comentários do Blog? Extender - Disqus (exemplo) - Intense Debate
- Facebook Comments
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
Data Files? _data/*/*.yml _data/*/*.csv _data/*/*.json
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
Data Files name: Bluesoft members: - name: Tom Preston-Werner github:
mojombo - name: Parker Moore github: parkr _data/orgs/bluesoft.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>
Arquitetura de Plugins (facilidade de extender) _plugins/*.rb http://jekyllrb.com/docs/plugins/
OBRIGADO (confira as próximas apresentações avançadas) @bruno2ms