2018-03-10 data driven static sites · 10/03/2018 · html & css go in. static sites come out...
TRANSCRIPT
![Page 1: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/1.jpg)
Data-Driven Static Site Generation
@carlmjohnson
![Page 2: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/2.jpg)
What is a static site generator?
![Page 3: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/3.jpg)
Popular Static Site Generatorshttp://www.staticgen.com/
![Page 4: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/4.jpg)
Why Static Site Generation?
![Page 5: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/5.jpg)
Pros
Virtually free hosting
No security worries
Easy to run locally
Easy backup
Markdown support
Use Git for content
![Page 6: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/6.jpg)
Cons
It’s static
Same content for everyone
Need to use Disqus or similar service for comments
Intimidating for non-coders
Can be tricky to collaborate (but try using Github)
![Page 7: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/7.jpg)
Rolling your own SSG
![Page 8: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/8.jpg)
Rolling your own SSG
![Page 9: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/9.jpg)
Creating a static site with Jekyll
![Page 10: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/10.jpg)
![Page 11: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/11.jpg)
Creating a Data-Driven Site
Static Site Generators are great at creating blogs, but they can also make general purpose websites
Items in data folder can drive site-wide content
Front matter can drive page content
![Page 12: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/12.jpg)
Live Demo!
![Page 13: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/13.jpg)
Example Site: Voter Guide 2018
![Page 14: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/14.jpg)
![Page 15: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/15.jpg)
![Page 16: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/16.jpg)
![Page 17: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/17.jpg)
Live Demo!
![Page 18: 2018-03-10 Data Driven Static Sites · 10/03/2018 · HTML & CSS go in. Static sites come out ready for deployment. Jekyll template guide —+ Blog-aware Permalinks, categories,](https://reader034.vdocuments.us/reader034/viewer/2022050514/5f9ebb6b8aca803cc45d13b7/html5/thumbnails/18.jpg)
Thank you for listening!
@carlmjohnson
@baltsundata
https://jekyllrb.com
https://gohugo.io
https://github.com/baltimore-sun-data/voter-guide-2018