Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Jekyll
linuxihaa.ir
/dʒɛkəl/ or /dʒiːkəl/
Misam Saki
SFD 1395
Dynamic site generator
Code (Ex. PHP, ASP)
CMS (Ex. Wordpress, Joomla)
Theme & Plugin
Database (Ex. MySQL, SQL Server)
Com...
Place your screenshot here
3
StaticGen
www.staticgen.com
A simple, blog-aware, static site generator
4
Install
Install ruby
gem install jekyll
New Site
jekyll new linuxihaa
cd linuxihaa
jekyll serve
New Site
5
Place your screenshot here
6
New Site (2)
http://localhost:4000
index.html
_config.yml (title, url, …)
_layouts/ (Ex. default.hmtl, post.html)
_post/ (Ex. 2016-09-25-hello-world.md)
_inc...
_site
Structure (2)
8
---
layout: post
title: Hello World
date: 2016-09-25 20:42:18
categories: news
tags:
- test
- other
---
CONTENT
Post
9
# Site settings
title: Linuxihaa
email: linuxihaa@gmail.com
description: > # this means to ignore newlines until
Write an ...
#H1 or ======
##H2 or ------
###H3
**bold** or __bold__
*italic* or _italic_
~~scratch~~
1. First ordered list item
2. Ano...
`code`
```sh
gem install jekyll
```
> Blockquotes
Markdown (2)
12
Lines: ---, ***, ___
| Personal ID | Name | Family |
| :...
13
Themes
default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<d...
Filters
{{ 'uppercase'| upcase }}
Loops
{% for post in posts %}
{{ post.title }}
{% endfor %}
Liquid
Templates (2)
15
Cond...
Plugin
▸ LESS / SASS
▸ CoffeeScript
▸ Minification
▸ Emoticons
▸ Youtube / Tweet embedding
▸ Flicker galleries
▸ …
16
17
Github Pages
New repo: username.github.io
http://username.github.io
New branch: gh-pages
http://username.github.io/repo
Place your screenshot here
18
Linuxihaa
linuxihaa/linuxihaa.github.io
@linuxiha 8K
@linuxiha 2K
References
https://jekyllrb.com
https://en.wikipedia.org/wiki/Jekyll_(software)
http://velocitylabs.io/blog/2011/12/20/pre...
20
THANKS!
Any questions?
You can find me at
▸ @misamplus
▸ misam.saki@ut.ac.ir
Prochain SlideShare
Chargement dans…5
×

Jekyll

امروزه بسیاری از سایت‌ها را می‌توان به راحتی و به‌دور از پیچدگی‌های سایت‌سازهای پویا، با سایت‌سازهای ایستا ایجاد کرد که سرعت بیشتر، هزینه بسیار کم‌تر و مدریت راحت‌تری دارند.
جکیل، یکی از معروف‌ترین و کاربردی‌ترین سیستم‌ها سایت‌ساز ایستا است که با توجه به پشتیبانی گیت‌هاب از آن مزیت‌های فراوانی مانند هزینه رایگان میزبانی، نداشتن مشکلات امنیتی، کنترل تغییرات توسط گیت و … را به همراه دارد.

سرفصل‌ها:

معرفی سایت‌سازهای ایستا
معرفی سایت ساز جکیل و ساختار و نحوهٔ کار با آن
آشنایی با پوسته، افزونه‌ها و نحوهٔ توسعه
آشنایی با Markdown
آشنایی با نحوهٔ مدریت سایت ایستا در گیت‌هاب

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Jekyll

  1. 1. Jekyll linuxihaa.ir /dʒɛkəl/ or /dʒiːkəl/ Misam Saki SFD 1395
  2. 2. Dynamic site generator Code (Ex. PHP, ASP) CMS (Ex. Wordpress, Joomla) Theme & Plugin Database (Ex. MySQL, SQL Server) Compile by the request + Support other services (Ex. Comments) Static site generator Code (Ex. Ruby) Framework (Ex. Jekyll) Theme & Plugin Content (Ex. Markdown) Compile to HTML & Store + Any web server + Fast + No security vulnerabilities ? Discus, Facebook comments … 2 Dynamic/Static
  3. 3. Place your screenshot here 3 StaticGen www.staticgen.com
  4. 4. A simple, blog-aware, static site generator 4
  5. 5. Install Install ruby gem install jekyll New Site jekyll new linuxihaa cd linuxihaa jekyll serve New Site 5
  6. 6. Place your screenshot here 6 New Site (2) http://localhost:4000
  7. 7. index.html _config.yml (title, url, …) _layouts/ (Ex. default.hmtl, post.html) _post/ (Ex. 2016-09-25-hello-world.md) _includes/ (Ex. head.hml, footer.html) _plugins (.rb) _data (YAML, JSON, CSV) _sass (.scss) _drafts (.md) css, js,img, … Structure Ruby + Liquid + YAML 7
  8. 8. _site Structure (2) 8
  9. 9. --- layout: post title: Hello World date: 2016-09-25 20:42:18 categories: news tags: - test - other --- CONTENT Post 9
  10. 10. # Site settings title: Linuxihaa email: linuxihaa@gmail.com description: > # this means to ignore newlines until Write an awesome description… baseurl: /blog url: http://linuxihaa.ir twitter_username: linuxihaa github_username: linuxihaa # Build settings markdown: kramdown config 10
  11. 11. #H1 or ====== ##H2 or ------ ###H3 **bold** or __bold__ *italic* or _italic_ ~~scratch~~ 1. First ordered list item 2. Another item Markdown 11 * Unordered list item * Another item [Linuxihaa](http://linuxihaa.ir) ![alt text][image]
  12. 12. `code` ```sh gem install jekyll ``` > Blockquotes Markdown (2) 12 Lines: ---, ***, ___ | Personal ID | Name | Family | | :---------: | :--- | -----: | | Centered |Right | Left| …
  13. 13. 13 Themes
  14. 14. default.html <!DOCTYPE html> <html> {% include head.html %} <body> {% include header.html %} <div class="page-content"> <div class="wrapper"> {{ content }} </div> </div> {% include footer.html %} </body> </html> Liquid Templates 14
  15. 15. Filters {{ 'uppercase'| upcase }} Loops {% for post in posts %} {{ post.title }} {% endfor %} Liquid Templates (2) 15 Conditionals {% if variable_name %} variable_name exists {% else %} variable_name doesn't exist {% endif %}
  16. 16. Plugin ▸ LESS / SASS ▸ CoffeeScript ▸ Minification ▸ Emoticons ▸ Youtube / Tweet embedding ▸ Flicker galleries ▸ … 16
  17. 17. 17 Github Pages New repo: username.github.io http://username.github.io New branch: gh-pages http://username.github.io/repo
  18. 18. Place your screenshot here 18 Linuxihaa linuxihaa/linuxihaa.github.io @linuxiha 8K @linuxiha 2K
  19. 19. References https://jekyllrb.com https://en.wikipedia.org/wiki/Jekyll_(software) http://velocitylabs.io/blog/2011/12/20/presentation-jekyll-static-site-generator/ http://ericlathrop.com/2013/05/introduction-to-blogging-with-jekyll/ https://scotch.io/tutorials/getting-started-with-jekyll-plus-a-free-bootstrap-3-starter-theme https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 19
  20. 20. 20 THANKS! Any questions? You can find me at ▸ @misamplus ▸ misam.saki@ut.ac.ir

×