Jekyll, static websites generator
-
Upload
francesco-napoletano -
Category
Internet
-
view
63 -
download
0
Transcript of Jekyll, static websites generator
![Page 1: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/1.jpg)
Jekyll and MarkDownFor fun and profit
![Page 2: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/2.jpg)
What is Jekyll?Jekyll is a Blog-Aware Static Site Generator written in Ruby
https://www.jekyllrb.com
![Page 3: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/3.jpg)
Why use a Static Site Generator?• It’s simple: for SiteOps, for devs and for content creators• It’s safe: it’s no ”WordPress”• It’s fast (cit.): serve only static content, on github pages or wherever you can!• It’s personalized: themes & co. available• It’s extensible: you can write plugins, extensions, etc…• It’s cool: the coolest kids out there use Jekyll: Atlassian, Bootstrap, StackOverflow,
github, etc... Even Barack Obama!
![Page 4: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/4.jpg)
Jekyll is simple – SiteOps & Devs• You just need a server capable of serving static content, even
dropbox!• Simplified deployment pipeline (from copying files via FTP to git
hooks)• Themes structure is simple and developers can easily customize it• Plugins can be written using Ruby• Configuration based on YAML file(s)
![Page 5: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/5.jpg)
Jekyll is simple – Content Creators
• Every page (or post) lives in a separate file• Write only content. No layout or anything else• You can use MarkDown, Liquid Syntax, HTML, mixed together• You can easily define page/post “meta” in the “Front Matter”• You can install it on your computer and see changes in realtime• Built-in pagination, permalinks, tags, etc…
![Page 6: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/6.jpg)
Jekyll is safe• No back-end, means (almost) no security concerns• WordPress is nice, but… (4.7.2 fixes a nasty unauthenticated privilege
escalation vulnerability that was discovered in a REST API endpoint)• You can do bad things also with Jekyll, stay safe!
{% execute_shell "ls | wc -l" %}
![Page 7: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/7.jpg)
Let’s do it!• gem install jekyll bundler• jekyll new friday-lab• cd friday-lab• bundle exec jekyll serve --watch
Jekyll is now up and running on http://localhost:4000, watch it change in realtime!
![Page 8: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/8.jpg)
Your first post - 1• Posts are in the _posts folder• You can use markdown or HTML syntax
Let’s have a look together!
![Page 9: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/9.jpg)
Your first post – 2 - Demo
![Page 10: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/10.jpg)
Your first post – 3 - Structure---layout: posttitle: "Welcome to Jekyll!”date: 2017-02-09 12:43:18 +0100categories: jekyll update---
Venenatis Ipsum Malesuada Tristique Ligula…
![Page 11: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/11.jpg)
Your first post – 4 - MarkDown• Markdown is a lightweight markup language with plain text formatting syntax
designed so that it can be converted to HTML and many other formats using a tool by the same name.
• Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
• In Jekyll you can mix HTML, MarkDown and Liquid Syntax
A DEMO IS BETTER THAN A THOUSAND WORDS!
![Page 12: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/12.jpg)
Your first post – 5 - Liquid• Liquid is an open-source template language created by Shopify and written in
Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
{% if page.title == "Awesome Post" %} This post is awesome! {% endif %}
• You can see the list of available Jekyll variables here: https://jekyllrb.com/docs/variables/
![Page 13: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/13.jpg)
Your first page - Demo• Pages are in the root folder of the Jekyll installation• You can use markdown or HTML syntax, like in posts.• Front Matter is similar to posts
![Page 14: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/14.jpg)
Configuration - 1• Jekyll config file is called _config.yml• You can use already defined variables / structures or define your
own• Define here “global stuff” you’ll use everywhere:• Navigation• Common tags• Website data• Etc…
![Page 15: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/15.jpg)
Configuration – 2 - ExampleLet’s add a custom navigation menu in _config.yml:
nav:- { title: 'Homepage', href: '/' }- { title: ’Nav 1', href: '/nav-1/' }- { title: ’Nav 2', href: '/nav-2/' }
Here’s the Liquid snippet for the menu:
<ul> {% for item in site.nav %} <li><a href="{{ item.href }}">{{ item.title }}</a></li> {% endfor %}</ul>
![Page 16: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/16.jpg)
What’s missing?• Comments (but you can use DISQUS & co.)
• Even simple server-side stuff becomes istantly hard! (search, etc…)
• No scheduling (even if you can use visibility)
• Build time for huge websites can become loooooong….
• No support tools (image cropping, etc…)
• Local installation can be puzzling for non-tech people
![Page 17: Jekyll, static websites generator](https://reader033.fdocuments.us/reader033/viewer/2022051006/58b888af1a28ab44078b79ff/html5/thumbnails/17.jpg)
What else?• Data files (JSON, CSV, etc…)
• QUESTIONS?
• GO AND MAKE YOUR WEBSITE!