Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless...
Transcript of Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless...
![Page 1: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/1.jpg)
Next-generation academic websites in Jekyll
UCCSC!2014
Speaker: Peter Werba
![Page 2: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/2.jpg)
How do we share information in the modern era?
![Page 3: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/3.jpg)
Websites!
wikipedia.org ucsf.edu nytimes.com
![Page 4: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/4.jpg)
A lot has changed
1999 2014
![Page 5: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/5.jpg)
How do we make sure that our websites are:
• available 24/7 (even with heavy traffic)!
• easy to create, edit, and maintain!
• scalable
![Page 6: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/6.jpg)
How did we work!last decade?
• Dynamically generated pages in CMS systems!
• Maintain our own servers and databases !
• HTML often edited in the browser
![Page 7: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/7.jpg)
What are the problems?
• Configuring & maintaining servers & databases = HARD!
• Editing HTML source = HARD
![Page 8: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/8.jpg)
We can do better!
In fact, the software industry has moved on!
What do they do?
![Page 9: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/9.jpg)
2. Dynamic → Static(with Jekyll)
1. HTML → TXT
3. Servers → Hosted
(with Markdown)
(with GitHub)
![Page 10: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/10.jpg)
1. What is Markdown?
![Page 11: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/11.jpg)
TXT files with!simple syntax that !compile to HTML
![Page 12: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/12.jpg)
HTML
![Page 13: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/13.jpg)
MARKDOWN
![Page 14: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/14.jpg)
Why use Markdown?• Simple, fast, clean!
• Portable to other formats!
• Supports raw HTML (if you need to do something complicated)!
• Widespread (and growing) adoption
![Page 15: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/15.jpg)
2. What is Jekyll?
![Page 16: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/16.jpg)
Jekyll is a “static site” generator that
converts source files!(markdown, etc.)!
into a website
![Page 17: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/17.jpg)
• 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
![Page 18: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/18.jpg)
• 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
![Page 19: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/19.jpg)
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
![Page 20: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/20.jpg)
Installing Jekyll
• Installs as a ruby “gem” easy to update and maintain.!
• Excellent documentation at http://jekyllrb.com/docs/home/
![Page 21: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/21.jpg)
Where is the Content?
jekyll comples !
everything to _site
![Page 22: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/22.jpg)
“default site build”
![Page 23: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/23.jpg)
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.
![Page 24: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/24.jpg)
3. What is GitHub?
![Page 25: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/25.jpg)
• “Facebook for source code”!• GitHub Pages = free hosting of Jekyll-powered websites!
• No servers to maintain, etc.
![Page 26: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/26.jpg)
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.
![Page 27: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/27.jpg)
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.
![Page 28: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/28.jpg)
+
=
![Page 29: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/29.jpg)
Conclusion
• affordable (free if using GH-pages)!
• flexible and scalable!
• solid static HTML “just works”
Jekyll + GitHub Pages gives you websites that are…
![Page 30: Next-generation academic websites in Jekyll · Why use GitHub and GitHub Pages? • Seamless integration to GitHub Pages.! • No need for you to create or remember a password. You](https://reader033.fdocuments.us/reader033/viewer/2022042923/5f6fb8cdf99ebf54d94e02b5/html5/thumbnails/30.jpg)
Enjoy your stay in San Francisco!