This guide explains the layout system and how to customize page templates.
Layouts inherit from each other:
default.html
│
├── single.html
│ ├── home.html
│ ├── posts.html
│ ├── categories.html
│ └── tags.html
│
├── splash.html
├── collection.html
└── (other layouts)
| Layout | Purpose | Used For |
|---|---|---|
default |
Base HTML template | Inherited by all |
single |
Standard page/post | Posts and pages |
home |
Homepage with posts | index.html |
posts |
Post archive | Year archive |
categories |
Category listing | Category pages |
tags |
Tag listing | Tag pages |
splash |
Hero landing page | Special pages |
collection |
Collection pages | Custom collections |
---
layout: single
title: "My Page"
---
Defaults are set in _config.yml:
defaults:
- scope:
type: posts
values:
layout: single
- scope:
path: "_pages"
values:
layout: single
The base HTML template providing the document shell:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Henk van der Schuur</title>
<meta name="description" content="Henk van der Schuur —">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Henk van der Schuur">
<meta property="og:title" content="Layouts Guide">
<meta property="og:url" content="http://hwschuur.nl/docs/customization/layouts/">
<meta property="og:description" content="Henk van der Schuur —">
<meta property="og:image" content="https://hwschuur.github.io/assets/images/blue-h.png?w=130" />
<meta property="og:image:width" content="130" />
<meta property="og:image:height" content="130" />
<meta property="og:image:alt" content="hwschuur.nl" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#f2f2f2" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="canonical" href="http://hwschuur.nl/docs/customization/layouts/">
<link rel="stylesheet" href="/assets/css/main.css">
<link href="https://github.com/hwschuur" rel="me">
<link href="https://mastodon.social/@hwschuur" rel="me">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg"><link rel="shortcut icon" href="/assets/favicon/favicon.ico"><link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/favicon.svg" color="#0073ff">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": null,
"url": "http://hwschuur.nl/"
}
</script>
<script src="https://kit.fontawesome.com/dac1d6028f.js" crossorigin="anonymous"></script>
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';</script>
</head>
<body class="layout--default">
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
<a class="site-title" href="/">
Henk van der Schuur</a>
<ul class="visible-links"><li class="masthead__menu-item">
<a href="/">Home</a>
</li><li class="masthead__menu-item">
<a href="/work/">Work</a>
</li><li class="masthead__menu-item">
<a href="/contact/">Contact</a>
</li></ul>
<button class="greedy-nav__toggle hidden" type="button">
<span class="visually-hidden">Toggle menu</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
</nav>
</div>
</div>
</div>
<div class="initial-content">
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
</div>
<footer>
<div class="page__footer-follow">
<ul class="social-icons"></ul></div>
<div class="page__footer-copyright">© 2021–2026 Henk van der Schuur</div>
</footer>
<script src="/assets/js/main.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M8FJLTPT2Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M8FJLTPT2Q', { 'anonymize_ip': true});
</script>
<script src="/assets/js/dark-mode.js"></script>
</body>
</html>
Provides:
The standard layout for posts and pages:
---
layout: default
---
<div id="main" role="main">
<article class="page">
<header>
<h1>Layouts Guide</h1>
</header>
<section class="page__content">
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
</section>
<footer class="page__meta">
</footer>
</article>
</div>
Features:
Homepage with paginated post listing:
---
layout: single
---
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
Features:
Full-width landing page:
---
layout: default
---
<div class="page__hero"
style=" background-image: url('');"
>
<img src="" alt="Layouts Guide" class="page__hero-image">
</div>
<div id="main" role="main">
<article class="splash">
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
</article>
</div>
Features:
To customize a theme layout:
_layouts/ directoryThe local _layouts/single.html includes customizations:
---
layout: default
---
<!-- Customized single layout -->
<div id="main" role="main">
<article class="page h-entry" itemscope itemtype="https://schema.org/CreativeWork">
<!-- Custom modifications here -->
<div class="page__inner-wrap">
<header>
<h1 class="page__title">
<a href="http://hwschuur.nl/docs/customization/layouts/">Layouts Guide</a>
</h1>
</header>
<section class="page__content">
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
</section>
</div>
</article>
</div>
Add a hero image to any page:
---
layout: single
header:
image: /assets/images/header.jpg
image_description: "Description"
caption: "Photo credit"
---
Or an overlay:
---
header:
overlay_image: /assets/images/header.jpg
overlay_color: "#333"
overlay_filter: 0.5
actions:
- label: "Button Text"
url: "/link/"
---
Enable author profile sidebar:
---
author_profile: true
---
Custom sidebar content:
---
sidebar:
- title: "Title"
text: "Some text"
- title: "Another Title"
text: "More text"
---
Enable TOC for long content:
---
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---
touch _layouts/custom-layout.html
---
layout: default
---
<div class="custom-layout">
<header class="custom-header">
<h1>Layouts Guide</h1>
</header>
<main class="custom-content">
<h1 id="writing-posts">Writing Posts</h1>
<p>This guide covers everything you need to know about creating blog posts for the site.</p>
<h2 id="post-basics">Post Basics</h2>
<h3 id="file-location">File Location</h3>
<p>All posts go in the <code class="language-plaintext highlighter-rouge">_posts/</code> directory:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
</code></pre></div></div>
<h3 id="file-naming-convention">File Naming Convention</h3>
<p>Posts must follow this naming pattern:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>YYYY-MM-DD-slug.md
</code></pre></div></div>
<table>
<thead>
<tr>
<th>Component</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">YYYY</code></td>
<td>Four-digit year</td>
<td>2025</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">MM</code></td>
<td>Two-digit month</td>
<td>06</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">DD</code></td>
<td>Two-digit day</td>
<td>16</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">slug</code></td>
<td>URL-friendly title</td>
<td>illusionofthinking</td>
</tr>
</tbody>
</table>
<p><strong>Important</strong>: The date in the filename determines:</p>
<ul>
<li>The post’s publication date</li>
<li>The URL path (e.g., <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code>)</li>
<li>Sort order in listings</li>
</ul>
<h2 id="front-matter">Front Matter</h2>
<p>Every post begins with YAML front matter between triple dashes:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">research</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="required-fields">Required Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>Post title</td>
<td><code class="language-plaintext highlighter-rouge">"My Post Title"</code></td>
</tr>
</tbody>
</table>
<h3 id="optional-fields">Optional Fields</h3>
<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">tags</code></td>
<td>List of tags</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">link</code></td>
<td>External URL (for link posts)</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">excerpt</code></td>
<td>Custom excerpt</td>
<td>Auto-generated</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">header</code></td>
<td>Header image settings</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc</code></td>
<td>Show table of contents</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">toc_sticky</code></td>
<td>Sticky TOC sidebar</td>
<td>false</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">last_modified_at</code></td>
<td>Last update date</td>
<td>none</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">published</code></td>
<td>Publish status</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2 id="post-types">Post Types</h2>
<h3 id="standard-post">Standard Post</h3>
<p>A regular blog post with original content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Understanding</span><span class="nv"> </span><span class="s">Machine</span><span class="nv"> </span><span class="s">Learning"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="nn">---</span>
Your original content here. This is a standard blog post
with your own thoughts and analysis.
<span class="gu">## Section Heading</span>
More content...
</code></pre></div></div>
<h3 id="link-post">Link Post</h3>
<p>A post that references external content:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">The</span><span class="nv"> </span><span class="s">Illusion</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">Thinking"</span>
<span class="na">link</span><span class="pi">:</span> <span class="s">https://machinelearning.apple.com/research/illusion-of-thinking</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="nn">---</span>
Brief commentary about the linked article. The title will
link to the external URL.
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">link</code> field:</p>
<ul>
<li>Makes the post title link to the external URL</li>
<li>Adds a “Direct Link” button</li>
<li>Useful for curating/commenting on external content</li>
</ul>
<h2 id="markdown-syntax">Markdown Syntax</h2>
<h3 id="basic-formatting">Basic Formatting</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gs">**bold text**</span>
<span class="ge">*italic text*</span>
~~strikethrough~~
<span class="sb">`inline code`</span>
</code></pre></div></div>
<h3 id="headings">Headings</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Heading 1 (rarely used in posts)</span>
<span class="gu">## Heading 2</span>
<span class="gu">### Heading 3</span>
<span class="gu">#### Heading 4</span>
</code></pre></div></div>
<h3 id="links">Links</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Link text</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Link with title</span><span class="p">](</span><span class="sx">https://example.com</span> <span class="nn">"Title text"</span><span class="p">)</span>
<span class="c"><!-- Reference-style links --></span>
<span class="p">[</span><span class="nv">link text</span><span class="p">][</span><span class="ss">ref</span><span class="p">]</span>
<span class="p">[</span><span class="ss">ref</span><span class="p">]:</span> <span class="sx">https://example.com</span>
</code></pre></div></div>
<h3 id="lists">Lists</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Unordered --></span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p"> -</span> Nested item
<span class="c"><!-- Ordered --></span>
<span class="p">1.</span> First item
<span class="p">2.</span> Second item
<span class="p">3.</span> Third item
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">> This is a blockquote.</span>
<span class="gt">> It can span multiple lines.</span>
<span class="c"><!-- With citation --></span>
<span class="gt">> Quote text here.</span>
<span class="nt"><cite><a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">></span>Source Name<span class="nt"></a></cite></span>
</code></pre></div></div>
<h3 id="code-blocks">Code Blocks</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">```</span><span class="nl">python
</span><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
<span class="p">```</span>
<span class="p">```</span><span class="nl">javascript
</span><span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hello</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span>
<span class="p">```</span>
</code></pre></div></div>
<h3 id="images">Images</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"></span>
<span class="c"><!-- With caption using include --></span>
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<img src="/assets/images/my-image.png"
alt="Description"><span class="nt"><figcaption></span>
Figure caption<span class="sb">
</figcaption></figure>
</span></code></pre></div></div>
<h3 id="tables">Tables</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
</code></pre></div></div>
<h2 id="tags">Tags</h2>
<p>Tags help categorize posts and enable filtering:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">apple</span>
<span class="pi">-</span> <span class="s">link</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="existing-tags-in-use">Existing Tags in Use</h3>
<p>Based on current posts:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ai</code> - Artificial intelligence topics</li>
<li><code class="language-plaintext highlighter-rouge">apple</code> - Apple-related content</li>
<li><code class="language-plaintext highlighter-rouge">link</code> - Link posts (external URLs)</li>
<li><code class="language-plaintext highlighter-rouge">website</code> - Site-related updates</li>
<li><code class="language-plaintext highlighter-rouge">devops</code> - DevOps topics</li>
<li><code class="language-plaintext highlighter-rouge">talk</code> - Presentations/talks</li>
</ul>
<h3 id="tag-best-practices">Tag Best Practices</h3>
<ul>
<li>Use lowercase</li>
<li>Use hyphens for multi-word tags: <code class="language-plaintext highlighter-rouge">machine-learning</code></li>
<li>Be consistent with existing tags</li>
<li>Limit to 3-5 tags per post</li>
</ul>
<h2 id="post-url-structure">Post URL Structure</h2>
<p>URLs are generated from the filename and config:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/:categories/:year/:month/:day/:title/</span>
</code></pre></div></div>
<p>Example:</p>
<ul>
<li>Filename: <code class="language-plaintext highlighter-rouge">2025-06-16-illusionofthinking.md</code></li>
<li>URL: <code class="language-plaintext highlighter-rouge">/2025/06/16/illusionofthinking/</code></li>
</ul>
<h2 id="excerpts">Excerpts</h2>
<p>The excerpt is the preview text shown in listings.</p>
<h3 id="automatic-excerpt">Automatic Excerpt</h3>
<p>By default, Jekyll uses the first paragraph as the excerpt.</p>
<h3 id="custom-excerpt">Custom Excerpt</h3>
<p>Specify a custom excerpt in front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">custom</span><span class="nv"> </span><span class="s">summary</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">post</span><span class="nv"> </span><span class="s">that</span><span class="nv"> </span><span class="s">appears</span><span class="nv"> </span><span class="s">in</span><span class="nv"> </span><span class="s">listings."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="excerpt-separator">Excerpt Separator</h3>
<p>Or use a separator in the content:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">excerpt_separator</span><span class="pi">:</span> <span class="s"><!--more--></span>
<span class="nn">---</span>
<span class="s">This text appears in the excerpt.</span>
<span class="s"><!--more--></span>
<span class="s">This text only appears in the full post.</span>
</code></pre></div></div>
<h2 id="drafts">Drafts</h2>
<p>Drafts are posts not yet ready for publication.</p>
<h3 id="create-a-draft">Create a Draft</h3>
<p>Put drafts in <code class="language-plaintext highlighter-rouge">_drafts/</code> without a date prefix:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>_drafts/
└── my-upcoming-post.md
</code></pre></div></div>
<h3 id="preview-drafts">Preview Drafts</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Drafts will appear with the current date.</p>
<h3 id="publish-a-draft">Publish a Draft</h3>
<p>Move to <code class="language-plaintext highlighter-rouge">_posts/</code> and add the date prefix:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
</code></pre></div></div>
<h2 id="unpublishing-posts">Unpublishing Posts</h2>
<h3 id="hide-a-post">Hide a Post</h3>
<p>Set <code class="language-plaintext highlighter-rouge">published: false</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Hidden</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">published</span><span class="pi">:</span> <span class="no">false</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="archive-a-post">Archive a Post</h3>
<p>Move to the <code class="language-plaintext highlighter-rouge">_posts/archive/</code> directory (excluded from build):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mv </span>_posts/2025-01-01-old-post.md _posts/archive/
</code></pre></div></div>
<h2 id="internal-links">Internal Links</h2>
<h3 id="link-to-another-post">Link to Another Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Related post</span><span class="p">](</span><span class="sx">/2025/06/16/illusionofthinking/</span><span class="p">)</span>
</code></pre></div></div>
<p>Use the filename without extension.</p>
<h3 id="link-to-a-page">Link to a Page</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nv">Contact page</span><span class="p">](</span><span class="sx">/contact/</span><span class="p">)</span>
<span class="p">[</span><span class="nv">Work page</span><span class="p">](</span><span class="sx">/work/</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="advanced-features">Advanced Features</h2>
<h3 id="table-of-contents">Table of Contents</h3>
<p>Enable TOC for long posts:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Long</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Contents"</span>
<span class="na">toc_icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">file-alt"</span>
<span class="na">toc_sticky</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="header-images">Header Images</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Post</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Header"</span>
<span class="na">header</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/header.jpg</span>
<span class="na">image_description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Description"</span>
<span class="na">caption</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Photo</span><span class="nv"> </span><span class="s">credit:</span><span class="nv"> </span><span class="s">[Source](https://example.com)"</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="last-modified-date">Last Modified Date</h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Updated</span><span class="nv"> </span><span class="s">Post"</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-06-20T12:00:00-00:00</span>
<span class="nn">---</span>
</code></pre></div></div>
<h2 id="example-posts">Example Posts</h2>
<h3 id="minimal-post">Minimal Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Quick</span><span class="nv"> </span><span class="s">Update"</span>
<span class="nn">---</span>
A brief update about something interesting.
</code></pre></div></div>
<h3 id="full-featured-post">Full-Featured Post</h3>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Comprehensive</span><span class="nv"> </span><span class="s">Analysis</span><span class="nv"> </span><span class="s">of</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">Trends"</span>
<span class="na">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">ai</span>
<span class="pi">-</span> <span class="s">technology</span>
<span class="pi">-</span> <span class="s">analysis</span>
<span class="na">excerpt</span><span class="pi">:</span> <span class="s2">"</span><span class="s">A</span><span class="nv"> </span><span class="s">deep</span><span class="nv"> </span><span class="s">dive</span><span class="nv"> </span><span class="s">into</span><span class="nv"> </span><span class="s">current</span><span class="nv"> </span><span class="s">AI</span><span class="nv"> </span><span class="s">developments</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">implications."</span>
<span class="na">toc</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">last_modified_at</span><span class="pi">:</span> <span class="s">2025-01-31</span>
<span class="nn">---</span>
Introduction paragraph setting the context.
<span class="gu">## Background</span>
Historical context and background information.
<span class="gu">## Current State</span>
Analysis of the current situation.
<span class="gu">### Technical Details</span>
Specific technical information.
<span class="gu">### Business Impact</span>
Discussion of business implications.
<span class="gu">## Future Outlook</span>
Predictions and expectations.
<span class="gu">## Conclusion</span>
Summary and final thoughts.
<span class="gu">## References</span>
<span class="p">
-</span> <span class="p">[</span><span class="nv">Reference 1</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Reference 2</span><span class="p">](</span><span class="sx">https://example.com</span><span class="p">)</span>
</code></pre></div></div>
<hr />
<table>
<tbody>
<tr>
<td>See also: <a href="/docs/content/managing-pages/">Managing Pages</a></td>
<td><a href="/docs/content/media-assets/">Media Assets</a></td>
<td><a href="/docs/reference/front-matter/">Front Matter Reference</a></td>
</tr>
</tbody>
</table>
</main>
</div>
In _sass/minimal-mistakes/_page.scss:
.custom-layout {
max-width: 800px;
margin: 0 auto;
.custom-header {
text-align: center;
margin-bottom: 2em;
}
.custom-content {
line-height: 1.8;
}
}
---
layout: custom-layout
title: "My Custom Page"
show_footer: true
---
Content here.
Layouts Guide <!-- Page title -->
# Layouts Guide
This guide explains the layout system and how to customize page templates.
## Layout Hierarchy
Layouts inherit from each other:
default.html │ ├── single.html │ ├── home.html │ ├── posts.html │ ├── categories.html │ └── tags.html │ ├── splash.html ├── collection.html └── (other layouts)
## Available Layouts
| Layout | Purpose | Used For |
|--------|---------|----------|
| `default` | Base HTML template | Inherited by all |
| `single` | Standard page/post | Posts and pages |
| `home` | Homepage with posts | index.html |
| `posts` | Post archive | Year archive |
| `categories` | Category listing | Category pages |
| `tags` | Tag listing | Tag pages |
| `splash` | Hero landing page | Special pages |
| `collection` | Collection pages | Custom collections |
## Using Layouts
### In Front Matter
```yaml
---
layout: single
title: "My Page"
---
Defaults are set in _config.yml:
defaults:
- scope:
type: posts
values:
layout: single
- scope:
path: "_pages"
values:
layout: single
The base HTML template providing the document shell:
<!doctype html>
<html lang="{{ site.locale | slice: 0,2 }}">
<head>
{% include head.html %}
</head>
<body class="layout--{{ page.layout }}">
{% include masthead.html %}
<div class="initial-content">
{{ content }}
</div>
<footer>
{% include footer.html %}
</footer>
{% include scripts.html %}
</body>
</html>
Provides:
The standard layout for posts and pages:
---
layout: default
---
{% if page.header.overlay_image %}
{% include page__hero.html %}
{% endif %}
<div id="main" role="main">
{% include sidebar.html %}
<article class="page">
<header>
<h1>{{ page.title }}</h1>
{% include page__meta.html %}
</header>
<section class="page__content">
{{ content }}
</section>
<footer class="page__meta">
</footer>
</article>
{% if page.related %}
<!-- Related posts -->
{% endif %}
</div>
Features:
Homepage with paginated post listing:
---
layout: single
---
{{ content }}
{% for post in paginator.posts %}
{% include archive-single.html %}
{% endfor %}
{% include paginator.html %}
Features:
Full-width landing page:
---
layout: default
---
{% include page__hero.html %}
<div id="main" role="main">
<article class="splash">
{{ content }}
</article>
</div>
Features:
To customize a theme layout:
_layouts/ directoryThe local _layouts/single.html includes customizations:
---
layout: default
---
<!-- Customized single layout -->
{% if page.header.overlay_color or page.header.overlay_image %}
{% include page__hero.html %}
{% endif %}
<div id="main" role="main">
{% include sidebar.html %}
<article class="page h-entry" itemscope itemtype="https://schema.org/CreativeWork">
<!-- Custom modifications here -->
<div class="page__inner-wrap">
<header>
{% if page.title %}
<h1 class="page__title">
<a href="{{ page.url | absolute_url }}">{{ page.title }}</a>
</h1>
{% endif %}
{% include page__meta.html %}
</header>
<section class="page__content">
{{ content }}
</section>
</div>
</article>
</div>
Add a hero image to any page:
---
layout: single
header:
image: /assets/images/header.jpg
image_description: "Description"
caption: "Photo credit"
---
Or an overlay:
---
header:
overlay_image: /assets/images/header.jpg
overlay_color: "#333"
overlay_filter: 0.5
actions:
- label: "Button Text"
url: "/link/"
---
Enable author profile sidebar:
---
author_profile: true
---
Custom sidebar content:
---
sidebar:
- title: "Title"
text: "Some text"
- title: "Another Title"
text: "More text"
---
Enable TOC for long content:
---
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---
touch _layouts/custom-layout.html
---
layout: default
---
<div class="custom-layout">
<header class="custom-header">
<h1>{{ page.title }}</h1>
</header>
<main class="custom-content">
{{ content }}
</main>
{% if page.show_footer %}
<footer class="custom-footer">
Custom footer content
</footer>
{% endif %}
</div>
In _sass/minimal-mistakes/_page.scss:
.custom-layout {
max-width: 800px;
margin: 0 auto;
.custom-header {
text-align: center;
margin-bottom: 2em;
}
.custom-content {
line-height: 1.8;
}
}
---
layout: custom-layout
title: "My Custom Page"
show_footer: true
---
Content here.
{{ page.title }} <!-- Page title -->
{{ page.content }} <!-- Page content -->
{{ site.title }} <!-- Site title -->
{{ content }} <!-- Rendered content -->
{% if page.header.image %}
<img src="{{ page.header.image }}">
{% endif %}
{% unless page.hide_title %}
<h1>{{ page.title }}</h1>
{% endunless %}
{% for post in site.posts limit:5 %}
<li>{{ post.title }}</li>
{% endfor %}
{% include masthead.html %}
{% include_cached footer.html %}
| Include | Purpose |
|---|---|
head.html |
Head section |
masthead.html |
Navigation |
sidebar.html |
Sidebar wrapper |
page__hero.html |
Hero section |
page__meta.html |
Post metadata |
footer.html |
Footer |
scripts.html |
JavaScript |
paginator.html |
Pagination |
archive-single.html |
Post excerpt |
comments.html |
Comments |
Add to any layout:
<!-- Layout: {{ page.layout }} -->
<pre>{{ page | jsonify }}</pre>
ls _includes/
See also: Theme Configuration | Styling | Directory Structure Henk van der Schuur
This guide covers everything you need to know about creating blog posts for the site.
All posts go in the _posts/ directory:
_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md
Posts must follow this naming pattern:
YYYY-MM-DD-slug.md
| Component | Description | Example |
|---|---|---|
YYYY |
Four-digit year | 2025 |
MM |
Two-digit month | 06 |
DD |
Two-digit day | 16 |
slug |
URL-friendly title | illusionofthinking |
Important: The date in the filename determines:
/2025/06/16/illusionofthinking/)Every post begins with YAML front matter between triple dashes:
---
title: "The Illusion of Thinking"
tags:
- ai
- research
---
| Field | Description | Example |
|---|---|---|
title |
Post title | "My Post Title" |
| Field | Description | Default |
|---|---|---|
tags |
List of tags | none |
link |
External URL (for link posts) | none |
excerpt |
Custom excerpt | Auto-generated |
header |
Header image settings | none |
toc |
Show table of contents | false |
toc_sticky |
Sticky TOC sidebar | false |
last_modified_at |
Last update date | none |
published |
Publish status | true |
A regular blog post with original content:
---
title: "Understanding Machine Learning"
tags:
- ai
- technology
---
Your original content here. This is a standard blog post
with your own thoughts and analysis.
## Section Heading
More content...
A post that references external content:
---
title: "The Illusion of Thinking"
link: https://machinelearning.apple.com/research/illusion-of-thinking
tags:
- link
- ai
- apple
---
Brief commentary about the linked article. The title will
link to the external URL.
The link field:
**bold text**
*italic text*
~~strikethrough~~
`inline code`
# Heading 1 (rarely used in posts)
## Heading 2
### Heading 3
#### Heading 4
[Link text](https://example.com)
[Link with title](https://example.com "Title text")
<!-- Reference-style links -->
[link text][ref]
[ref]: https://example.com
<!-- Unordered -->
- Item one
- Item two
- Nested item
<!-- Ordered -->
1. First item
2. Second item
3. Third item
> This is a blockquote.
> It can span multiple lines.
<!-- With citation -->
> Quote text here.
<cite><a href="https://source.com">Source Name</a></cite>
```python
def hello():
print("Hello, world!")
```
```javascript
const greeting = "Hello";
console.log(greeting);
```

<!-- With caption using include -->
<figure class="">
<img src="/assets/images/my-image.png"
alt="Description"><figcaption>
Figure caption
</figcaption></figure>
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Tags help categorize posts and enable filtering:
---
title: "Post Title"
tags:
- ai
- apple
- link
---
Based on current posts:
ai - Artificial intelligence topicsapple - Apple-related contentlink - Link posts (external URLs)website - Site-related updatesdevops - DevOps topicstalk - Presentations/talksmachine-learningURLs are generated from the filename and config:
# _config.yml
permalink: /:categories/:year/:month/:day/:title/
Example:
2025-06-16-illusionofthinking.md/2025/06/16/illusionofthinking/The excerpt is the preview text shown in listings.
By default, Jekyll uses the first paragraph as the excerpt.
Specify a custom excerpt in front matter:
---
title: "Post Title"
excerpt: "A custom summary of this post that appears in listings."
---
Or use a separator in the content:
---
excerpt_separator: <!--more-->
---
This text appears in the excerpt.
<!--more-->
This text only appears in the full post.
Drafts are posts not yet ready for publication.
Put drafts in _drafts/ without a date prefix:
_drafts/
└── my-upcoming-post.md
bundle exec jekyll serve --drafts
Drafts will appear with the current date.
Move to _posts/ and add the date prefix:
mv _drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md
Set published: false:
---
title: "Hidden Post"
published: false
---
Move to the _posts/archive/ directory (excluded from build):
mv _posts/2025-01-01-old-post.md _posts/archive/
[Related post](/2025/06/16/illusionofthinking/)
Use the filename without extension.
[Contact page](/contact/)
[Work page](/work/)
Enable TOC for long posts:
---
title: "Long Post"
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---
---
title: "Post with Header"
header:
image: /assets/images/header.jpg
image_description: "Description"
caption: "Photo credit: [Source](https://example.com)"
---
---
title: "Updated Post"
last_modified_at: 2025-06-20T12:00:00-00:00
---
---
title: "Quick Update"
---
A brief update about something interesting.
---
title: "Comprehensive Analysis of AI Trends"
tags:
- ai
- technology
- analysis
excerpt: "A deep dive into current AI developments and their implications."
toc: true
last_modified_at: 2025-01-31
---
Introduction paragraph setting the context.
## Background
Historical context and background information.
## Current State
Analysis of the current situation.
### Technical Details
Specific technical information.
### Business Impact
Discussion of business implications.
## Future Outlook
Predictions and expectations.
## Conclusion
Summary and final thoughts.
## References
- [Reference 1](https://example.com)
- [Reference 2](https://example.com)
| See also: Managing Pages | Media Assets | Front Matter Reference |
<!-- Rendered content --> ```
<h1>Layouts Guide</h1>
<li>AI Taxonomy: An Operational Framework for Precision in AI Discourse</li>
<li>Building an AI Empire, or: AI bubble dynamics</li>
<li>Sovereignty Over Ceremony: How True Teams Thrive without a Scrum Master</li>
<li>The Illusion of Thinking</li>
<li>io</li>
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
<a class="site-title" href="/">
Henk van der Schuur</a>
<ul class="visible-links"><li class="masthead__menu-item">
<a href="/">Home</a>
</li><li class="masthead__menu-item">
<a href="/work/">Work</a>
</li><li class="masthead__menu-item">
<a href="/contact/">Contact</a>
</li></ul>
<button class="greedy-nav__toggle hidden" type="button">
<span class="visually-hidden">Toggle menu</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
</nav>
</div>
</div>
</div>
<div class="page__footer-follow">
<ul class="social-icons"></ul></div>
<div class="page__footer-copyright">© 2021–2026 Henk van der Schuur</div>
| Include | Purpose |
|---|---|
head.html |
Head section |
masthead.html |
Navigation |
sidebar.html |
Sidebar wrapper |
page__hero.html |
Hero section |
page__meta.html |
Post metadata |
footer.html |
Footer |
scripts.html |
JavaScript |
paginator.html |
Pagination |
archive-single.html |
Post excerpt |
comments.html |
Comments |
Add to any layout:
<!-- Layout: default -->
<pre>{"layout":"default","title":"Layouts Guide","content":"# Layouts Guide\n\nThis guide explains the layout system and how to customize page templates.\n\n## Layout Hierarchy\n\nLayouts inherit from each other:\n\n```\ndefault.html\n │\n ├── single.html\n │ ├── home.html\n │ ├── posts.html\n │ ├── categories.html\n │ └── tags.html\n │\n ├── splash.html\n ├── collection.html\n └── (other layouts)\n```\n\n## Available Layouts\n\n| Layout | Purpose | Used For |\n|--------|---------|----------|\n| `default` | Base HTML template | Inherited by all |\n| `single` | Standard page/post | Posts and pages |\n| `home` | Homepage with posts | index.html |\n| `posts` | Post archive | Year archive |\n| `categories` | Category listing | Category pages |\n| `tags` | Tag listing | Tag pages |\n| `splash` | Hero landing page | Special pages |\n| `collection` | Collection pages | Custom collections |\n\n## Using Layouts\n\n### In Front Matter\n\n```yaml\n---\nlayout: single\ntitle: \"My Page\"\n---\n```\n\n### Default Layouts\n\nDefaults are set in `_config.yml`:\n\n```yaml\ndefaults:\n - scope:\n type: posts\n values:\n layout: single\n - scope:\n path: \"_pages\"\n values:\n layout: single\n```\n\n## Layout Details\n\n### default.html\n\nThe base HTML template providing the document shell:\n\n```html\n<!doctype html>\n<html lang=\"{{ site.locale | slice: 0,2 }}\">\n <head>\n {% include head.html %}\n </head>\n <body class=\"layout--{{ page.layout }}\">\n {% include masthead.html %}\n <div class=\"initial-content\">\n {{ content }}\n </div>\n <footer>\n {% include footer.html %}\n </footer>\n {% include scripts.html %}\n </body>\n</html>\n```\n\n**Provides**:\n- HTML document structure\n- Head section (meta, CSS)\n- Masthead (navigation)\n- Content area\n- Footer\n- Scripts\n\n### single.html\n\nThe standard layout for posts and pages:\n\n```html\n---\nlayout: default\n---\n{% if page.header.overlay_image %}\n {% include page__hero.html %}\n{% endif %}\n\n<div id=\"main\" role=\"main\">\n {% include sidebar.html %}\n <article class=\"page\">\n <header>\n <h1>{{ page.title }}</h1>\n {% include page__meta.html %}\n </header>\n <section class=\"page__content\">\n {{ content }}\n </section>\n <footer class=\"page__meta\">\n </footer>\n </article>\n\n {% if page.related %}\n <!-- Related posts -->\n {% endif %}\n</div>\n```\n\n**Features**:\n- Hero image support\n- Sidebar\n- Article wrapper\n- Page meta\n- Related posts\n\n### home.html\n\nHomepage with paginated post listing:\n\n```html\n---\nlayout: single\n---\n{{ content }}\n\n{% for post in paginator.posts %}\n {% include archive-single.html %}\n{% endfor %}\n\n{% include paginator.html %}\n```\n\n**Features**:\n- Inherits from single\n- Post iteration\n- Pagination\n\n### splash.html\n\nFull-width landing page:\n\n```html\n---\nlayout: default\n---\n{% include page__hero.html %}\n\n<div id=\"main\" role=\"main\">\n <article class=\"splash\">\n {{ content }}\n </article>\n</div>\n```\n\n**Features**:\n- Full-width hero\n- No sidebar\n- Large text\n\n## Customizing Layouts\n\n### Overriding a Layout\n\nTo customize a theme layout:\n\n1. Find the original in the [Minimal Mistakes repo](https://github.com/mmistakes/minimal-mistakes/tree/master/_layouts)\n2. Copy to your `_layouts/` directory\n3. Modify as needed\n\n### Example: Customizing single.html\n\nThe local `_layouts/single.html` includes customizations:\n\n```html\n---\nlayout: default\n---\n<!-- Customized single layout -->\n{% if page.header.overlay_color or page.header.overlay_image %}\n {% include page__hero.html %}\n{% endif %}\n\n<div id=\"main\" role=\"main\">\n {% include sidebar.html %}\n <article class=\"page h-entry\" itemscope itemtype=\"https://schema.org/CreativeWork\">\n <!-- Custom modifications here -->\n <div class=\"page__inner-wrap\">\n <header>\n {% if page.title %}\n <h1 class=\"page__title\">\n <a href=\"{{ page.url | absolute_url }}\">{{ page.title }}</a>\n </h1>\n {% endif %}\n {% include page__meta.html %}\n </header>\n <section class=\"page__content\">\n {{ content }}\n </section>\n </div>\n </article>\n</div>\n```\n\n## Layout Components\n\n### Hero Section\n\nAdd a hero image to any page:\n\n```yaml\n---\nlayout: single\nheader:\n image: /assets/images/header.jpg\n image_description: \"Description\"\n caption: \"Photo credit\"\n---\n```\n\nOr an overlay:\n\n```yaml\n---\nheader:\n overlay_image: /assets/images/header.jpg\n overlay_color: \"#333\"\n overlay_filter: 0.5\n actions:\n - label: \"Button Text\"\n url: \"/link/\"\n---\n```\n\n### Sidebar\n\nEnable author profile sidebar:\n\n```yaml\n---\nauthor_profile: true\n---\n```\n\nCustom sidebar content:\n\n```yaml\n---\nsidebar:\n - title: \"Title\"\n text: \"Some text\"\n - title: \"Another Title\"\n text: \"More text\"\n---\n```\n\n### Table of Contents\n\nEnable TOC for long content:\n\n```yaml\n---\ntoc: true\ntoc_label: \"Contents\"\ntoc_icon: \"file-alt\"\ntoc_sticky: true\n---\n```\n\n## Creating Custom Layouts\n\n### Step 1: Create the File\n\n```bash\ntouch _layouts/custom-layout.html\n```\n\n### Step 2: Add Layout Code\n\n```html\n---\nlayout: default\n---\n<div class=\"custom-layout\">\n <header class=\"custom-header\">\n <h1>{{ page.title }}</h1>\n </header>\n\n <main class=\"custom-content\">\n {{ content }}\n </main>\n\n {% if page.show_footer %}\n <footer class=\"custom-footer\">\n Custom footer content\n </footer>\n {% endif %}\n</div>\n```\n\n### Step 3: Add Styles\n\nIn `_sass/minimal-mistakes/_page.scss`:\n\n```scss\n.custom-layout {\n max-width: 800px;\n margin: 0 auto;\n\n .custom-header {\n text-align: center;\n margin-bottom: 2em;\n }\n\n .custom-content {\n line-height: 1.8;\n }\n}\n```\n\n### Step 4: Use the Layout\n\n```yaml\n---\nlayout: custom-layout\ntitle: \"My Custom Page\"\nshow_footer: true\n---\n\nContent here.\n```\n\n## Liquid Templating\n\n### Variables\n\n```liquid\n{{ page.title }} <!-- Page title -->\n{{ page.content }} <!-- Page content -->\n{{ site.title }} <!-- Site title -->\n{{ content }} <!-- Rendered content -->\n```\n\n### Conditionals\n\n```liquid\n{% if page.header.image %}\n <img src=\"{{ page.header.image }}\">\n{% endif %}\n\n{% unless page.hide_title %}\n <h1>{{ page.title }}</h1>\n{% endunless %}\n```\n\n### Loops\n\n```liquid\n{% for post in site.posts limit:5 %}\n <li>{{ post.title }}</li>\n{% endfor %}\n```\n\n### Includes\n\n```liquid\n{% include masthead.html %}\n{% include_cached footer.html %}\n```\n\n## Includes Used in Layouts\n\n| Include | Purpose |\n|---------|---------|\n| `head.html` | Head section |\n| `masthead.html` | Navigation |\n| `sidebar.html` | Sidebar wrapper |\n| `page__hero.html` | Hero section |\n| `page__meta.html` | Post metadata |\n| `footer.html` | Footer |\n| `scripts.html` | JavaScript |\n| `paginator.html` | Pagination |\n| `archive-single.html` | Post excerpt |\n| `comments.html` | Comments |\n\n## Debugging Layouts\n\n### Check Which Layout is Used\n\nAdd to any layout:\n\n```html\n<!-- Layout: {{ page.layout }} -->\n```\n\n### View Content Structure\n\n```liquid\n<pre>{{ page | jsonify }}</pre>\n```\n\n### List Available Includes\n\n```bash\nls _includes/\n```\n\n---\n\nSee also: [Theme Configuration](/docs/customization/theme-configuration/) | [Styling](/docs/customization/styling/) | [Directory Structure](/docs/architecture/directory-structure/)\n","dir":"/docs/customization/layouts/","name":"layouts.md","path":"docs/customization/layouts.md","url":"/docs/customization/layouts/"}</pre>
ls _includes/
| See also: Theme Configuration | Styling | Directory Structure |