# Static site generation
## Meet Jekyll and GitHub Pages
# Everything used to be static
* We would write HTML using simple tools like Notepad
* We'd upload files via FTP
* We probably were using `<FONT>` tags and `<TABLE>` layouts like crazy
* That was pretty much it! 😅
# Why things didn't stay static
## Hand-crafted, static sites were hard to scale
* Larger, more complex projects became very hard to manage
* Interactive sites, social/sharing, and e-commerce wasn't feasible
# The solution seemed to be dynamic sites
## Databases and server-side processing enabled:
* user-generated content
* social networking
* e-commerce
* and so much of what we think about when we think about the modern internet
# The problems with the dynamic approach
# Dynamic sites ...
* are complex and can be hard to develop
* can be slow
* tend to have bugs
* can be hacked
* can be expensive to host and maintain
## Let's end the tyranny of Content Management Systems
# Jekyll
## [www.jekyllrb.com](http://jekyllrb.com)
###Jekyll is a simple, blog-aware, static site generator
It takes a template directory containing raw text files in various formats, runs it through a converter and a renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server.
Jekyll also happens to be the engine behind **GitHub Pages**, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers *for free*.
# Features
* Intuitive directory structure
* Drafts
* Built-in Sass support
* Built-in web server
* Pagination and blogroll
* Variables and metadata
* Flexible categorization and tagging
# Advantages
## Speed, simplicity and security
* No database or server-side processing!
* Simple syntax for templates
* Easily create content using Markdown, Textile, or HTML
* Highly customizable
* Secure (basically unhackable!)
* Boilerplate layout automatically generated
* Blazingly fast 🚀
# Disadvantages
* No database or server-side processing!
* No built-in search engine
* No dynamic content
* No user-generated content or user accounts
* No E-commerce
* No WYSWIYG
(There are workarounds for most all this stuff though)
## What about WYSIWYG and media management?
Jekyll, being just a collection of text files that are compiled into a website, doesn't have a rich-text editor.
However, there are some free or paid add-ons that can help:
* Prose.io
* Hyde
* Cloud Cannon
* [Many more](https://github.com/planetjekyll/awesome-jekyll-editors)
# How do I publish my site?
# It's really easy
## Publish via plain old FTP or SFTP to any server anywhere
# It's even easier!
## Publish your site to GitHub Pages for free
## The entire process for publishing to GitHub pages
1. Commit your latest changes to your repository’s publishing branch
2. Jekyll publishes your site to GitHub pages
3. There is no step 3
# GH Pages tips
* Every GitHub account gets 1 "Organization" sites and *unlimited* "Project" sites
* The publishing method for each is slightly different
* There are some limits on the amount of data you can store in a GitHub project (1GB total, 100MB max size per file)
* You can easily map your custom domain so the your site is totally custom and doesn't refer to GitHub anywhere
* Free hosting requires a "public" repository. If you want to use a private repository, you need a paid account (starts at $7/month)
# That's all, folks
#### Read my blog post and download this slide deck at [https://www.quinnsupplee.com/static-sites](https://www.quinnsupplee.com/static-sites)
Special thanks to these open-source resources
* Slide deck created with [Reveal.js](https://github.com/hakimel/reveal.js)
* All background images from [Flickr's Creative Commons](https://www.flickr.com/creativecommons/) pool
## What next?
Here are some useful documentation links, tutorials and resources:
* https://jekyllrb.com/docs/quickstart/
* http://www.staticgen.com/
* http://jekyllthemes.org/
* https://scotch.io/tutorials/getting-started-with-jekyll-plus-a-free-bootstrap-3-starter-theme
* https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/
* https://css-tricks.com/building-a-jekyll-site-part-1-of-3/
* http://www.markwk.com/2013/04/prose.io-content-editor-for-jekyll-sites.html
* https://developmentseed.org/blog/2012/07/27/build-cms-free-websites/