Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: dc8aeaf3db
Fetching contributors…

Cannot retrieve contributors at this time

307 lines (251 sloc) 18.405 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloud9 IDE에 하루프레스 설치하기! | day-by-day</title>
<meta name="description" content="인터넷, 기술, 영화, 음악 그리고 내 이야기">
<meta name="author" content="nezz">
<meta name="keywords" content="internet,tech,dev,movie,music,story" />
<meta name="generator" content="haroopress v0.9.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/rss.xml" rel="alternate" title="day-by-day" type="application/rss+xml">
<!-- Le styles -->
<link rel="canonical" href="http://nezz.pe.kr">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/markdown.css" rel="stylesheet">
<link href="/css/haroopress.css" rel="stylesheet">
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/code/default.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-64.png">
<!-- Le javascript -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.jsonp.js"></script>
<script src="/js/mustache.js"></script>
<script src="/js/apps/github.js"></script>
<script src="/js/apps/twitter.js"></script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="pull-right" href="/rss.xml"><img src="/img/buttons/rss.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/archives">Archives</a>
</li>
<li>
<a href="/slides">Slides</a>
</li>
<li>
<a href="/node-js-note/">Node.js note</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<link href="/css/code/default.css" rel="stylesheet">
<div class="container page-archive">
<div class="row">
<div class="span3">
<div id="author" class="well">
<div>
<h3>About Author</h3>
<ul class="thumbnails">
<li>
<a class="thumbnail">
<img src="http://www.gravatar.com/avatar/d1ca68e62108265ddf2e62b347aa716e?r=pg&amp;s=128.jpg&amp;d=identicon" />
</a>
</li>
</ul>
<p>
<strong>nezz</strong><br/>
blog: <a href="undefined" target="_blank">http://nezz.pe.kr</a><br/>
twitter: <a href="http://twitter.com/undefined" target="_blank">@imtaehyun</a><br/>
github: <a href="https://github.com/undefined" target="_blank">imtaehyun</a>
</p>
<p>
<a href="https://twitter.com/imtaehyun" class="twitter-follow-button" data-show-count="true">Follow @imtaehyun</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
<p>
<p>잠시나마 스티브잡스와 같은길을 걸어본 사람</p>
</p>
</div>
<div>
<h3>About this Article</h3>
<p>
<h5>Date Released:</h5>
<span>Friday, November 9 2012 10:53 PM</span>
</p>
</div>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Categories</li>
<li class=""><a href="/category"><i class="icon-home"></i> Home</a></li>
<li><a href="/category/dev"><i class="icon-book"></i> dev</a></li>
<li><a href="/category/story"><i class="icon-book"></i> story</a></li>
<li><a href="/category/haroopress"><i class="icon-book"></i> haroopress</a></li>
</ul>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Recent Articles</li>
<li>
<a href="/post/first-server-with-node" target="_blank">First Server with node
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/npm" target="_blank">npm
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/haroopress-on-cloud-9" target="_blank">Cloud9 IDE에 하루프레스 설치하기!
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/harupeureseu-gaeindomein-seoljeongbangbeob" target="_blank">하루프레스 개인도메인 설정방법
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/h3-conference-2012" target="_blank">H3 Conference 2012 참가 후기
<span class="label">nezz</span></a>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span9">
<div class="well bg">
<div class="page-header">
<h1>Cloud9 IDE에 하루프레스 설치하기!</h1>
</div>
<div class="markdown-wrapper">
<h1 id="toc_13">맥이 없어도 하루프레스로 블로깅을 할 수 있다!</h1>
<p>현재 하루프레스는 맥에서만 사용가능하다고 하는데, 나는 집에서는 맥, 회사에서는 PC를 사용하고 있다. 그럼 회사에서는 포스팅을 할 수가 없어서 다른 방법이 있을까 찾아보다가 <a href="http://c9.io" title="Cloud9 IDE">Cloud9</a>이라는 서비스가 있어서 여기에 하루프레스 설치를 시도해 보았다.</p><p>참고로 <a href="http://c9.io" title="Cloud9 IDE">Cloud9</a>은 node.js로 만들어진 <strong>IDE툴</strong>, <strong>터미널</strong> 등등을 제공하는 곳이며, 또한 <strong>Github의 연동</strong>도 손쉽게 할 수 있도록 만들어진 무료서비스이다. 물론 유료 서비스도 있지만 무료를 사용해도 충분하다. 가입하는 방법은 매우 쉬우므로 생략하겠다.</p><p>이제부터 <a href="http://c9.io" title="Cloud9 IDE">Cloud9</a>에 하루프레스를 설치하는 방법을 설명할 것이다. 하루프레스 공식홈페이지에서 설명하는 방법을 따라하면서 발생하는 오류를 살펴보고 그에 대한 대처를 어떻게 하는지를 설명한다. 맥에서 하루프레스를 한번이라도 써본 사람이라면 더 이해하기 쉬울것이다. 그럼 시작하자!</p>
<h2 id="toc_14">Haroopress를 설치하자!</h2>
<h3 id="toc_15">Create New Workspace - Clone From Url</h3>
<p>하루프레스를 설치하기 위해서는 먼저 새로운 워크스페이스를 만들어야 한다. 이를 위해 <code>Create New Workspace</code>버튼을 클릭하고 <code>Clone From Url</code>을 클릭한다.</p><p><img src="./@img/c9_create.png" alt="새로운 워크스페이스 생성"></p><p>클릭하면 Clone From Url이라는 창이 보이는데 Source Url에는 <code>git://github.com/rhiokim/haroopress.git</code>를 선택하고 <code>Workspace Privacy는 Private을 선택</code>한다. 이때 Private을 선택하면 무료 서비스에서 제공하는 비공개 워크스페이스 한개를 사용하게 된다. (물론 하루프레스를 지우면 다른 용도로도 사용 가능하다.) Public 으로 하게되면 <code>config.js 파일이 다른사람에게도 노출</code>될 수 있으므로 Private을 선택하는것을 추천한다.</p><p><img src="./@img/c9_git.png" alt="Clone From Url"></p>
<h3 id="toc_16">make init 시도</h3>
<p><code>./bin/gh-pages.js</code>에서 에러가 발생.</p><p>현재 Cloud9에서 지원하는 node버전이 0.6.21인데 <code>fs.existsSync()</code>를 지원하지 않는 모양이다.</p><p><img src="./@img/err_1st.png" alt="make init 도중 에러발생"></p>
<h3 id="toc_17">gh-pages.js 수정</h3>
<p><img src="./@img/edit_1st.png" alt="수정"></p><p>찾아보니 fs를 대신 path모듈로 수정하자.</p>
<h3 id="toc_18">make init 재시도</h3>
<p><img src="./@img/err_2nd.png" alt="두번째 make init 도중 에러발생"></p><p><code>./bin/init.js</code>에서 에러가 발생.</p><p>위에서 발생한 에러와 이유가 같다.</p>
<h3 id="toc_19">init.js 수정</h3>
<p><img src="./@img/edit_2nd.png" alt="수정사항"></p>
<h3 id="toc_20">설치 성공</h3>
<p><img src="./@img/install_success.png" alt="설치 결과"></p>
<h2 id="toc_21">Haroopress로 포스팅을 하자!</h2>
<h3 id="toc_22">make new-post</h3>
<p>설치를 성공했으니 새로운 글을 써봐야지!</p><p><code>make new-post</code>로 새로운 포스트를 만들고 에디터 열어서 글도 써보았다.</p>
<h3 id="toc_23">make gen</h3>
<p>그럼 정적 페이지를 만들기 위해서 <code>make gen</code>을 실행. 어라! 에러 발생!</p><p><img src="./@img/err_make_gen.png" alt="make gen error!"></p><p>에러메시지를 자세히 살펴보니 robotskirt의 모듈을 열 수 없다는것 같음!</p><p>그럼 한번 update를 받아볼까?</p>
<h3 id="toc_24">npm update robotskirt</h3>
<p><img src="./@img/npm_update_robotskirt.png" alt="npm update robotskirt"></p><p>오! 성공적으로 update가 되었다! 그럼 다시한번 <code>make gen</code> 해볼까?</p>
<h3 id="toc_25">make gen 재시도</h3>
<p><img src="./@img/succ_make_gen.png" alt="make gen 재시도 성공"></p>
<h3 id="toc_26">make preview</h3>
<p><img src="./@img/err_preview.png" alt="make preview"></p><p>역시나 에러가 발생했다. 이는 Cloud 9에서 사용할 수 있게 해놓은 Host와 Port가 정해져 있기 때문이다.</p><p>그럼 하루프레스의 <code>config.js</code>파일을 열어보자.</p>
<h3 id="toc_27">config.js 파일 수정</h3>
<p>기존 하루프레스에서 default로 지정한 port는 <code>8081</code>이다. 그러나 Cloud 9에서는 <code>8080</code>번만 사용 할 수 있도록 해놓았기때문에 이 부분을 수정하자!</p><p><img src="./@img/edit_config.png" alt="edit config.js"></p>
<h3 id="toc_28">make preview 재시도</h3>
<p><img src="./@img/make_preview.png" alt="re-make preview"></p><p>make preview에 성공했다.</p><p>브라우저에서도 확인해 보았다. Cloud 9에서 확인 할 수 있는 주소는 haroopress.<code>자신의 Cloud9 ID</code>.c9.io이다.</p><p><img src="./@img/succ_website.png" alt="browser test"></p><p>역시나 브라우저에서도 잘 보이는것을 확인 할 수 있었다.</p>
<h2 id="toc_29">마지막 단계! Github 페이지로 deploy 하기</h2>
<p>이제 Github 페이지에만 올리면 된다. 조금만 더 힘내자!</p><p>처음 <code>make init</code>때 github 주소를 정상적으로 입력했었다면 <code>make deploy</code> 명령으로 Github에 블로그를 올릴 수 있다.</p><p><img src="./@img/deploy_gh.png" alt="deploy to github">
<img src="./@img/deploy_gh2.png" alt="deploy to github"></p><p>성공했다! 잠시후 성공했다는 이메일로 도착했다.</p><p><img src="./@img/succ_email.png" alt="성공이메일 도착"></p><p>github 페이지도 열어보자!</p><p><img src="./@img/github_pg.png" alt="Github Page 확인"></p><p>Github 페이지에서도 잘 보인다!!</p>
<h2 id="toc_30">결론</h2>
<p>결과적으로 Cloud 9 이라는 클라우드 서비스에서도 하루프레스 블로그를 운영할 수 있다. 물론 앞으로 업데이트 될 하루프레스에서는 될수도, 안될수도 있다. 그때마다 수정을 계속해야하는 불편함도 있을수 있고. 그러나 맥이 아닌 다른 플랫폼에서 하루프레스로 블로깅을 할 수 있다는것이 얼마나 기쁜일인가?</p><p>한가지 염두에 되야하는것은 Cloud 9에서 제공하는 터미널에서는 한글이 입력되지 않으므로 <code>make new-post</code> 이후에 글을 쓰는 것은 터미널이 아닌 에디터를 열어서 작성해야한다는것을 명심하자. (물론 영어로 작성할꺼라면 걱정하지 않아도 되겠다! 부럽다!)</p><p>또한 이글은 내가 호기심에 시도한것을 작성한것뿐이지 <a href="http://haroopress.org" title="Haroopress.com">하루프레스</a>와 <a href="http://twitter.com/rhiokim">@rhiokim</a>님의 의도와는 관련이 없다.</p><p><em class="label label-info"><strong><i class="icon-info-sign icon-white"></i> 관련링크</strong></em></p>
<ul>
<li><a href="http://haroopress.com/post/haroopress-quick-guide/">하루프레스 퀵 가이드</a></li>
<li><a href="http://haroopress.com/post/haroopress-deploy-to-github/">블로그 Github로 배포하기</a></li>
</ul>
</div>
<hr />
<div class="row-fluid">
<div class="pull-right">
<a href="/post/harupeureseu-gaeindomein-seoljeongbangbeob" class="btn btn-info">하루프레스 개인도메인 설정방법 <i class="icon-white icon-chevron-right"></i></a>
</div>
<div class="pull-left">
<a href="/post/h3-conference-2012" class="btn btn-info"><i class="icon-white icon-chevron-left"></i> H3 Conference 2012 참가 후기</a>
</div>
</div>
<div class="row-fluid">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'nezz-blog'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<!--<div class="row">-->
<!--<div class="offset3 span9">-->
<!--<strong>tags</strong> :-->
<!---->
<!--<a href="/tag/haroopress">haroopress</a>&nbsp;-->
<!---->
<!--<a href="/tag/blog">blog</a>&nbsp;-->
<!---->
<!--</div>-->
<!--</div>-->
</div><!-- /container -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="span12 ">
<div class="well">
<p class="pull-right"><a href="#">Back to top</a></p>
<strong>haroopress</strong> developed by <a href="http://twitter.com/rhiokim" target="_blank">@rhiokim</a>,<a href="http://twitter.com/haroopress" target="_blank">@haroopress</a> and source in <a href="https://github.com/rhiokim/haroopress" target="_blank">github</a><br/>
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36216394-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.