Lecture 10.1 - Publishing & more in Jekyll
Jill Naiman
Data Visualization - Fall 2023
This Week/Last Week
Final Groups
Sign up due 11/7.
Find a group: #final-project-groups channel in Slack.
Going further with Starboard
Extra video in Module from last week -- interactivity and dashboarding in Starboard. See "Extra Starboard - Dashboarding" notebook from last week.
Going further with Starboard
Extra video in Module from last week -- interactivity and dashboarding in Starboard. See "Extra Starboard - Dashboarding" notebook from last week.
There are also ways to embed Starboard notebooks in webpages.
Check out a few tutorials for more:
Today
- Publishing
- Jekyll
- Github Pages
- vega-lite in Python with Altair
TOPIC 1: Web developing with Jekyll (and Ruby, YAML, Liquid)
Many of these slides are credited to Diptendra Bagchi, a former TA for this course.
Jekyll
Jekyll is a static site generator
Jekyll
Jekyll is a static site generator
- Reduce manual coding for webpages with repeated content see static site source code for class webpage
Jekyll
Jekyll is a static site generator
- Reduce manual coding for webpages with repeated content see static site source code for class webpage
- Written in Ruby
Jekyll
Jekyll is a static site generator
- Reduce manual coding for webpages with repeated content see static site source code for class webpage
- Written in Ruby
- Very popular static site generator (most popular as of 2017)
Jekyll
Jekyll is a static site generator
- Reduce manual coding for webpages with repeated content see static site source code for class webpage
- Written in Ruby
- Very popular static site generator (most popular as of 2017)
- easy(ish) to deploy on github.io and other hosting platforms
Jekyll
Jekyll is a static site generator
- Reduce manual coding for webpages with repeated content see static site source code for class webpage
- Written in Ruby
- Very popular static site generator (most popular as of 2017)
- easy(ish) to deploy on github.io and other hosting platforms
- can be integrated with vega-lite (requires the class online resume/cv template but can be generalized)
Jekyll installation
We did this in Homework #5 recall instructions here.
Jekyll syntax & files
- Main configuration's are done with YAML files/syntax
Jekyll syntax & files
- Main configuration's are done with YAML files/syntax
Jekyll syntax & files
Jekyll syntax & files
- Main configuration's are done with YAML files/syntax
- can also be included at the top of specific pages
(see _posts/ directory, example blog post)
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
- Also written in Ruby
- objects like
{{page.title}}are used to print content
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
- Also written in Ruby
- objects like
{{page.title}}are used to print content - and to create logic with their tags like
if page.show_sidebar
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
- Also written in Ruby
- objects like
{{page.title}}are used to print content - and to create logic with their tags like
if page.show_sidebar - also "built in" filters to control how tags/content is viewed
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
- Also written in Ruby
- objects like
{{page.title}}are used to print content - and to create logic with their tags like
if page.show_sidebar - also "built in" filters to control how tags/content is viewed
- used to build into "layouts" for repeated pages (like blog posts, or weekly content!)
Liquid (for use in Jekyll)
Liquid used to load dynamic content on webpages
- Also written in Ruby
- objects like
{{page.title}}are used to print content - and to create logic with their tags like
if page.show_sidebar - also "built in" filters to control how tags/content is viewed
- used to build into "layouts" for repeated pages (like blog posts, or weekly content!)
Markdown in Jekyll
Our Jekyll template uses Markdown for text, just like Starboard:
- To bold, use
**two asterisks** - You can italicize with
_underscores_ - Try out making bullet lists with
*on each line - Links are fun:
[link text](http://example.com/)
Jekyll Templates
A non-exhaustive list can be found by searching on GitHub or other sites.
We'll be using a specific template for this class (you can use others if you are already comfortable with Jekyll, but we will prioritize support for students using the template).
Jekyll
Pros:
- Popular -- well documented
- Uses Markdown in (most) templates, minimizes coding
Cons:
- Less common syntax (Markdown)
- open source means less guarantee of long-term support in the future (though, popularity helps with that)
- Doesn't support interactive visualization "out of the box"
Other webpage development options
vega-lite with Jekyll
Link to interactive version here.
Altair : Python $\rightarrow$ vega-lite $\rightarrow$ Jekyll
We will use Altair to translate between any Python analysis and vega-lite json's (we did this in your Homework #1 as a test):
Summary
Summary
Summary
Summary
Summary
Most of this is hidden from you when writing in Jekyll! But it helps to understand the underlying mechanisms.
We'll start with a "pure" Jekyll page.
Then we'll figure out how to include vega-lite plots, then we'll get into Altair and Jekyll (examples are posted).
You can use any of these tools in the final project!