Next-generation academic websites in Jekyll

UCCSC!2014

Speaker: 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?

2. Dynamic → Static(with Jekyll)

1. HTML → TXT

3. Servers → Hosted

(with Markdown)

(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

• 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.

Basics about 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).

Why use Jekyll

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

• affordable (free if using GH-pages)!

• flexible and scalable!

• solid static HTML “just works”

Jekyll + GitHub Pages gives you websites that are…

Enjoy your stay in San Francisco!