1. haroopress
노드를 기반으로 한 정적 페이지 블로그 엔진
http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/

2. I love javascript
rhio kim node.js
arduino, git, HCI
http://github.com/rhiokim, http://haroopress.com, http://nodejs.kr
BaaS tech in kth

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. Static page Blog engine
by rhio.kim
http://haroopress.com

5. index.html page.html archive.html
haroopress
ppt.html list.html page2.html

6. Characters
• No! Web Server
• No! Database
• No! Programming
• Only Markdown
• Very Simple & Easy
http://haroopress.github.com/about/

7. 하루프레스는
블로그가 필요한 사람들보다 글을 쓰는데
불필요한 서버 구성, 데이터 베이스 설치 등을 잊고
글 쓰는 곳에만 몰입할 수 있도록 하는데에 있습니다.

8. wordpress octopress

9. haroopress
하루프레스 기능적 특징
http://buchstauben.com/

12. dropbox
any
wh ere
office home
github

13. git push
haroopress [id].github.com
do
not
hos nee rsync
ting d

14. Web Presentation with haroopress
by rhio.kim

15. Data Migration
• Ocotopress
• Wordpress
• Tistory
• Tumblr
• ...
https://github.com/pepelsbey/shower

16. 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

17. • [youtube:9bZkp7q19f0]
• [jsfiddle:ccWP7]
• [tweet:2372193965568]
• [gist:4094468]
• [vimeo:52616124]

18. • [youtube:9bZkp7q19f0]
• [jsfiddle:ccWP7]
• [tweet:2372193965568]
• [gist:4094468]
• [vimeo:52616124]

19. • [youtube:9bZkp7q19f0]
• [jsfiddle:ccWP7]
• [tweet:2372193965568]
• [gist:4094468]
• [vimeo:52616124]

20. • [youtube:9bZkp7q19f0]
• [jsfiddle:ccWP7]
• [tweet:2372193965568]
• [gist:4094468]
• [vimeo:52616124]

21. • [youtube:9bZkp7q19f0]
• [jsfiddle:ccWP7]
• [tweet:2372193965568]
• [gist:4094468]
• [vimeo:52616124]

22. haroopress
하루프레스 핵심 기술

23. #Dear Friends
It’s **very important**
## Please! check this
* Item1
- subItem1
- subItem2
## References
* [link](http://haroopress.com)
John Gruber http://daringfireball.net/projects/markdown/

24. #마크다운을 예쁘게 표현하리라!

26. Twitter Bootstrap

28. Everything is JavaScript

29. https://vimeo.com/53989933

30. haroopress
하루프레스 데모
http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/

31. star: 6, fork: 2
기본적인 블로그 수준
https://github.com/rhiokim/haroopress

32. star: 6, fork: 2
디아블로 3에 빠져... 회사도 잊은체...
https://github.com/rhiokim/haroopress

33. star: 39, fork: 19
v0.9 으로 세상에 출시
https://github.com/rhiokim/haroopress

34. haroopress
하루프레스 개발이야기
http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/

35. Blog
locally
twitter bootstrap
Markdown HTML5 + CSS3
+modules
node.js
haroopress

36. 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/

37. findit
• used findit npm module
• get directory structure
• findit.sync(__dirname)
https://npmjs.org/package/findit

38. var findit = require(‘findit’);
findit.sync(‘./source/data/articles’);
[ 'source/data/articles/welcome-to-
haroopress',
'source/data/articles/welcome-to-
haroopress/index.markdown' ]

39. markdown
• used robotskirt npm module
• *.markdown to *.html
• sundown wrapper
• high performance
https://github.com/benmills/robotskirt

40. var rs = require(‘robotskirt’);
rs.render(‘
#Dear Friends
It’s **very important**
## References
[link](http://haroopress.com)
’);

41. <h1>Dear Friends</h1>
It’s <strong>very important</strong>
<h2>References</h2>
<a href=”http://haroopress.com”>link </a>

42. layout & template
• EJS <% ~~~ %>
• <%=, <%-, <%
• open source JavaScript template
• express.js
http://embeddedjs.com/

43. var ejs = require(‘ejs’);
ejs.render(‘<h1><%= title %></h1>’,
{ title: '#PlayNode' });
<h1>#PlayNode</h1>

44. design, responsive
• only twitter bootstrap
• responsive css
• grid, scaffolding, components, JavaScript
plugins
http://twitter.github.com/bootstrap/

45. static file
• used node.js filesystem module
• fs.writeFileSync(‘*.html’, text, ‘utf8’);
http://nodejs.org/api/fs.html

46. local server
• used locally npm module
• http server for static file serving
• locally -w ./_public -p 8080
http://rhiokim.github.com/locally/

47. git control
• used node.js child_process module
• child_process.exec(‘git commit -am
“commit” ’, callback);
http://nodejs.org/api/child_process.html

48. publishing
• make deploy
• git push origin master
• to [github id].github.com repository

49. commend line
• make init, new-post, gen, preview, deploy ...
• init.js, new-post.js, gen.js, deploy.js
• chmod +x *.js

50. control flow
• procedural programming in node.js
• static generate, git control, deploy to github
• used step npm module

51. stepGitInit(); initialize 0.5s
stepGitAdd(); throw error
stepGitCommit();
stepGitPush();

52. var step = require(‘step’);
step(
stepGitInit, //function
stepGitAdd, //function
stepGitCommit, //function
stepGitPush //function
);

53. haroopress
하루프레스 프리젠테이션 데모
http://fiftyfootshadows.net/2011/02/02/typewriter-picnic/

54. presentation
• used shower
• cross-browser presentation template.
https://github.com/pepelsbey/shower

55. Blog
locally
shower
Markdown HTML5 + CSS3
+modules
node.js
haroopress

56. Summary
• isomorphic programming
• change your mind
• npmjs.org
• node.js is LEGO

57. Summary
• scalable documentation markup
• awesome
• markdown + html5 + css3 is fantastic
• markdown + html5 + css3 + JavaScript is
future

58. thanks
rhio.kim@gmail.com
@rhiokim, @haroopress
http://haroopress.com
http://github.com/rhiokim/haroopress
Hyacinth Macaw(히야신스 마카우)