CINXE.COM
Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" /> <link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" /> <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom"> <link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/css/screen.css" as="style"> <link rel="stylesheet" href="/css/screen.css"> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <!-- Begin Jekyll SEO tag v2.8.0 --> <title>Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs</title> <meta name="generator" content="Jekyll v4.3.4" /> <meta property="og:title" content="Jekyll • Simple, blog-aware, static sites" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Transform your plain text into static websites and blogs" /> <meta property="og:description" content="Transform your plain text into static websites and blogs" /> <link rel="canonical" href="https://jekyllrb.com/" /> <meta property="og:url" content="https://jekyllrb.com/" /> <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" /> <meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" /> <meta property="twitter:title" content="Jekyll • Simple, blog-aware, static sites" /> <meta name="twitter:site" content="@jekyllrb" /> <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","description":"Transform your plain text into static websites and blogs","headline":"Jekyll • Simple, blog-aware, static sites","image":"https://jekyllrb.com/img/jekyll-og.png","name":"Jekyll • Simple, blog-aware, static sites","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"url":"https://jekyllrb.com/"}</script> <!-- End Jekyll SEO tag --> <!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> </head> <body class="wrap"><header> <div class="flexbox"> <div class="center-on-mobiles"> <h1> <a href="/" class="logo"> <span class="sr-only">Jekyll</span> <img src="/img/logo-2x.png" width="140" height="65" alt="Jekyll Logo"> </a> </h1> </div> <nav class="main-nav hide-on-mobiles"> <ul> <li class="current"><a href="/">Home</a></li> <li><a href="/docs/">Docs</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/showcase/">Showcase</a></li> <li><a href="/news/">News</a></li> </ul> </nav> <div class="search hide-on-mobiles"> <input type="text" id="docsearch-input" placeholder="Search the docs…" aria-label="Search"></div> <div class="meta hide-on-mobiles"> <ul> <li><a href="https://github.com/jekyll/jekyll/releases/tag/v4.3.4">v4.3.4</a></li> <li><a href="https://github.com/jekyll/jekyll">GitHub</a></li> </ul> </div> </div> <nav class="mobile-nav show-on-mobiles"> <ul> <li class="current" aria-current="page" ><a href="/">Home</a></li> <li><a href="/docs/">Docs</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/news/">News</a></li> <li><a href="https://github.com/jekyll/jekyll" target="_blank" rel="noopener">GitHub</a></li> </ul></nav> </header> <section class="intro"> <div class="grid"> <div class="unit whole center-on-mobiles"> <p class="first">Transform your plain text into static websites and blogs.</p> </div> </div> </section> <section class="features center-on-mobiles"> <div class="grid"> <div class="unit one-third"> <h2>Simple</h2> <p> No more databases, comment moderation, or pesky updates to install—just <em>your content</em>. </p> <a href="/docs/usage/">How Jekyll works →</a> </div> <div class="unit one-third"> <h2>Static</h2> <p><a href="https://daringfireball.net/projects/markdown/">Markdown</a>, <a href="https://github.com/Shopify/liquid/wiki">Liquid</a>, HTML <span class="amp">&</span> CSS go in. Static sites come out ready for deployment.</p> <a href="/docs/templates/">Jekyll template guide →</a> </div> <div class="unit one-third"> <h2>Blog-aware</h2> <p> Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here. </p> <a href="https://import.jekyllrb.com">Migrate your blog →</a> </div> <div class="clear"></div> </div> </section> <section class="quickstart"> <div class="grid"> <div class="unit golden-small center-on-mobiles"> <h3>Get up and running <em>in seconds</em>.</h3> </div> <div class="unit golden-large code"> <p class="title">Quick-start Instructions</p> <div class="shell"> <p class="line"> <span class="path">~</span> <span class="prompt">$</span> <span class="command">gem install bundler jekyll</span> </p> <p class="line"> <span class="path">~</span> <span class="prompt">$</span> <span class="command">jekyll new my-awesome-site</span> </p> <p class="line"> <span class="path">~</span> <span class="prompt">$</span> <span class="command">cd my-awesome-site</span> </p> <p class="line"> <span class="path">~/my-awesome-site</span> <span class="prompt">$</span> <span class="command">bundle exec jekyll serve</span> </p> <p class="line"> <span class="output"># => Now browse to http://localhost:4000</span> </p> </div> </div> <div class="clear"></div> </div> </section> <section class="free-hosting"> <div class="grid"> <div class="unit whole"> <div class="grid pane"> <div class="unit whole center-on-mobiles"> <img src="/img/octojekyll.png" width="300" height="251" alt="Free Jekyll hosting on GitHub Pages"> <div class="pane-content"> <h2 class="center-on-mobiles"><strong>Free hosting</strong> with GitHub Pages</h2> <p>Sick of dealing with hosting companies? <a href="https://pages.github.com/">GitHub Pages</a> is <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free—<a href="https://help.github.com/articles/about-supported-custom-domains/">custom domain name</a> and all.</p> <a href="https://pages.github.com/">Learn more about GitHub Pages →</a> </div> </div> <div class="clear"></div> </div> </div> </div> </section> <footer> <div class="grid"> <div class="unit one-third center-on-mobiles"> <p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p> <p>The contents of this website are <br />© 2024 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p> </div> <div class="unit two-thirds align-right center-on-mobiles"> <p> Proudly hosted by <a href="https://github.com"> <img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding"> </a> </p> </div> <div class="unit two-thirds align-right center-on-mobiles"> <p> Jekyll is funded thanks to its <a href="https://github.com/jekyll/jekyll#sponsors"> sponsors! </a> </p> </div> </div> </footer> <script> /* Creates an anchor element with the given ID and link for the permalink*/ const anchorForId = (id) => { const anchor = document.createElement("a"); anchor.className = "header-link"; anchor.href = `#${id}`; anchor.innerHTML = `<span class="sr-only">Permalink</span><i class="fa fa-link" aria-hidden="true"></i>`; anchor.title = "Permalink"; return anchor; }; /* Finds all headers of the specified level within the given element, and adds a permalink to each header*/ const linkifyAnchors = (level, containingElement) => { const headers = Array.from(containingElement.getElementsByTagName(`h${level}`)); headers.forEach((header) => { if (header.id) { header.appendChild(anchorForId(header.id)); } }); }; /* Executes the function when the document is ready */ document.onreadystatechange = () => { if (document.readyState === "complete") { const contentBlock = document.getElementsByClassName("docs")[0] ?? document.getElementsByClassName("news")[0]; if (!contentBlock) { return; } for (let level = 1; level <= 6; level++) { linkifyAnchors(level, contentBlock); } } }; </script> <!-- Google Analytics (https://www.google.com/analytics) --> <script> !function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){ (j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k), L=e.getElementsByTagName(k)[0],l.src='https://www.google-analytics.com/analytics.js', L.parentNode.insertBefore(l,L)}(window,document,'script','ga'); ga('create', 'UA-50755011-1', 'jekyllrb.com'); ga('send', 'pageview'); </script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script> docsearch({ apiKey: '50fe39c839958dfad797000f33e2ec17', indexName: 'jekyllrb', inputSelector: '#docsearch-input', enhancedSearchInput: true, debug: false // Set debug to true if you want to inspect the dropdown }); </script> <script> const navigateToUrl = (select) => { const url = select.value; url && (window.location.href = url); }; </script> </body> </html>