Next-generation academic websites in Jekyll Speaker: UCCSC ! 2014 - PowerPoint PPT Presentation

Next-generation academic websites in Jekyll Speaker: UCCSC ! 2014 Peter Werba

How do we share information in the modern era?

Websites! wikipedia.org ucsf.edu nytimes.com

A lot has changed 1999 2014

How do we make sure that our websites are: • available 24/7 (even with heavy traffic) ! • easy to create, edit, and maintain ! • scalable

How did we work ! last decade? • Dynamically generated pages in CMS systems ! • Maintain our own servers and databases ! • HTML often edited in the browser

What are the problems? • Configuring & maintaining 
 servers & databases = HARD ! • Editing HTML source = HARD

We can do better! In fact, the software industry has moved on! What do they do?

1. HTML → TXT (with Markdown ) 2. Dynamic → Static (with Jekyll ) 3. Servers → Hosted (with GitHub )

1. What is Markdown?

TXT files with ! simple syntax that ! compile to HTML

HTML

MARKDOWN

Why use Markdown? • Simple, fast, clean ! • Portable to other formats ! • Supports raw HTML 
 (if you need to do something complicated) ! • Widespread (and growing) adoption

2. What is Jekyll ?

Jekyll is a “static site” generator that converts source files ! (markdown, etc.) ! into a website

Basics about Jekyll • Simple to install as a Ruby Gem, but no Ruby coding knowledge is required for use. ! • Converts your code and Markdown posts into HTML ! • An elegant and simple way to publish to the web.

Why use Jekyll • SAFE from Denial of Service Attacks. ! • SAFE from caving under heavy traffic (if served from GitHub pages or a CDN like cloudfront). ! • SAFE from MySQL injection attacks (because it doesn't use a database). ! • It needs NO security patches or updates. ! • It doesn't need any special server script software (like php,python or ruby or perl etc).

Who is using Jekyll ? • Not just for “small” websites… used by the Obama Fundraising Campaign site in 2012. ! • GitHub is running Jekyll. ! • Many blogs migrating away from WordPress

Installing Jekyll • Installs as a ruby “gem” easy to update and maintain. ! • Excellent documentation at http://jekyllrb.com/docs/home/

Where is the Content? jekyll comples ! everything to _site

“default site build”

Jekyll vs. CMS • No need to worry about constant "urgent" software updates. ! • Simple article and post management. ! • No database, content is served up fast and it is very easy to find info in content. ! • SEF/Clean URL’s by default. ! • Developer “git” driven workflow. ! • Clean templating uses “Liquid” for responsive designs. Other options like bootstrap are also available.

3. What is GitHub ?

• “Facebook for source code” ! • GitHub Pages = free hosting of Jekyll-powered websites ! • No servers to maintain, etc.

Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages. ! • No need for you to create or remember a password. You can make changes via git or the GitHub account. ! • Free for each GitHub account and organization. Unlimited project sites.

Why use GitHub and GitHub Pages? • Automatic versioning of your site keep track of past content changes as well as code changes. ! • Easy to preview changes before committing them to production. ! • Easy to revert your code to a previous version.

+ =

Conclusion Jekyll + GitHub Pages gives you websites that are… • affordable (free if using GH-pages) ! • flexible and scalable ! • solid static HTML “just works”

Enjoy your stay in San Francisco!