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
Search
bruno2ms
August 20, 2015
Technology
0
43
Jekyll the static site generator
Jekyll the static site generator
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
85
Jekyll the static site generator Liquid For Designers
bruno2ms
0
61
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
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
ゼロからはじめる採用広報
yutadayo
3
960
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
11
4.9k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Speed Design
sergeychernyshev
32
1k
Six Lessons from altMBA
skipperchong
28
3.9k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
Sta$c Site Generator @bruno2ms
Como começar?
Ruby + Liquid + YAML
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
O que já vem pronto? • Paginação • Estrutura
personalizada de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Tex$le
Estrutura Inicial
Configuração Centralizada _config.yml
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
Exemplo
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> ...
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/
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/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>
Arquitetura de Plugins (facilidade de extender) _plugins/*.rb hTp:/ /jekyllrb.com/docs/plugins/
OBRIGADO (confira as próximas apresentações avançadas) @bruno2ms