How to use Static Site Generators as CMS

Explain and show how to improve talk proposals for Berlin.JS

Transcript

1. HOW TO USE STATIC SITE GENERATORS AS CMS Anton Wilhelm | @timaschew
2. AGENDA Talk submission by roles Status Quo: Berlin.JS Demo Solution 1 Solution 2 Demo How it works Dynamic Stuff with DocPad ToDo Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew
3. Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew DogPad
4. Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew DogPad
5. Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew DocPad
6. TALK SUBMISSION BY ROLES visitor read just visit the website speaker write make a pull request moderator publish merge the pull request system provide GitHub and GitHub Pages Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew
7. MODERATOR SPEAKER SYSTEM Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew
8. SYSTEM MODERATOR SPEAKER Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew
9. Demo Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew BERLIN.JS STATUS QUO SPEAKER MODERATOR SYSTEM
10. 1. go to the repo (login/create GitHub account) 2. find the file to edit on github.com/berlinjs/berlinjs.org 3. click on edit 4. change the content in the HTML code 5. commit & confirm automated created Pull Request Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew BERLIN.JS STATUS QUO SPEAKER MODERATOR SYSTEM
11. 1. go to the repo (login/create GitHub account) 2. find the file to edit on github.com/berlinjs/berlinjs.org 3. click on edit 4. change the content in the HTML code 5. commit & confirm automated created Pull Request Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew BERLIN.JS STATUS QUO SPEAKER MODERATOR SYSTEM - GitHub account - no preview - HTML format - 2.8 MB traffic CONS
12. • use a SSG (e.g. Jekyll) • speaker writes only Markdown, no HTML Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 1 SPEAKER MODERATOR SYSTEM goals
13. SOLUTION 1 Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM edit files
14. SOLUTION 1 Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM edit files
15. SOLUTION 1 Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM create file
16. SOLUTION 1 Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM create file
17. SOLUTION 1 Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM create file
18. 1. go to the repo (login/create GitHub account) 2. click on plus (create new file) 3. write the talk description in Markdown and save 4. confirm and send auto generated pull request Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM SOLUTION 1 - Markdown PROS - GitHub account - preview without context - 1.8 MB traffic CONS without context preview
19. 1. install git & create GitHub account 2. go to the repo & fork it 3. clone repository on your local machine 4. create file and write the content 5. download ruby 6. install gems for Jekyll 7. run Jekyll 8. preview in the browser 9. commit and push the changes to your fork 10. send a pull request with context preview Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 1.1 SPEAKER MODERATOR SYSTEM - Markdown - preview PROS - GitHub account - complex steps with env. setup CONS
20. • use GitHub account if the speaker has one • use email as fallback • write talk proposal in the browser • preview without environment setup • don't break current architecture • GitHub Pages & pull request Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 2 SPEAKER MODERATOR SYSTEM goals
21. Demo Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 2 SPEAKER MODERATOR SYSTEM I‘ll switch the roles git:berlinjs/berlinjs.org
22. Demo Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 2 SPEAKER MODERATOR SYSTEM git:timaschew/berlinjs.org I‘ll switch the roles git:berlinjs/berlinjs.org
23. git:berlinjs/berlinjs.org gh-pages .html master .jade .md Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM SOLUTION 2 http://berlinjs.github.io/berlinjs.org http://berlinjs.org git:berlinjs-bot/berlinjs.org authenticate master .jade .md fork fetch upstream create .md commit & pull request SPEAKER MODERATOR deploy merge pull request DocPad .jade .md src out .html POST /submit submit & receive mail GET /confirm/:token click on activation link Node.js pull
25. 1. go to edit page 2. fill in form 3. click on submit A. receive mail & click on activation link B. use GitHub auth instead of email Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM SOLUTION 2 PROS - no GitHub account - Markdown - preview - mobile devices - less than 200 KB traffic
26. 1. merge the pull request 2. pull changes into DocPad server 3. wait for regeneration to review 4. deploy Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM SOLUTION 2 - staging / explicit deploying PROS - two more steps CONS
27. • initial setup of the server DocPad • SSG and deploying with DocPad • Node.js: • save talk proposal • send email activation link • use GitHub API for pull request SPEAKER MODERATOR SYSTEM Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SOLUTION 2 - automatically dates, talk slots PROS - setup DocPad - Node.js CONS
28. • src • documents • script.js.coffee • article.html.md • index.html.jade • layouts • master.html.jade DOCPAD ASSET PIPELINE Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM • out • documents • script.js • article.html • index.html
29. • src • documents • talks • 2014-02-20_foobar.html.md • 2014-02-20_static-site-generators.html.md • 2014-01-16_player-js.html.md • index.html.jade • layouts • master.html.jade DIRECTORY STRUCTURE Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM
30. FETCH FUTURE MEETUPS Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM
31. DISPLAY NEXT MEETUPS Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM
32. DISPLAY NEXT MEETUPS Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM
33. • set order of the talks • choose date when submitting a talk • edit a file / update an existing pull request • auth via GitHub • decapsulate and make an npm module ToDo Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew SPEAKER MODERATOR SYSTEM
34. THAT’S IT If you're interested in Node.js, CoffeeScript, NoSQL, Scrum get in touch, we're hiring ;) Twitter: @timaschew Source: http://github.com/timaschew/berlinjs.org Berlin.JS | 2014-02-20 | Anton Wilhelm | @timaschew