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

---
layout: single
title: "My Page"
---

Default Layouts

Defaults are set in _config.yml:

defaults:
  - scope:
      type: posts
    values:
      layout: single
  - scope:
      path: "_pages"
    values:
      layout: single

Layout Details

default.html

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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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">&copy; 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:

single.html

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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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:

home.html

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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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:

splash.html

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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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:

Customizing Layouts

Overriding a Layout

To customize a theme layout:

  1. Find the original in the Minimal Mistakes repo
  2. Copy to your _layouts/ directory
  3. Modify as needed

Example: Customizing single.html

The 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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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>

Layout Components

Hero Section

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"
---

Table of Contents

Enable TOC for long content:

---
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---

Creating Custom Layouts

Step 1: Create the File

touch _layouts/custom-layout.html

Step 2: Add Layout Code

---
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">&lt;!-- Reference-style links --&gt;</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">&lt;!-- Unordered --&gt;</span>
<span class="p">-</span> Item one
<span class="p">-</span> Item two
<span class="p">  -</span> Nested item

<span class="c">&lt;!-- Ordered --&gt;</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">&gt; This is a blockquote.</span>
<span class="gt">&gt; It can span multiple lines.</span>

<span class="c">&lt;!-- With citation --&gt;</span>
<span class="gt">&gt; Quote text here.</span>
<span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://source.com"</span><span class="nt">&gt;</span>Source Name<span class="nt">&lt;/a&gt;&lt;/cite&gt;</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="nv">Alt text</span><span class="p">](</span><span class="sx">/assets/images/my-image.png</span><span class="p">)</span>

<span class="c">&lt;!-- With caption using include --&gt;</span>
<span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  &lt;img src="/assets/images/my-image.png"
       alt="Description"&gt;<span class="nt">&lt;figcaption&gt;</span>
      Figure caption<span class="sb">

    &lt;/figcaption&gt;&lt;/figure&gt;

</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">&lt;!--more--&gt;</span>
<span class="nn">---</span>

<span class="s">This text appears in the excerpt.</span>

<span class="s">&lt;!--more--&gt;</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>

Step 3: Add Styles

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;
  }
}

Step 4: Use the Layout

---
layout: custom-layout
title: "My Custom Page"
show_footer: true
---

Content here.

Liquid Templating

Variables

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"
---

Default Layouts

Defaults are set in _config.yml:

defaults:
  - scope:
      type: posts
    values:
      layout: single
  - scope:
      path: "_pages"
    values:
      layout: single

Layout Details

default.html

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:

single.html

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:

home.html

Homepage with paginated post listing:

---
layout: single
---
{{ content }}

{% for post in paginator.posts %}
  {% include archive-single.html %}
{% endfor %}

{% include paginator.html %}

Features:

splash.html

Full-width landing page:

---
layout: default
---
{% include page__hero.html %}

<div id="main" role="main">
  <article class="splash">
    {{ content }}
  </article>
</div>

Features:

Customizing Layouts

Overriding a Layout

To customize a theme layout:

  1. Find the original in the Minimal Mistakes repo
  2. Copy to your _layouts/ directory
  3. Modify as needed

Example: Customizing single.html

The 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>

Layout Components

Hero Section

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"
---

Table of Contents

Enable TOC for long content:

---
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---

Creating Custom Layouts

Step 1: Create the File

touch _layouts/custom-layout.html

Step 2: Add Layout Code

---
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>

Step 3: Add Styles

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;
  }
}

Step 4: Use the Layout

---
layout: custom-layout
title: "My Custom Page"
show_footer: true
---

Content here.

Liquid Templating

Variables

{{ page.title }}      <!-- Page title -->
{{ page.content }}    <!-- Page content -->
{{ site.title }}      <!-- Site title -->
{{ content }}         <!-- Rendered content -->

Conditionals

{% if page.header.image %}
  <img src="{{ page.header.image }}">
{% endif %}

{% unless page.hide_title %}
  <h1>{{ page.title }}</h1>
{% endunless %}

Loops

{% for post in site.posts limit:5 %}
  <li>{{ post.title }}</li>
{% endfor %}

Includes

{% include masthead.html %}
{% include_cached footer.html %}

Includes Used in Layouts

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

Debugging Layouts

