Jekyll 2026-06-06T17:28:34+00:00 https://udobroering.de/ Your Blog Name A personal blog about passion projects, random experiments, and whatever catches my attention. Udo Bröring Welcome to Your New Blog 2026-06-06T00:00:00+00:00 2026-06-06T00:00:00+00:00 https://udobroering.de/articles/2026/06/06/welcome-to-your-new-blog/ <p>Welcome! This post is the <strong>blueprint</strong> for everything you’ll write here. It is a real, published post — and it doubles as living documentation. Duplicate this file (<code class="language-plaintext highlighter-rouge">_posts/2026-06-06-welcome-to-your-new-blog.md</code>), change the front matter, replace the body, and you have a new post.</p> <h2 id="front-matter-field-by-field">Front matter, field by field</h2> <p>Every post starts with a YAML front-matter block between <code class="language-plaintext highlighter-rouge">---</code> fences. Here’s what each field does:</p> <table> <thead> <tr> <th>Field</th> <th style="text-align: center">Required</th> <th>What it does</th> </tr> </thead> <tbody> <tr> <td><code class="language-plaintext highlighter-rouge">title</code></td> <td style="text-align: center">✅</td> <td>Shows in the card, the post header, the <code class="language-plaintext highlighter-rouge">&lt;title&gt;</code>, and all SEO/OG tags.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">description</code></td> <td style="text-align: center">✅</td> <td>Meta description, card blurb, and feed summary. Keep it under ~155 chars.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">keywords</code></td> <td style="text-align: center">—</td> <td>SEO keyword array.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">date</code></td> <td style="text-align: center">✅</td> <td><code class="language-plaintext highlighter-rouge">YYYY-MM-DD</code>. Drives the URL and sort order.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">category</code></td> <td style="text-align: center">✅</td> <td>A single string. <strong><code class="language-plaintext highlighter-rouge">"Projects"</code></strong> (exact case) routes the post to <code class="language-plaintext highlighter-rouge">/projects/</code>; anything else lands on <code class="language-plaintext highlighter-rouge">/articles/</code>.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">tags</code></td> <td style="text-align: center">—</td> <td>Array of tags. Each becomes a filter on <code class="language-plaintext highlighter-rouge">/tags/</code>.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">image</code></td> <td style="text-align: center">—</td> <td>Card cover, rendered 600×340. Convention: <code class="language-plaintext highlighter-rouge">/assets/images/&lt;slug&gt;/&lt;slug&gt;-hero.*</code>.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">backdrop</code></td> <td style="text-align: center">—</td> <td>Full-bleed parallax hero at the top of the post page. Usually the same file as <code class="language-plaintext highlighter-rouge">image</code>.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">status</code></td> <td style="text-align: center">—</td> <td><code class="language-plaintext highlighter-rouge">published</code> (default), <code class="language-plaintext highlighter-rouge">draft</code>, <code class="language-plaintext highlighter-rouge">placeholder</code>, or <code class="language-plaintext highlighter-rouge">unpublished</code>. Only <code class="language-plaintext highlighter-rouge">published</code> and <code class="language-plaintext highlighter-rouge">placeholder</code> appear in the feed and sitemap.</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">series</code> / <code class="language-plaintext highlighter-rouge">series_order</code></td> <td style="text-align: center">—</td> <td>Group related posts. Define the series in <code class="language-plaintext highlighter-rouge">_data/series.yml</code>; the post page then shows a “Part X of Y” navigator.</td> </tr> </tbody> </table> <h2 id="categories-vs-tags">Categories vs. tags</h2> <ul> <li><strong>Category</strong> is singular and routes the post. Use <code class="language-plaintext highlighter-rouge">category: "Projects"</code> to send a post to the <code class="language-plaintext highlighter-rouge">/projects/</code> page; use anything else (like <code class="language-plaintext highlighter-rouge">"Guides"</code> here) for <code class="language-plaintext highlighter-rouge">/articles/</code>.</li> <li><strong>Tags</strong> are plural and cross-cutting. They power <code class="language-plaintext highlighter-rouge">/tags/</code> and the “You might also like” related-posts block.</li> </ul> <h2 id="hero-images">Hero images</h2> <p>Drop a hero image at <code class="language-plaintext highlighter-rouge">/assets/images/&lt;slug&gt;/&lt;slug&gt;-hero.webp</code> and point both <code class="language-plaintext highlighter-rouge">image</code> and <code class="language-plaintext highlighter-rouge">backdrop</code> at it. Real photos should be <strong>genuine WebP</strong>, ~1280px wide, metadata stripped, target ≤50 KB:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cwebp <span class="nt">-q</span> 80 <span class="nt">-m</span> 6 <span class="nt">-metadata</span> none <span class="k">in</span>.png <span class="nt">-o</span> out.webp </code></pre></div></div> <p>SVG heroes (like the placeholder this post uses) are already tiny and need no optimization.</p> <h2 id="writing-the-body">Writing the body</h2> <p>Just write Markdown. Tables (like the one above), code blocks, blockquotes, and images all get styled automatically by <code class="language-plaintext highlighter-rouge">assets/css/style.css</code>.</p> <blockquote> <p>Blockquotes look like this — handy for asides and callouts.</p> </blockquote> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Code blocks get syntax highlighting via Rouge.</span> <span class="kd">function</span> <span class="nx">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="s2">`Hello, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">!`</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>That’s it. Delete this post (or set <code class="language-plaintext highlighter-rouge">status: draft</code>) once you’ve written your own. Happy blogging!</p> A blueprint post that demonstrates every front-matter field and writing convention this Jekyll blog supports — copy it to start your own posts.