index.html (6571B)
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 8 9 <link rel="start" href="https://vincent.demeester.fr" /> 10 11 <title>Vincent Demeester</title> 12 <link rel="canonical" href="https://vincent.demeester.fr/posts/2012-05-13-jekyll-foreman-guard-bundler/"> 13 <link href="https://vincent.demeester.fr/index.xml" rel="alternate" type="application/rss+xml" title="Vincent Demeester" /> 14 15 <link rel="openid.server" href="https://indieauth.com/openid" /> 16 <link rel="openid.delegate" href="http://vincent.demeester.fr/" /> 17 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 18 19 <link rel="stylesheet" href="/css/screen.css" type="text/css" /> 20 <link rel="stylesheet" href="/css/sbrain.css" type="text/css" /> 21 <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> 22 23 </head> 24 25 <body lang="" class="gray"> 26 27 28 29 30 31 32 <div id="main-container"> 33 <div id="page"> 34 <article class="post"> 35 <header> 36 <h1 class="emphnext">Jekyll Forman Guard Bundler</h1><a href='https://vincent.demeester.fr/posts/2012-05-13-jekyll-foreman-guard-bundler/'></a> 37 <address class="signature"> 38 <span class="date">Sun, 13 May, 2012</span> 39 <span class="words">(300 Words)</span> 40 </address> 41 <ul class="tag_box inline"> 42 43 <li class="category"><a href="/categories/#developement">developement</a></li> 44 45 46 47 48 49 <li class="tag tag-jekyll"><a href="/tags/#jekyll">jekyll<span>4</span></a></li> 50 51 52 <li class="tag tag-ruby"><a href="/tags/#ruby">ruby<span>1</span></a></li> 53 54 55 <li class="tag tag-bundler"><a href="/tags/#bundler">bundler<span>1</span></a></li> 56 57 58 <li class="tag tag-guard"><a href="/tags/#guard">guard<span>1</span></a></li> 59 60 61 <li class="tag tag-foreman"><a href="/tags/#foreman">foreman<span>1</span></a></li> 62 63 <br/> 64 65 </ul> 66 </header> 67 68 69 70 71 72 <p>This post is a quick “How did I setup my Jekyll environnement ?”. We are going 73 all the tools that are quite awesome in Ruby.</p> 74 75 <h1 id="goal">Goal</h1> 76 77 <p>The goal is simple :</p> 78 79 <ol> 80 <li>I want to be able to install any dependent <a href="http://rubygems.org">Gem</a> with a 81 <em>on-liner</em> command</li> 82 <li>I want to be able to run a <em>Jekyll server</em> that auto updates.</li> 83 </ol> 84 85 <p>We are going to play with : <a href="http://gembundler.com/">Bundler</a>, 86 <a href="https://github.com/guard/guard">Guard</a> and <a href="https://github.com/ddollar/foreman">foreman</a>.</p> 87 88 <h2 id="bundler">Bundler</h2> 89 90 <p>Bundler let us run <code>bundle install</code> to get all Ruby Gems we will need ; It use 91 a file name <code>Gemfile</code>. The gems we need are simple : <code>jekyll</code>, <code>guard</code> and some 92 Guard extensions.</p> 93 94 <div class="highlight"><pre class="chroma"><code class="language-ruby" data-lang="ruby"><span class="n">source</span> <span class="s2">"http://rubygems.org"</span> 95 96 <span class="n">gem</span> <span class="s1">'jekyll'</span> 97 <span class="n">gem</span> <span class="s1">'guard'</span> 98 <span class="n">gem</span> <span class="s1">'guard-jekyll2'</span> 99 <span class="n">gem</span> <span class="s1">'guard-shell'</span> 100 <span class="n">gem</span> <span class="s1">'guard-bundler'</span></code></pre></div> 101 102 <h2 id="guard">Guard</h2> 103 104 <blockquote> 105 <p>Guard is a command line tool to easily handle events on file system modifications.</p> 106 </blockquote> 107 108 <p>Guard will be watching file we told him and run action in consequence ; The file 109 is name <code>Guardfile</code>.</p> 110 111 <div class="highlight"><pre class="chroma"><code class="language-ruby" data-lang="ruby"><span class="n">guard</span> <span class="s1">'jekyll2'</span> <span class="k">do</span> 112 <span class="n">watch</span> <span class="sr">%r{.*}</span> 113 <span class="k">end</span> 114 115 <span class="n">guard</span> <span class="ss">:bundler</span> <span class="k">do</span> 116 <span class="n">watch</span><span class="p">(</span><span class="s1">'Gemfile'</span><span class="p">)</span> 117 <span class="k">end</span> 118 <span class="c1"># vim:filetype=ruby</span></code></pre></div> 119 120 <h2 id="foreman">Foreman</h2> 121 122 <p>Finally, foreman will let us declare our processes and will handle the start, 123 forward the output and handle the shutdown. It can then export its configuration 124 into more <em>production-ready</em> file (<code>init</code>, <code>upstard</code>, …) ; It uses a file named 125 <code>Procfile</code>.</p> 126 127 <p>We will tell foreman to run :</p> 128 129 <ul> 130 <li>The jekyll build-in server : <code>jekyll --server</code></li> 131 <li>Guard, to handle file changes <em>in background</em>.</li> 132 </ul> 133 134 <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">web: bundle <span class="nb">exec</span> jekyll --server 135 guard: bundle <span class="nb">exec</span> guard</code></pre></div> 136 137 <p>And that’s all folk. Now, you just need to run foreman in the Jekyll-powered 138 directory and edit your files.</p> 139 140 141 </article> 142 <hr /> 143 <div class="prev-next"> 144 145 <a class="paging-link prev" href="/posts/2012-07-21-news/" title="News">← Previous post</a> 146 147 148 149 <a class="paging-link next" href="/posts/2012-05-08-gitolite-quick-and-dirty-mirror/" title="Gitolite quick and dirty mirror">Next post →</a> 150 151 </div> 152 153 </div> 154 </div> 155 156 <footer> 157 <nav> 158 159 <a href="/">home</a> 160 <span class="text-muted"> | </span> 161 162 <a href="/about">about</a> 163 <span class="text-muted"> | </span> 164 165 <a href="/archive">archive</a> 166 <span class="text-muted"> | </span> 167 168 <a href="/categories">categories</a> 169 <span class="text-muted"> | </span> 170 171 <a href="/tags">tags</a> 172 <span class="text-muted"> | </span> 173 174 <a href="https://twitter.com/vdemeest">twitter</a> 175 <span class="text-muted"> | </span> 176 177 <a href="https://github.com/vdemeester">github</a> 178 <span class="text-muted"> | </span> 179 180 <a href="https://vincent.demeester.fr/index.xml">rss</a> 181 </nav> 182 <br/> 183 <address> 184 <span class="copyright"> 185 Content and design by Vincent Demeester 186 (<a rel="licence" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved</a>) 187 </span><br /> 188 <span class="engine"> 189 Powered by <a href="https://gohugo.io/">Hugo</a> and <a href="https://github.com/kaushalmodi/ox-hugo/">ox-hugo</a> 190 </span> 191 </address> 192 </footer> 193 </body> 194