main
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
73all 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
91a file name <code>Gemfile</code>. The gems we need are simple : <code>jekyll</code>, <code>guard</code> and some
92Guard 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
109is 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,
123forward the output and handle the shutdown. It can then export its configuration
124into 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
135guard: 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
138directory 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