1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll ⢠Simple, blog-aware, static sites" /> 7 <link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" /> 8 <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyllâs master branch" href="https://github.com/jekyll/jekyll/commits/master.atom"> 9 <link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin /> 10 <link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin /> 11 <link rel="preload" href="/css/screen.css" as="style"> 12 <link rel="stylesheet" href="/css/screen.css"> 13 <link rel="icon" type="image/x-icon" href="/favicon.ico"> 14 <!-- Begin Jekyll SEO tag v2.9.0 --> 15<title>Quickstart | Jekyll ⢠Simple, blog-aware, static sites</title> 16<meta name="generator" content="Jekyll v4.4.1" /> 17<meta property="og:title" content="Quickstart" /> 18<meta property="og:locale" content="en_US" /> 19<meta name="description" content="Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the siteâs look and feel, URLs, the data displayed on the page, and more." /> 20<meta name="twitter:description" property="og:description" content="Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the siteâs look and feel, URLs, the data displayed on the page, and more." /> 21<link rel="canonical" href="https://jekyllrb.com/docs/" /> 22<meta property="og:url" content="https://jekyllrb.com/docs/" /> 23<meta property="og:site_name" content="Jekyll ⢠Simple, blog-aware, static sites" /> 24<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" /> 25<meta property="og:type" content="article" /> 26<meta property="article:published_time" content="2026-09-17T12:19:58-07:00" /> 27<meta property="article:modified_time" content="2026-09-17T12:19:58-07:00" /> 28<meta name="twitter:card" content="summary_large_image" /> 29<meta name="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" /> 30<meta name="twitter:title" content="Quickstart" /> 31<meta name="twitter:site" content="@jekyllrb" /> 32<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
33<script type="application/ld+json"> 34{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2026-09-17T12:19:58-07:00","datePublished":"2026-09-17T12:19:58-07:00","description":"Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the siteâs look and feel, URLs, the data displayed on the page, and more.","headline":"Quickstart","image":"https://jekyllrb.com/img/jekyll-og.png","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/docs/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"url":"https://jekyllrb.com/docs/"}</script>
34 35<!-- End Jekyll SEO tag --> 36 37 <!--[if lt IE 9]> 38
38<script src="/js/html5shiv.min.js"></script>
38 39
39<script src="/js/respond.min.js"></script>
39 40 <![endif]--> 41</head> 42<body class="wrap"><header> 43 <div class="flexbox"> 44 <div class="center-on-mobiles"> 45 <h1> 46 <a href="/" class="logo"> 47 <span class="sr-only">Jekyll</span> 48 <img src="/img/logo-2x.png" width="140" height="65" alt="Jekyll Logo"> 49 </a> 50 </h1> 51 </div> 52 <nav class="main-nav hide-on-mobiles"> 53 <ul> 54 <li><a href="/">Home</a></li> 55 <li class="current"><a href="/docs/">Docs</a></li> 56 <li><a href="/resources/">Resources</a></li> 57 <li><a href="/showcase/">Showcase</a></li> 58 <li><a href="/news/">News</a></li> 59 </ul> 60</nav> 61 <div class="search hide-on-mobiles"> 62 <input type="text" id="docsearch-input" placeholder="Search the docsâ¦" aria-label="Search"></div> 63 <div class="meta hide-on-mobiles"> 64 <ul> 65 <li><a href="https://github.com/jekyll/jekyll/releases/tag/v4.4.1">v4.4.1</a></li> 66 <li><a href="https://github.com/jekyll/jekyll">GitHub</a></li> 67 </ul> 68 </div> 69 </div> 70 <nav class="mobile-nav show-on-mobiles"> 71 <ul> 72 <li><a href="/">Home</a></li> 73 <li class="current" aria-current="page" ><a href="/docs/">Docs</a></li> 74 <li><a href="/resources/">Resources</a></li> 75 <li><a href="/news/">News</a></li> 76 <li><a href="https://github.com/jekyll/jekyll" target="_blank" rel="noopener">GitHub</a></li> 77</ul></nav> 78</header> 79<section class="docs"> 80 <div class="grid"> 81 <div class="docs-nav-mobile unit whole show-on-mobiles"> 82 <select id="doc-nav" onchange="navigateToUrl(this)" aria-label="Select a page from the documentation"> 83 <option value="">Navigate the docsâ¦</option> 84 85 <optgroup label="Getting Started"> 86 <option value="/docs/">Quickstart</option> 87 <option value="/docs/installation/">Installation</option> 88 <option value="/docs/ruby-101/">Ruby 101</option> 89 <option value="/docs/community/">Community</option> 90 <option value="/docs/step-by-step/01-setup/">Step by Step Tutorial</option> 91 </optgroup> 92 93 <optgroup label="Build"> 94 <option value="/docs/usage/">Command Line Usage</option> 95 <option value="/docs/configuration/">Configuration</option> 96 <option value="/docs/rendering-process/">Rendering Process</option> 97 </optgroup> 98 99 <optgroup label="Content"> 100 <option value="/docs/pages/">Pages</option> 101 <option value="/docs/posts/">Posts</option> 102 <option value="/docs/front-matter/">Front Matter</option> 103 <option value="/docs/collections/">Collections</option> 104 <option value="/docs/datafiles/">Data Files</option> 105 <option value="/docs/assets/">Assets</option> 106 <option value="/docs/static-files/">Static Files</option> 107 </optgroup> 108 109 <optgroup label="Site Structure"> 110 <option value="/docs/structure/">Directory Structure</option> 111 <option value="/docs/liquid/">Liquid</option> 112 <option value="/docs/variables/">Variables</option> 113 <option value="/docs/includes/">Includes</option> 114 <option value="/docs/layouts/">Layouts</option> 115 <option value="/docs/permalinks/">Permalinks</option> 116 <option value="/docs/themes/">Themes</option> 117 <option value="/docs/pagination/">Pagination</option> 118 </optgroup> 119 120 <optgroup label="Guides"> 121 <option value="/docs/plugins/">Plugins</option> 122 <option value="/docs/migrations/">Blog Migrations</option> 123 <option value="/docs/upgrading/">Upgrading</option> 124 <option value="/docs/deployment/">Deployment</option> 125 </optgroup> 126 127 </select> 128</div> 129<div class="unit four-fifths"> 130 <article> 131 <div class="improve right hide-on-mobiles"> 132 <a data-proofer-ignore href="https://github.com/jekyll/jekyll/edit/master/docs/_docs/index.md"> 133 <i class="fa fa-pencil"></i> Improve this page 134 </a> 135</div> 136 137 <h1>Quickstart</h1> 138 <p>Jekyll is a static site generator. It takes text written in your 139favorite markup language and uses layouts to create a static website. You can 140tweak the siteâs look and feel, URLs, the data displayed on the page, and more.</p> 141 142<h2 id="prerequisites">Prerequisites</h2> 143 144<p>Jekyll requires the following:</p> 145 146<ul> 147 <li>Ruby version <strong>2.7.0</strong> or higher</li> 148 <li>RubyGems</li> 149 <li>GCC and Make</li> 150</ul> 151 152<p>See <a href="/docs/installation/#requirements">Requirements</a> for guides and details.</p> 153 154<h2 id="instructions">Instructions</h2> 155 156<ol> 157 <li>Install all <a href="/docs/installation/">prerequisites</a>.</li> 158 <li>Install the jekyll and bundler <a href="/docs/ruby-101/#gems">gems</a>. 159 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>jekyll bundler 160</code></pre></div> </div> 161 </li> 162 <li>Create a new Jekyll site at <code class="language-plaintext highlighter-rouge">./myblog</code>. 163 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll new myblog 164</code></pre></div> </div> 165 </li> 166 <li>Change into your new directory. 167 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd </span>myblog 168</code></pre></div> </div> 169 </li> 170 <li>Build the site and make it available on a local server. 171 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve 172</code></pre></div> </div> 173 </li> 174 <li>Browse to <a href="http://localhost:4000" target="_blank">http://localhost:4000</a></li> 175</ol> 176 177<p class="note warning">If you are using Ruby version 3.0.0 or higher, step 5 <a href="https://github.com/github/pages-gem/issues/752">may fail</a>. You may fix it by adding <code class="language-plaintext highlighter-rouge">webrick</code> to your dependencies: <code class="language-plaintext highlighter-rouge">bundle add webrick</code></p> 178 179<p class="note info">Pass the <code class="language-plaintext highlighter-rouge">--livereload</code> option to <code class="language-plaintext highlighter-rouge">serve</code> to automatically refresh the page with each change you make to the source files: <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve --livereload</code></p> 180 181<p>If you encounter any errors during this process, check that you have installed all the prerequisites in <a href="/docs/installation/#requirements">Requirements</a>. 182If you still have issues, see <a href="/docs/troubleshooting/#configuration-problems">Troubleshooting</a>.</p> 183 184<p class="note info">Installation varies based on your operating system. See our <a href="/docs/installation/#guides">guides</a>
184 for OS-specific instructions.</p> 185 186 </article> 187 </div> 188 <div class="unit one-fifth hide-on-mobiles"> 189 <aside> 190 191 <h4>Getting Started</h4> 192 <ul> 193 <li class="current"><a href="/docs/"> 194 Quickstart 195 </a> 196 </li> 197 198 <li><a href="/docs/installation/"> 199 Installation 200 </a> 201 </li> 202 203 <li><a href="/docs/ruby-101/"> 204 Ruby 101 205 </a> 206 </li> 207 208 <li><a href="/docs/community/"> 209 Community 210 </a> 211 </li> 212 213 <li><a href="/docs/step-by-step/01-setup/"> 214 Step by Step Tutorial 215 </a> 216 </li> 217 218 </ul> 219 220 <h4>Build</h4> 221 <ul> 222 <li><a href="/docs/usage/"> 223 Command Line Usage 224 </a> 225 </li> 226 227 <li><a href="/docs/configuration/"> 228 Configuration 229 </a> 230 </li> 231 232 <li><a href="/docs/rendering-process/"> 233 Rendering Process 234 </a> 235 </li> 236 237 </ul> 238 239 <h4>Content</h4> 240 <ul> 241 <li><a href="/docs/pages/"> 242 Pages 243 </a> 244 </li> 245 246 <li><a href="/docs/posts/"> 247 Posts 248 </a> 249 </li> 250 251 <li><a href="/docs/front-matter/"> 252 Front Matter 253 </a> 254 </li> 255 256 <li><a href="/docs/collections/"> 257 Collections 258 </a> 259 </li> 260 261 <li><a href="/docs/datafiles/"> 262 Data Files 263 </a> 264 </li> 265 266 <li><a href="/docs/assets/"> 267 Assets 268 </a> 269 </li> 270 271 <li><a href="/docs/static-files/"> 272 Static Files 273 </a> 274 </li> 275 276 </ul> 277 278 <h4>Site Structure</h4> 279 <ul> 280 <li><a href="/docs/structure/"> 281 Directory Structure 282 </a> 283 </li> 284 285 <li><a href="/docs/liquid/"> 286 Liquid 287 </a> 288 </li> 289 290 <li><a href="/docs/variables/"> 291 Variables 292 </a> 293 </li> 294 295 <li><a href="/docs/includes/"> 296 Includes 297 </a> 298 </li> 299 300 <li><a href="/docs/layouts/"> 301 Layouts 302 </a> 303 </li> 304 305 <li><a href="/docs/permalinks/"> 306 Permalinks 307 </a> 308 </li> 309 310 <li><a href="/docs/themes/"> 311 Themes 312 </a> 313 </li> 314 315 <li><a href="/docs/pagination/"> 316 Pagination 317 </a> 318 </li> 319 320 </ul> 321 322 <h4>Guides</h4> 323 <ul> 324 <li><a href="/docs/plugins/"> 325 Plugins 326 </a> 327 </li> 328 329 <li><a href="/docs/migrations/"> 330 Blog Migrations 331 </a> 332 </li> 333 334 <li><a href="/docs/upgrading/"> 335 Upgrading 336 </a> 337 </li> 338 339 <li><a href="/docs/deployment/"> 340 Deployment 341 </a> 342 </li> 343 344 </ul> 345 </aside> 346</div> 347<div class="clear"></div> 348 </div> 349</section> 350<footer> 351 <div class="grid"> 352 <div class="unit two-thirds center-on-mobiles"> 353 <p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p> 354 <p>The contents of this website are <br />© 2026 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p> 355 </div> 356 <div class="unit one-third align-right center-on-mobiles"> 357 <p> 358 Proudly hosted by 359 <a href="https://github.com"> 360 <img src="/img/footer-logo.png" width="100" height="30" alt="GitHub ⢠Social coding"> 361 </a> 362 </p> 363 <p> 364 Jekyll is funded thanks to its <a href="https://github.com/jekyll/jekyll#sponsors">sponsors!</a> 365 </p> 366 </div> 367 </div> 368</footer>
369<script> 370/* Creates an anchor element with the given ID and link for the permalink*/ 371const anchorForId = (id) => { 372 const anchor = document.createElement("a"); 373 anchor.className = "header-link"; 374 anchor.href = `#${id}`; 375 anchor.innerHTML = `<span class="sr-only">Permalink</span><i class="fa fa-link" aria-hidden="true"></i>`; 376 anchor.title = "Permalink"; 377 return anchor; 378}; 379 380/* Finds all headers of the specified level within the given element, and adds a permalink to each header*/ 381const linkifyAnchors = (level, containingElement) => { 382 const headers = Array.from(containingElement.getElementsByTagName(`h${level}`)); 383 headers.forEach((header) => { 384 if (header.id) { 385 header.appendChild(anchorForId(header.id)); 386 } 387 }); 388}; 389 390/* Executes the function when the document is ready */ 391document.onreadystatechange = () => { 392 if (document.readyState === "complete") { 393 const contentBlock = document.getElementsByClassName("docs")[0] 394 ?? document.getElementsByClassName("news")[0]; 395 if (!contentBlock) { return; } 396 for (let level = 1; level <= 6; level++) { 397 linkifyAnchors(level, contentBlock); 398 } 399 } 400}; 401</script>
401 402<!-- Google Analytics (https://www.google.com/analytics) --> 403
403<script> 404 !function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){ 405 (j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k), 406 L=e.getElementsByTagName(k)[0],l.src='https://www.google-analytics.com/analytics.js', 407 L.parentNode.insertBefore(l,L)}(window,document,'script','ga'); 408 409 ga('create', 'UA-50755011-1', 'jekyllrb.com'); 410 ga('send', 'pageview'); 411 </script>
vendor: 1 bytes, line 411
411
412<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
vendor: 1 bytes, line 412
412
413<script> docsearch({ 414apiKey: '50fe39c839958dfad797000f33e2ec17', 415indexName: 'jekyllrb', 416inputSelector: '#docsearch-input', 417enhancedSearchInput: true, 418debug: false // Set debug to true if you want to inspect the dropdown 419}); 420</script>
vendor: 1 bytes, line 420
420
421<script> 422 const navigateToUrl = (select) => { 423 const url = select.value; 424 url && (window.location.href = url); 425 }; 426 </script>
426 427</body> 428</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.