Check Which Layout is Used

Add to any layout:

<!-- Layout: {{ page.layout }} -->

View Content Structure

<pre>{{ page | jsonify }}</pre>

List Available Includes

ls _includes/

See also: Theme Configuration | Styling | Directory Structure Henk van der Schuur

Writing Posts

This guide covers everything you need to know about creating blog posts for the site.

Post Basics

File Location

All posts go in the _posts/ directory:

_posts/
├── 2025-06-16-illusionofthinking.md
├── 2025-05-22-io.md
└── 2025-05-15-aconversationwithjonyive.md

File Naming Convention

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:

Front Matter

Every post begins with YAML front matter between triple dashes:

---
title: "The Illusion of Thinking"
tags:
  - ai
  - research
---

Required Fields

Field Description Example
title Post title "My Post Title"

Optional Fields

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

Post Types

Standard Post

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...

Link Post

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:

Markdown Syntax

Basic Formatting

**bold text**
*italic text*
~~strikethrough~~
`inline code`

Headings

# 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

Lists

<!-- Unordered -->
- Item one
- Item two
  - Nested item

<!-- Ordered -->
1. First item
2. Second item
3. Third item

Blockquotes

> This is a blockquote.
> It can span multiple lines.

<!-- With citation -->
> Quote text here.
<cite><a href="https://source.com">Source Name</a></cite>

Code Blocks

```python
def hello():
    print("Hello, world!")
```

```javascript
const greeting = "Hello";
console.log(greeting);
```

Images

![Alt text](/assets/images/my-image.png)

<!-- With caption using include -->
<figure class="">
  <img src="/assets/images/my-image.png"
       alt="Description"><figcaption>
      Figure caption

    </figcaption></figure>

Tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Tags

Tags help categorize posts and enable filtering:

---
title: "Post Title"
tags:
  - ai
  - apple
  - link
---

Existing Tags in Use

Based on current posts:

Tag Best Practices

Post URL Structure

URLs are generated from the filename and config:

# _config.yml
permalink: /:categories/:year/:month/:day/:title/

Example:

Excerpts

The excerpt is the preview text shown in listings.

Automatic Excerpt

By default, Jekyll uses the first paragraph as the excerpt.

Custom Excerpt

Specify a custom excerpt in front matter:

---
title: "Post Title"
excerpt: "A custom summary of this post that appears in listings."
---

Excerpt Separator

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

Drafts are posts not yet ready for publication.

Create a Draft

Put drafts in _drafts/ without a date prefix:

_drafts/
└── my-upcoming-post.md

Preview Drafts

bundle exec jekyll serve --drafts

Drafts will appear with the current date.

Publish a Draft

Move to _posts/ and add the date prefix:

mv _drafts/my-upcoming-post.md _posts/2025-01-31-my-upcoming-post.md

Unpublishing Posts

Hide a Post

Set published: false:

---
title: "Hidden Post"
published: false
---

Archive a Post

Move to the _posts/archive/ directory (excluded from build):

mv _posts/2025-01-01-old-post.md _posts/archive/

Link to Another Post

[Related post](/2025/06/16/illusionofthinking/)

Use the filename without extension.

[Contact page](/contact/)
[Work page](/work/)

Advanced Features

Table of Contents

Enable TOC for long posts:

---
title: "Long Post"
toc: true
toc_label: "Contents"
toc_icon: "file-alt"
toc_sticky: true
---

Header Images

---
title: "Post with Header"
header:
  image: /assets/images/header.jpg
  image_description: "Description"
  caption: "Photo credit: [Source](https://example.com)"
---

Last Modified Date

---
title: "Updated Post"
last_modified_at: 2025-06-20T12:00:00-00:00
---

Example Posts

Minimal Post

---
title: "Quick Update"
---

A brief update about something interesting.

Full-Featured Post

---
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 --> ```

Conditionals




  <h1>Layouts Guide</h1>

Loops


  <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>

Includes


    <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">&copy; 2021–2026 Henk van der Schuur</div>

Includes Used in Layouts

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

Debugging Layouts

Check Which Layout is Used

Add to any layout:

<!-- Layout: default -->

View Content Structure

<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>

List Available Includes

ls _includes/

See also: Theme Configuration Styling Directory Structure