UES.ONE: Building a Zero-CDN, Flicker-Free, Data-Driven Digital Garden

In this era of fragmented information, owning a “digital garden” of one’s own is particularly precious.

Finally, UES.ONE is live. It is not just a blog; it is a deep exploration of Web technology, data management, and user experience.

If you are tired of cookie-cutter CMSs or exhausted by modern web pages laden with megabytes of JavaScript, this article might offer some different inspiration. Here, I will take you from scratch to deconstruct how this completely Data-Driven, Zero-CDN, and Silky Smooth static site was built.

🌱 Getting Started: Why Hugo?

When choosing the technology stack, I evaluated mainstream frameworks like WordPress, Hexo, and Gatsby. In the end, Hugo won me over with its outrageous build speed (milliseconds) and the powerful Go language ecosystem.

To start it all on macOS, it only takes one simple command:

brew install hugo

Why Choose the Hextra Theme?

With the engine ready, a beautiful shell was needed. I chose Hextra. It is a Hugo theme transformed from a Next.js-style documentation theme. It not only supports Tailwind CSS but also perfectly blends “Documentation” and “Blog” layouts. More importantly, its minimalist aesthetic resonated with me.

Initializing the project and importing the theme:

hugo mod init ues.one
hugo mod get github.com/imfing/hextra

Just like that, the skeleton was ready. But to give it a soul, there was still a long way to go.

🏗️ Core Architecture: YAML Data-Driven

Traditional blogs are usually collections of isolated Markdown posts. But I have a penchant for organization. I wanted my reading lists, movie watchlists, and music collections to be more structured, resembling a Relational Database rather than a linear feed.

Therefore, I adopted a “YAML First” data strategy.

In the data/ directory, I didn’t hardcode HTML. Instead, I stored highly structured data:

• books.yaml: Reading records
• movies.yaml: Watchlist
• music.yaml: Music collection
• memos.yaml: Fleeting thoughts
• quotes.yaml: Curated quotes

Taking movies.yaml as an example, this is how I store a movie:

- id: "m_001"
  title: 
    zh-cn: "黑客帝国"
    en: "The Matrix"
    ja: "マトリックス"
  year: 1999
  rating: 5
  poster: "matrix.web"
  comment:
    zh-cn: "你选蓝药丸还是红药丸？"
    en: "Blue pill or Red pill?"

With this data, I wrote specialized Hugo Shortcodes (like moviewall.html), leveraging Hugo’s powerful template engine to render YAML into beautiful poster walls.

The benefits are immense: If I ever want to migrate from Hugo to Next.js or even a mobile app in the future, I only need to take these YAML files with me, without having to excavate data from hundreds of Markdown files like an archaeologist.

⚡ Performance Philosophy: The “Zero CDN” Approach

In today’s web development, which overly relies on public CDNs (like jsDelivr, unpkg), I made a “counter-trend” decision: Localize All Assets.

All the JS libraries (Swiper, Fancybox) and CSS styles you see on this site are hosted locally in the assets/ directory.

Why do this?

1. Privacy First: No Google Fonts, no third-party Analytics scripts. Your visit records will not be collected by any big tech companies for profiling.
2. Absolute Control: Even if a public CDN goes down (which is not rare), or in weak network environments, this site will still run perfectly.
3. Build Optimization: Using Hugo Pipes, I Fingerprint and Minify these resources at build time. Distributed by Cloudflare Pages, the speed is no less than any CDN.

🎨 Ultimate UX: Goodbye FOUC & Smart Preloading

1. Solving FOUC (Flash of Unstyled Content)

A common issue with static sites implementing “Dark Mode” is FOUC — the page flashes white for a split second before turning dark.

To solve this, we adopted a “Transparent-First, Inheritance-Based” CSS strategy. All card components have their default background set to transparent, and text colors set to inherit. This means that whether the browser initially renders in light or dark mode, components naturally blend into the background without waiting for JS execution.

2. “Zero Latency” Switching in Memos

In the Memos module, I introduced Smart Preloading logic.

While you are reading the current card, the browser is quietly downloading the image resources for the “previous” and “next” cards in the background. The code looks like this:

// Image preloading optimization: Silently load images for next and previous items
var nextIdx = (index + 1) % memoData.length;
var prevIdx = (index - 1 + memoData.length) % memoData.length;
if (memoData[nextIdx].image) (new Image()).src = memoData[nextIdx].image;
if (memoData[prevIdx].image) (new Image()).src = memoData[prevIdx].image;

This millisecond-level optimization creates an extremely smooth sensation at your fingertips.

3. Cross-Language Sync for Smart Quotes

The homepage does not use a public “Hitokoto” API but uses my self-built quotes.yaml library.

More interestingly, to ensure a consistent experience when switching languages, I implemented state synchronization using sessionStorage: If you see a quote by Nietzsche on the Chinese homepage, when you switch to the English version, you will still see the same quote’s English version, rather than jumping to another random one.

This consistency in detail is my obsession with user experience.

🛠️ Today’s Refactoring: A Victory for Clean Code

Just today, I conducted a massive refactoring of the entire site’s code.

• Configuration Standardization: Reorganized hugo.yaml from hundreds of messy lines into seven major sections like Core, Modules, Build, Multilingual, etc.
• Comment Documentation: All Shortcodes and Partials files were supplemented with Technical Chinese Comments. This is not just for AI to read, but for my future self.
• Bug Extermination: We even deliberated over the syntax boundaries of Go Templates repeatedly to fix a build failure caused by a line break in a theme-toggle HTML attribute value.

Conclusion

UES.ONE is my sanctuary and my playground.

In this process, I was responsible for the vision and aesthetics, while the AI handled the coding and debugging. Pair Programming with AI has become my new normal for development. We argued over the height of a div (like that 60vh vs 70vh scrollbar issue) and celebrated solving a z-index occlusion.

This is a growing garden. The code changes, the content changes, but the intention to “create with heart” remains unchanged.

Welcome to wander often.