Notes from ting39: things I build, break and learn along the way. https://ting39.github.io/blog/ 2026-10-20T00:00:00+08:00 ting39https://ting39.github.io/ https://ting39.github.io/blog/how-this-site-works/ 2026-10-20T00:00:00+08:00 2026-10-20T00:00:00+08:00

A tour of the moving parts behind ting39.github.io, from the starfield to the secret terminal and this blog.

<p>This site is deliberately small: plain HTML, CSS and JavaScript, served by GitHub Pages, with no framework and no build step for the homepage itself. Here is what happens behind the page you are reading.</p> <aside class="callout callout-note"><p class="callout-title">Note</p><p>This first post was written by Claude, an AI assistant, while building the site with ting39. It's meant as documentation. ting39 can edit it, or hide it by adding <code>draft: true</code> to its front matter.</p></aside> <h2 id="the-homepage">The homepage<a class="anchor" href="#the-homepage" aria-hidden="true" tabindex="-1">#</a></h2> <p>The background is a <code>&lt;canvas&gt;</code> starfield: a few hundred points drifting slowly, with faint lines drawn to your cursor when it gets close. Everything else is regular HTML. The project cards come from a single file, <code>projects.js</code>, so adding a project means adding one object:</p> <figure class="code"><figcaption><span class="code-title">projects.js</span><span class="code-lang">js</span></figcaption><pre data-lang="js"><code class="language-js"><span class="tok-builtin">window</span><span class="tok-punct">.</span><span class="tok-type">PROJECTS</span> <span class="tok-operator">=</span> <span class="tok-punct">[</span> <span class="tok-punct">{</span> title<span class="tok-operator">:</span> <span class="tok-string">&quot;2048: Stellar&quot;</span><span class="tok-punct">,</span> description<span class="tok-operator">:</span> <span class="tok-string">&quot;2048 in space.&quot;</span><span class="tok-punct">,</span> tags<span class="tok-operator">:</span> <span class="tok-punct">[</span><span class="tok-string">&quot;game&quot;</span><span class="tok-punct">,</span> <span class="tok-string">&quot;javascript&quot;</span><span class="tok-punct">]</span><span class="tok-punct">,</span> link<span class="tok-operator">:</span> <span class="tok-string">&quot;https://ting39.github.io/2048/&quot;</span><span class="tok-punct">,</span> <span class="tok-punct">}</span><span class="tok-punct">,</span> <span class="tok-punct">]</span><span class="tok-punct">;</span></code></pre></figure> <h2 id="music-refreshed-weekly">Music, refreshed weekly<a class="anchor" href="#music-refreshed-weekly" aria-hidden="true" tabindex="-1">#</a></h2> <p>The &quot;on repeat&quot; section lists ting39's five most-played songs of the last four weeks. A GitHub Action runs every Monday at 08:00 Taiwan time. It asks Spotify's Web API for the top tracks and commits the result to <code>spotify.json</code>, which the page reads. The play buttons only load Spotify's embedded player when you press one, so visitors who don't press play load nothing from Spotify.</p> <h2 id="a-terminal-hiding-in-the-page">A terminal hiding in the page<a class="anchor" href="#a-terminal-hiding-in-the-page" aria-hidden="true" tabindex="-1">#</a></h2> <p>Press <kbd>`</kbd> anywhere on the site, or click the <code>&gt;_</code> in the footer. A small shell slides down. Its filesystem is built from the site's own data:</p> <div class="table-wrap"><table><thead><tr><th>path</th><th>what's in it</th></tr></thead><tbody><tr><td><code>~/projects/</code></td><td>one file per project card</td></tr><tr><td><code>~/blog/</code></td><td>the posts on this blog, as raw Markdown</td></tr><tr><td><code>~/music/on-repeat.txt</code></td><td>the same top 5 as the homepage</td></tr></tbody></table></div> <p>It has history, Tab completion, pipes (<code>history | grep cd</code>), <code>man</code> pages, and a few things <code>help</code> doesn't mention. The code is only downloaded the first time you open it.</p> <h2 id="this-blog">This blog<a class="anchor" href="#this-blog" aria-hidden="true" tabindex="-1">#</a></h2> <p>Posts are Markdown files in <code>posts/</code>. Pushing one triggers another Action that runs a small Node script (<code>tools/blog/build.mjs</code>, no dependencies) to render:</p> <ul> <li>a page for every post, plus the index and one page per tag,</li> <li>an <a href="https://ting39.github.io/feed.xml">Atom feed</a> and an RSS feed,</li> <li><code>posts.json</code>, which the homepage and the terminal read.</li> </ul> <p>Code blocks are highlighted at build time, so pages don't need any extra JavaScript to show colours. The output is deterministic: rebuilding without changing a post changes nothing, which keeps the commit history clean.</p> <h2 id="why-keep-it-this-simple">Why keep it this simple?<a class="anchor" href="#why-keep-it-this-simple" aria-hidden="true" tabindex="-1">#</a></h2> <p>A page that is just files keeps working with no maintenance. There are no servers, no database and no dependencies to update. When something needs to run, like the weekly Spotify refresh or rebuilding the blog, a scheduled GitHub Action does it and commits the result. Then the site is plain files again.</p>