Embed Size (px)
Citation preview
A Little Bit About Me
4 Developer Programs Manager for Progress (aka Telerik)
4 Author of the Static Site Generators report (free from O'Reilly)
4 Co-author (with Raymond Camden) of the upcoming book "Working with Static Site Generators" (also from O'Reilly)
Why Static?
Fast
Secure
Flexible
Tedious?
What's a Static Site Generator?
There are 4371 to choose from!4 Jekyll (Ruby)
4 Middleman (Ruby)
4 Hugo (Go)
4 Hexo (JavaScript)
4 Pelican (Python)
1 Source - https://staticsitegenerators.net/
There are 437 to choose from!4 Wintersmith (JavaScript)
4 Metalsmith (JavaScript)
4 Harp (JavaScript)
4 DocPad (CoffeeScript)
4 Gatsby (JavaScript)
4 ...etc.
Why Jekyll?
Why Jekyll?4 Most mature
4 Biggest community
4 Good documentation
4 Broadest support
4 You (probably) don't need to know Ruby
Getting Set UpPrerequisites
4 Ruby
4 RubyGems
4 Mac OS or Linux
What?! No Windows?
Getting Set UpOnce you have the prereqs...
gem install jekyll
Creating a New Sitejekyll new teentitansgofansitecd teentitansgofansitejekyll serve
Basic Configurationtitle: My Teen Titans Go! Fan Siteemail: [email protected]: > # this means to ignore newlines until "baseurl:" Because I am a huge dork who thinks Teen Titans Go! is hilarious.baseurl: "" # the subpath of your site, e.g. /blogurl: "" # the base hostname & protocol for your sitetwitter_username: remotesynthgithub_username: remotesynth # you can add any metadata you want
Customizing Your SiteBy default Jekyll uses the Liquid templating language (with added filters/tags)
Liquid Basics
Output Data
Straight output of a Jekyll variable
<h2>{{ page.title }}</h2>
...or use a filter...
<p>Posted {{ post.date | date: "%b %-d, %Y" }}</p>
Include Another Template
Useful for breaking up template files...
{% include header.html %}
Conditionals
{% if page.url == "/index.html" %}<!-- Banner --> <section id="banner"> <header> <h2>Explore the Land of Ooo...</h2> <p>...and its many kingdoms!</p> </header> </section>{% endif %}
Loops
{% for post in site.posts limit:5 offset:2 %} <li> <span class="date">{{ post.date | date: "%b %-d, %Y" }}</strong></span> <h3><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3> <p>{{ post.excerpt }}</p> </li>{% endfor %}
Adding Pages/Posts
Adding Pages/PostsPages can be Markdown or HTML and can go anywhere in the site structure.
Posts can also be Markdown or HTML, but must go in _posts and follow a naming convention of YEAR-MONTH-DAY-title.MARKUP. So...
2016-10-03-the-best-session-webu-was-jekyll.md2016-10-04-nevermind-i-take-it-back.html
^ Pages do not need a particular naming
FrontMatter...is YAML-formatted metadata at the start of a file.---layout: post # required for poststitle: "Raven is the best Teen Titan" # required for postsdate: 2015-10-03 11:00:00 # required for postscategories: titans charactersfamous_quote: "Azarath... Metrion... ZINTHOS!" # I can add whatever metdata I want---
Data
DataYAML, JSON or CSV data can be placed in the _data directory.
Accessed via site.data.[data_filename] variable.
Deployment
Deploymentjekyll build
4 FTP
4 Glynn
4 GitHub Pages
4 Netlify
4 So many other options...
Jekyll Adminhttps://jekyll.github.io/jekyll-admin/
More Examples4 Static Site Samples
Same site built with 10+ engineshttps://github.com/remotesynth/Static-Site-Samples
4 Getting Started with Jekyll (article)http://developer.telerik.com/featured/getting-started-with-jekyll/
What Kinds of Sites Work as Static Sites?
Questions?
Win a MiP Robot!
Win a MiP Robot!
