mirror of
https://github.com/jekyll/jekyll.git
synced 2026-01-10 07:28:07 -05:00
242 lines
12 KiB
HTML
242 lines
12 KiB
HTML
<!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>Tutorials | Jekyll • Simple, blog-aware, static sites</title>
|
||
<meta name="generator" content="Jekyll v4.4.1" />
|
||
<meta property="og:title" content="Tutorials" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:" />
|
||
<meta property="og:description" content="In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:" />
|
||
<link rel="canonical" href="https://jekyllrb.com/tutorials/home/" />
|
||
<meta property="og:url" content="https://jekyllrb.com/tutorials/home/" />
|
||
<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="article" />
|
||
<meta property="article:published_time" content="2025-12-21T12:48:54-08:00" />
|
||
<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="Tutorials" />
|
||
<meta name="twitter:site" content="@jekyllrb" />
|
||
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-12-21T12:48:54-08:00","datePublished":"2025-12-21T12:48:54-08:00","description":"In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:","headline":"Tutorials","image":"https://jekyllrb.com/img/jekyll-og.png","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/home/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"url":"https://jekyllrb.com/tutorials/home/"}</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><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.4.1">v4.4.1</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><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="docs">
|
||
<div class="grid"><div class="docs-nav-mobile unit whole show-on-mobiles">
|
||
<select id="tutorial-nav" onchange="navigateToUrl(this)" aria-label="Select a tutorial">
|
||
<option value="">Navigate the tutorials…</option>
|
||
<optgroup label="Tutorials">
|
||
<option value="/tutorials/home/">Tutorials</option>
|
||
<option value="/tutorials/video-walkthroughs/">Video Walkthroughs</option>
|
||
<option value="/tutorials/navigation/">Navigation</option>
|
||
<option value="/tutorials/orderofinterpretation/">Order of interpretation</option>
|
||
<option value="/tutorials/custom-404-page/">Custom 404 Page</option>
|
||
<option value="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</option>
|
||
<option value="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</option>
|
||
<option value="/tutorials/csv-to-table/">Tabulate CSV Data</option>
|
||
</optgroup>
|
||
</select>
|
||
</div><div class="unit four-fifths">
|
||
<article>
|
||
<header class="tutorial-header">
|
||
<div class="improve right hide-on-mobiles">
|
||
<a data-proofer-ignore href="https://github.com/jekyll/jekyll/edit/master/docs/_tutorials/index.md">
|
||
<i class="fa fa-pencil"></i> Improve this page
|
||
</a>
|
||
</div>
|
||
|
||
<h1 class="tutorial-title">Tutorials</h1>
|
||
|
||
|
||
</header><p>In contrast to <a href="/docs/home/">Docs</a>, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:</p>
|
||
|
||
<ul>
|
||
<li>Step-by-step processes through particular scenarios or challenges</li>
|
||
<li>Full walk-throughs using sample data, showing inputs and results from the sample data</li>
|
||
<li>Detailed explanation about the pros and cons for different Jekyll strategies</li>
|
||
<li>End-to-end instruction in developing a complete feature on a Jekyll site</li>
|
||
<li>Instruction that combines various techniques from across the docs</li>
|
||
</ul>
|
||
|
||
<p>In short, tutorials aren’t the core reference information in docs. They walk users through processes from beginning to end.</p>
|
||
|
||
<p class="note info">The Tutorials section is new, so there aren’t many tutorials yet. You can add a tutorial here to help populate this section.</p>
|
||
|
||
<p>Some of these techniques might even guide you through a supporting tool, script, service, or other hack used with your Jekyll site. Feel free to include tutorials involving external services with Jekyll as well. However, note that Jekyll in no way endorses any third-party tools mentioned in tutorials.</p>
|
||
|
||
<h2 id="how-to-contribute-a-tutorial">How to contribute a tutorial</h2>
|
||
|
||
<p>We welcome your tutorial contributions. To add your tutorial:</p>
|
||
|
||
<ol>
|
||
<li>Fork the Jekyll project by clicking the <strong>Fork</strong> button in the upper-right corner of the <a href="https://github.com/jekyll/jekyll/">jekyll/jekyll project GitHub repo</a>.</li>
|
||
<li>Add your tutorial in the <code class="language-plaintext highlighter-rouge">_tutorials</code> collection.</li>
|
||
<li>Make sure your tutorial has the same front matter items as other tutorial items.</li>
|
||
<li>Add a reference to your tutorial filename in <code class="language-plaintext highlighter-rouge">_data/tutorials.yml</code>. This allows your tutorial to appear in the Tutorials sidebar.</li>
|
||
<li>Follow the regular git workflow to submit the pull request.</li>
|
||
</ol>
|
||
|
||
<p>When you submit your pull request, the Jekyll documentation team will review your contribution and either merge it or suggest edits.</p>
|
||
|
||
<div class="section-nav">
|
||
<div class="left align-right">
|
||
<span class="prev disabled">Back</span>
|
||
</div>
|
||
<div class="right align-left">
|
||
<a href="/tutorials/video-walkthroughs/" class="next">Next</a>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</article>
|
||
</div><div class="unit one-fifth hide-on-mobiles">
|
||
<aside>
|
||
<h4>Tutorials</h4>
|
||
<ul>
|
||
<li class="current"><a href="/tutorials/home/">Tutorials</a></li>
|
||
<li><a href="/tutorials/video-walkthroughs/">Video Walkthroughs</a></li>
|
||
<li><a href="/tutorials/navigation/">Navigation</a></li>
|
||
<li><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
||
<li><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
||
<li><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
||
<li><a href="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></li>
|
||
<li><a href="/tutorials/csv-to-table/">Tabulate CSV Data</a></li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</section>
|
||
<footer>
|
||
<div class="grid">
|
||
<div class="unit two-thirds 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 />© 2025 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
||
</div>
|
||
<div class="unit one-third 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>
|
||
<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>
|