PlayNode Conference 2012 (NodeConf 2012 in Korea) 에서 발표한 node.js 기반의 정적 페이지 블로그 엔진 하루프레스 하루프레스의 기능적인 특징, 철학 그리고 기술적인 특징을 통해 알아보는 개발 노하우에 대한 내용을 닮고 있습니다.

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(히야신스 마카우)