GitHub as CMS
A Case Study : Code4Lib 2016 Conference
Static Sites: Back to the Future!
Tim Berners-Lee's original static site.
Major Corporations are using Static Sites
2015 Code4Lib Conference Site
2016 Code4Lib Conference Site
Our Goals
● Empower all members of the community to contribute to the development and
content of the site
● Bring the performance, design, and user experience up to modern expectations
● Gather structured data for workshops, proposals, speakers, testimonials, even
gatherings
● Use the code4lib.org domain to add authority to the site
● Host the site for free, with low maintenance
● Attract potential sponsors
Benefits of Static Sites
Staffing and Collaboration
● Easier to recruit developers who know HTML, CSS, and JS fundamentals than
niche, CMS-specific developers
● Built-in version control (with GitHub Pages)
● Notifications (with GitHub Pages)
● Rollback or Revert unwanted changes
● Moderation and Editing
Performance
● Complexity of “dynamic” sites comes with big performance hit
● Scaling a “dynamic” site can be expensive
● Hard for “dynamic” sites to meet speed expectations for mobile browsing
Security
● By conservative estimates, 70% of today’s WordPress installations are vulnerable
to known exploits (and WordPress powers more than a quarter of the entire web)
● Just about a year ago 12 million Drupal sites needed emergency patches to be
applied within 7 hours of the announcement
● Keeping a dynamic CMS patched can start to feel like a game of …
What keeping a CMS patched looks like…
Photo credit: TPapi
GitHub Pages + Jekyll Benefits
● Free Hosting with Custom Domains
● kramdown: Simple, Flexible Markup
● Extensible via Plugins
● Structured Data via YAML
Structured Data Example
Divergences from CMS conventions
Editorial Process
Search
“Microservice” approach to most site features
The Static Site approach is more piecemeal than many CMS packages offer, relying on
third-party services. See the Jekyll tips site for solutions to these needs and more:
● Newsletters
● Analytics
● Content Editing
● Media / Embeddable Content
● Community / Commentary
● Forms
● Backends
Results of our Experiment?
● Bring the performance, design, and UX up to modern expectations… check!
● Use the code4lib.org domain to add authority to the site… check!
● Host the site for free… check!
● Attract potential sponsors… with over $100K in sponsorships we doubled our
target goal and far surpassed all previous conferences. That’s a check!
● Empower all members of the community to contribute to the development and
content of the site… well, mostly a check. We could have made it easier.
● Gather structured data for workshops, proposals, speakers, testimonials, even
gatherings…. check… but it wasn’t trivial.
Challenges
● HTTPS
Challenges
● HTTPS
● Jekyll Versions (Prod and Dev environment syncing)
Challenges
● HTTPS
● Jekyll Versions (Prod and Dev environment syncing)
● Dynamic Content
○ Usability problems and technical barriers for user-generated content
○ Solution: Google Forms/Spreadsheets + Tabletop.js
○ Many caveats!
■ Short-Term Reliability
■ Long-Term Reliability
■ Payload “weight”
■ Editing flexibility
■ Obfuscation
Jekyll Templates for Various Content Types
● Documentation Theme: A Jekyll doc theme for designers
● staticAid: A site generator for Archival Description
● Ed: a Jekyll theme for producing beautifully rendered scholarly or reading
editions of texts
● Freelancer: A Jekyll theme to showcase a portfolio
Beyond GitHub Pages: Other Generators and Platforms
● Free Static Hosting
○ Surge.sh
■ Great for more “dynamic” Native Web Apps (Isomorphic JavaScript)
■ Use GitHub, Contentful, or a custom MongoDB + Express.js as a data store
■ HTTPS available for custom domains!
● Generators
○ Middleman
○ Roots
● Some User-friendly Content Editors
○ Prose.io - uses GitHub’s API
○ Dillinger.io
Should I use GitHub Pages?
You have real-time data-driven content
coming from outside your institution.
You have real-time data-driven content
coming from outside your institution.
… but it’s worth considering for most
other web-based publishing needs.
Thank you.
Shaun Ellis
Digital Collections User Interface Developer
Princeton University Library
@sdellis

