Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node.js 기반 정적 페이지 블로그 엔진, 하루프레스

7,947 views

Published on

PlayNode Conference 2012 (NodeConf 2012 in Korea) 에서 발표한 node.js 기반의 정적 페이지 블로그 엔진 하루프레스

하루프레스의 기능적인 특징, 철학 그리고 기술적인 특징을 통해 알아보는 개발 노하우에 대한 내용을 닮고 있습니다.

Published in: Technology

Node.js 기반 정적 페이지 블로그 엔진, 하루프레스

  1. 1. haroopress 노드를 기반으로 한 정적 페이지 블로그 엔진 http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/
  2. 2. I love javascript rhio kim node.js arduino, git, HCIhttp://github.com/rhiokim, http://haroopress.com, http://nodejs.kr BaaS tech in kth
  3. 3. *Real-time Networking Program *Server and Client *Ruby == Node <= Python > Scala *Performance, 10k Problem *Scale-up & Scale-out*Single thread, Non-Blocking I/O
  4. 4. Static page Blog engineby rhio.kim http://haroopress.com
  5. 5. index.html page.html archive.html haroopress ppt.html list.html page2.html
  6. 6. Characters• No! Web Server• No! Database• No! Programming• Only Markdown• Very Simple & Easy http://haroopress.github.com/about/
  7. 7. 하루프레스는블로그가 필요한 사람들보다 글을 쓰는데불필요한 서버 구성, 데이터 베이스 설치 등을 잊고글 쓰는 곳에만 몰입할 수 있도록 하는데에 있습니다.
  8. 8. wordpress octopress
  9. 9. haroopress 하루프레스 기능적 특징 http://buchstauben.com/
  10. 10. dropbox any wh ereoffice home github
  11. 11. git pushharoopress [id].github.com do not hos nee rsync ting d
  12. 12. Web Presentation with haroopressby rhio.kim
  13. 13. Data Migration• Ocotopress• Wordpress• Tistory• Tumblr• ... https://github.com/pepelsbey/shower
  14. 14. markdown plugins• easy insert external contents • [youtube:9bZkp7q19f0] • [jsfiddle:ccWP7] • [tweet:2372193965568]• support multi-markdown • table, triple emphasis, fenced code block https://github.com/pepelsbey/shower
  15. 15. • [youtube:9bZkp7q19f0]• [jsfiddle:ccWP7]• [tweet:2372193965568]• [gist:4094468]• [vimeo:52616124]
  16. 16. • [youtube:9bZkp7q19f0]• [jsfiddle:ccWP7]• [tweet:2372193965568]• [gist:4094468]• [vimeo:52616124]
  17. 17. • [youtube:9bZkp7q19f0]• [jsfiddle:ccWP7]• [tweet:2372193965568]• [gist:4094468]• [vimeo:52616124]
  18. 18. • [youtube:9bZkp7q19f0]• [jsfiddle:ccWP7]• [tweet:2372193965568]• [gist:4094468]• [vimeo:52616124]
  19. 19. • [youtube:9bZkp7q19f0]• [jsfiddle:ccWP7]• [tweet:2372193965568]• [gist:4094468]• [vimeo:52616124]
  20. 20. haroopress 하루프레스 핵심 기술
  21. 21. #Dear Friends It’s **very important** ## Please! check this * Item1 - subItem1 - subItem2 ## References * [link](http://haroopress.com)John Gruber http://daringfireball.net/projects/markdown/
  22. 22. #마크다운을 예쁘게 표현하리라!
  23. 23. Twitter Bootstrap
  24. 24. Everything is JavaScript
  25. 25. https://vimeo.com/53989933
  26. 26. haroopress 하루프레스 데모 http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/
  27. 27. star: 6, fork: 2기본적인 블로그 수준 https://github.com/rhiokim/haroopress
  28. 28. star: 6, fork: 2디아블로 3에 빠져... 회사도 잊은체... https://github.com/rhiokim/haroopress
  29. 29. star: 39, fork: 19v0.9 으로 세상에 출시 https://github.com/rhiokim/haroopress
  30. 30. haroopress하루프레스 개발이야기 http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/
  31. 31. Blog locally twitter bootstrapMarkdown HTML5 + CSS3 +modules node.js haroopress
  32. 32. full stack• node v0.8.x and Git• Open Specification : Markdown, JSON• Open Source : locally, ejs, findit, mkdirp, robotskirt, highlight.js (16 modules)• Browser : jQuery, require.js, mustache (7 libraries)• Markup : Twitter Bootstrap, Font Awesome, Shower http://haroopress.com/post/opensource-with-haroopress/
  33. 33. findit• used findit npm module• get directory structure• findit.sync(__dirname) https://npmjs.org/package/findit
  34. 34. var findit = require(‘findit’);findit.sync(‘./source/data/articles’);[ source/data/articles/welcome-to-haroopress, source/data/articles/welcome-to-haroopress/index.markdown ]
  35. 35. markdown• used robotskirt npm module• *.markdown to *.html• sundown wrapper• high performance https://github.com/benmills/robotskirt
  36. 36. var rs = require(‘robotskirt’);rs.render(‘ #Dear Friends It’s **very important** ## References [link](http://haroopress.com)’);
  37. 37. <h1>Dear Friends</h1>It’s <strong>very important</strong><h2>References</h2><a href=”http://haroopress.com”>link </a>
  38. 38. layout & template• EJS <% ~~~ %>• <%=, <%-, <%• open source JavaScript template• express.js http://embeddedjs.com/
  39. 39. var ejs = require(‘ejs’);ejs.render(‘<h1><%= title %></h1>’, { title: #PlayNode });<h1>#PlayNode</h1>
  40. 40. design, responsive• only twitter bootstrap• responsive css• grid, scaffolding, components, JavaScript plugins http://twitter.github.com/bootstrap/
  41. 41. static file• used node.js filesystem module• fs.writeFileSync(‘*.html’, text, ‘utf8’); http://nodejs.org/api/fs.html
  42. 42. local server• used locally npm module• http server for static file serving• locally -w ./_public -p 8080 http://rhiokim.github.com/locally/
  43. 43. git control• used node.js child_process module• child_process.exec(‘git commit -am “commit” ’, callback); http://nodejs.org/api/child_process.html
  44. 44. publishing• make deploy• git push origin master• to [github id].github.com repository
  45. 45. commend line• make init, new-post, gen, preview, deploy ...• init.js, new-post.js, gen.js, deploy.js• chmod +x *.js
  46. 46. control flow• procedural programming in node.js• static generate, git control, deploy to github• used step npm module
  47. 47. stepGitInit(); initialize 0.5sstepGitAdd(); throw errorstepGitCommit();stepGitPush();
  48. 48. var step = require(‘step’);step( stepGitInit, //function stepGitAdd, //function stepGitCommit, //function stepGitPush //function);
  49. 49. haroopress 하루프레스 프리젠테이션 데모 http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/
  50. 50. presentation• used shower• cross-browser presentation template. https://github.com/pepelsbey/shower
  51. 51. Blog locally showerMarkdown HTML5 + CSS3 +modules node.js haroopress
  52. 52. Summary• isomorphic programming• change your mind• npmjs.org• node.js is LEGO
  53. 53. Summary• scalable documentation markup• awesome• markdown + html5 + css3 is fantastic• markdown + html5 + css3 + JavaScript is future
  54. 54. thanks rhio.kim@gmail.com @rhiokim, @haroopress http://haroopress.com http://github.com/rhiokim/haroopressHyacinth Macaw(히야신스 마카우)

×