Dev Log on 卓琪的开发笔记 https://zhuoqidev.com/categories/dev-log/ Recent content in Dev Log on 卓琪的开发笔记 Hugo -- gohugo.io zh-CN © 2026 Liu ZhuoQi Mon, 04 May 2026 00:00:00 +0000 Building a Personal Site with Hugo and Dual-Stack CDN https://zhuoqidev.com/en/posts/hello-world/ Mon, 04 May 2026 00:00:00 +0000 https://zhuoqidev.com/en/posts/hello-world/ <h2 class="relative group">Why Hugo <div id="why-hugo" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#why-hugo" aria-label="锚点">#</a> </span> </h2> <p>When picking a framework for a personal blog, my top criterion was <strong>low maintenance cost</strong> — I didn&rsquo;t want to abandon writing three months later because of npm dependency hell.</p> <p>Hugo is a single binary, requires no Node.js, builds thousands of posts in 1-2 seconds, and the PaperMod theme comes with dark mode, full-text search, RSS, Open Graph, and reading time estimates out of the box. Day-to-day writing only requires touching Markdown files.</p> Embedding CSS Animation Demos in Hugo Articles https://zhuoqidev.com/en/posts/css-animation-demo/ Mon, 04 May 2026 00:00:00 +0000 https://zhuoqidev.com/en/posts/css-animation-demo/ <p>Hugo shortcodes make it easy to embed live code demos. Here are three ways:</p> <h2 class="relative group">1. Inline CSS Demo (No External Service) <div id="1-inline-css-demo-no-external-service" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#1-inline-css-demo-no-external-service" aria-label="锚点">#</a> </span> </h2> <p>A spinning loader animation, right in the article:</p> <div class="inline-demo" style="margin: 1.5rem 0;"> <iframe id="demo-8e7b60567f581c34a5d9e12e05cdeb9d-0" style="width:100%; height:200px; border:1px solid #dedad4; border-radius:6px; background:#faf8f5;" scrolling="no" sandbox="allow-scripts allow-same-origin"> </iframe> <p style="font-size:0.8rem; color:#777; text-align:center; margin-top:0.5rem;">Pure CSS Spinner</p> </div> <template id="demo-8e7b60567f581c34a5d9e12e05cdeb9d-0-src"> <style> .loader { width: 48px; height: 48px; border: 4px solid #e8e4de; border-top-color: #c44020; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div> </template> <script> (function() { var src = document.getElementById("demo-8e7b60567f581c34a5d9e12e05cdeb9d-0-src").innerHTML; var iframe = document.getElementById("demo-8e7b60567f581c34a5d9e12e05cdeb9d-0"); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write( '<!DOCTYPE html><html><head><meta charset="utf-8">' + '<style>*{box-sizing:border-box}body{margin:0;display:flex;align-items:center;' + 'justify-content:center;min-height:200px;background:#faf8f5;' + 'font-family:system-ui,sans-serif}</style></head><body>' + src + '</body></html>' ); doc.close(); })(); </script> <p>A gradient text animation:</p>