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
47
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
89
Jekyll the static site generator Liquid For Designers
bruno2ms
0
62
Bad Leaders - Manual de como falhar como líder
bruno2ms
0
37
Lean UX
bruno2ms
3
250
Other Decks in Technology
See All in Technology
Wasmのエコシステムを使った ツール作成方法
askua
0
130
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
420
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
170
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
230
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
130
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
500
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
190
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
150
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
830
Featured
See All Featured
Visualization
eitanlees
149
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Documentation Writing (for coders)
carmenintech
75
5.1k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Embracing the Ebb and Flow
colly
88
4.8k
Designing for humans not robots
tammielis
254
26k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
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