Many Chinese Hugo sites show “This site has been running for ** days.” It’s fun and adds a touch of ceremony. But most methods hardcode a start date in JavaScript, then calculate from now. It’s simple—just fill in one value—but feels clunky. Plus, it’s not reusable in templates; everyone has to edit it.

How to display your Hugo blog’s uptime and auto-get the start time? If you need this, check out this guide.

This approach uses a template function to grab the date of your site’s earliest post, then calculates the runtime from there. It’s logical: Most Hugo sites have dated posts, so no missing-date worries.

Want to hardcode a date? Use this method anyway—just set data-time="" to a fixed value, like data-time="2025-01-01T09:00:00" for Jan 1, 2025, at 9 AM (swap space for T).

Template Part

Add this to your display spot, like footer.html.

1

<span id="runningtime" data-time="{{ $oldestPost := (where .Site.RegularPages "Type" "posts").ByDate | first 1 }}{{ with $oldestPost }}{{ with index . 0 }}{{ .Date.Format "2006-01-02T15:04:05" }}{{ end }}{{ end }}"></span>

JavaScript Part

Insert into page content, like a <script></script> tag in footer.html, or your main JS file. To keep JS and templates separate, the earliest post date goes in the template; JS grabs it, calculates, and updates the HTML.

1
2
3
4
5

const runningTimeSpan = document.getElementById('runningtime');
const startyijileTimeStr = runningTimeSpan.dataset.time;const startyijileDate = new Date(startyijileTimeStr);const diff = new Date() - startyijileDate;
const years = Math.floor(diff / 3.15576e10); const months = Math.floor(diff / 2.6298e9) % 12; const days = Math.floor(diff / 864e5) % 30; const hours = Math.floor(diff / 36e5) % 24; const minutes = Math.floor(diff / 6e4) % 60;
const parts = []; if (years > 0) parts.push(`${years}y`); if (months > 0) parts.push(` ${months}m`); if (days > 0) parts.push(` ${days}d`); if (hours > 0) parts.push(` ${hours}h`); if (minutes > 0) parts.push(` ${minutes}min`);
runningTimeSpan.innerHTML = `Site running ${parts.join(' ')}. `;

Code Advantages

• Separates template and script
• Highly compressed and optimized with scientific notation
• Converts to years, months, days, hours, minutes
  • “6000 days” looks epic but confuses; we prefer familiar units like years/months/days
  • Saves resources: Calculates once on load, no constant updates
    • Hours would be precise, but keeping minutes adds ceremony
• If any unit (year, month, day, hour, minute) is 0, hide it to improve readability and user experience.

How to Show Uptime in Hexo, Jekyll, Typecho

Swap data-time="2025-01-01T09:00:00" for your blog’s start (use T for space). Add to your template’s display spot, plus the JS above.

1

<span id="runningtime" data-time="2025-01-01T09:00:00"></span>

转载请注明转自：Yijile.com（ https://yijile.com/en/hugo-blog-runtime/ ）

本文采用 CC BY-NC-SA 4.0方式授权。
转载请注明出处和本文链接，说明是否进行修改，不得用于商业用途，使用相同方式共享。