Shaun-Ellis-feb25

  • 1.
    GitHub as CMS ACase Study : Code4Lib 2016 Conference
  • 2.
    Static Sites: Backto the Future! Tim Berners-Lee's original static site.
  • 3.
    Major Corporations areusing Static Sites
  • 4.
  • 5.
  • 6.
    Our Goals ● Empowerall members of the community to contribute to the development and content of the site ● Bring the performance, design, and user experience up to modern expectations ● Gather structured data for workshops, proposals, speakers, testimonials, even gatherings ● Use the code4lib.org domain to add authority to the site ● Host the site for free, with low maintenance ● Attract potential sponsors
  • 7.
  • 8.
    Staffing and Collaboration ●Easier to recruit developers who know HTML, CSS, and JS fundamentals than niche, CMS-specific developers ● Built-in version control (with GitHub Pages) ● Notifications (with GitHub Pages) ● Rollback or Revert unwanted changes ● Moderation and Editing
  • 9.
    Performance ● Complexity of“dynamic” sites comes with big performance hit ● Scaling a “dynamic” site can be expensive ● Hard for “dynamic” sites to meet speed expectations for mobile browsing
  • 10.
    Security ● By conservativeestimates, 70% of today’s WordPress installations are vulnerable to known exploits (and WordPress powers more than a quarter of the entire web) ● Just about a year ago 12 million Drupal sites needed emergency patches to be applied within 7 hours of the announcement ● Keeping a dynamic CMS patched can start to feel like a game of …
  • 11.
    What keeping aCMS patched looks like… Photo credit: TPapi
  • 12.
    GitHub Pages +Jekyll Benefits ● Free Hosting with Custom Domains ● kramdown: Simple, Flexible Markup ● Extensible via Plugins ● Structured Data via YAML
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    “Microservice” approach tomost site features The Static Site approach is more piecemeal than many CMS packages offer, relying on third-party services. See the Jekyll tips site for solutions to these needs and more: ● Newsletters ● Analytics ● Content Editing ● Media / Embeddable Content ● Community / Commentary ● Forms ● Backends
  • 18.
    Results of ourExperiment? ● Bring the performance, design, and UX up to modern expectations… check! ● Use the code4lib.org domain to add authority to the site… check! ● Host the site for free… check! ● Attract potential sponsors… with over $100K in sponsorships we doubled our target goal and far surpassed all previous conferences. That’s a check! ● Empower all members of the community to contribute to the development and content of the site… well, mostly a check. We could have made it easier. ● Gather structured data for workshops, proposals, speakers, testimonials, even gatherings…. check… but it wasn’t trivial.
  • 19.
  • 20.
    Challenges ● HTTPS ● JekyllVersions (Prod and Dev environment syncing)
  • 21.
    Challenges ● HTTPS ● JekyllVersions (Prod and Dev environment syncing) ● Dynamic Content ○ Usability problems and technical barriers for user-generated content ○ Solution: Google Forms/Spreadsheets + Tabletop.js ○ Many caveats! ■ Short-Term Reliability ■ Long-Term Reliability ■ Payload “weight” ■ Editing flexibility ■ Obfuscation
  • 22.
    Jekyll Templates forVarious Content Types ● Documentation Theme: A Jekyll doc theme for designers ● staticAid: A site generator for Archival Description ● Ed: a Jekyll theme for producing beautifully rendered scholarly or reading editions of texts ● Freelancer: A Jekyll theme to showcase a portfolio
  • 23.
    Beyond GitHub Pages:Other Generators and Platforms ● Free Static Hosting ○ Surge.sh ■ Great for more “dynamic” Native Web Apps (Isomorphic JavaScript) ■ Use GitHub, Contentful, or a custom MongoDB + Express.js as a data store ■ HTTPS available for custom domains! ● Generators ○ Middleman ○ Roots ● Some User-friendly Content Editors ○ Prose.io - uses GitHub’s API ○ Dillinger.io
  • 24.
    Should I useGitHub Pages?
  • 25.
    You have real-timedata-driven content coming from outside your institution.
  • 26.
    You have real-timedata-driven content coming from outside your institution.
  • 27.
    … but it’sworth considering for most other web-based publishing needs.
  • 28.
    Thank you. Shaun Ellis DigitalCollections User Interface Developer Princeton University Library @sdellis