Blogging on Time Friend

Adding an Animated Logo to My Blog

Thu, 14 Aug 2025 17:00:00 +0000

That small square in the top-left corner of the site? It’s a video.

Grayscale by default. Lights up on hover — different color every time, and the playback speed surges then eases back down. Like it just woke up.

Why

The old logo was a static PNG. It felt lifeless. I had a short video clip lying around, so I swapped the static image for a video.

mp4 Has No Alpha Channel

CapCut removed the background on export, but mp4 doesn’t support transparency — it gets baked to black.

How I Built the Homepage Typing Effect

Tue, 12 Aug 2025 11:50:00 +0000

When you open the homepage, you see text being typed out character by character. Not complicated, but many people ask how it’s done.

This article explains the implementation.

How It Works

When the homepage loads, it picks a random quote from a JSON file, and uses Typed.js to simulate typing.

Homepage loads
 ↓
main.js detects it's the homepage
 ↓
Determine language (Chinese/English)
 ↓
Pick a random entry from /data/quotes.json
 ↓
Pass to Typed.js, start typing animation

Data Source: quotes.json

Quotes are stored in static/data/quotes.json.

Making My Blog Work Offline with PWA

Tue, 08 Jul 2025 15:30:00 +0000

PWA is a buzzword. For this blog, PWA means two things: manifest.json and Service Worker. manifest.json tells the browser “this is an app”, Service Worker makes it work offline.

This article focuses on Service Worker since it’s the complex part. manifest.json is straightforward, covered at the end.

What is Service Worker

A Service Worker is a script that runs in the background of your browser. It’s independent of the web page, working silently behind the scenes.

Setting Up Page Analytics for My Blog

Sun, 15 Jun 2025 13:20:00 +0000

Writing a blog without knowing if anyone’s reading feels empty. Analytics isn’t for KPIs, just for fun.

This blog has two analytics systems, each with its own purpose.

Busuanzi shows on article pages, readers can see how many times each article has been viewed. Open source, no registration needed, just include a script.

Google Analytics runs in the background, only I can see it. Used for traffic sources, user distribution, popular content, etc.

Adding a Comment System to My Blog

Tue, 06 May 2025 10:30:00 +0000

A blog needs comments. But I didn’t want to set up a database and moderation system just for that. Giscus is the compromise.

This blog uses Giscus for comments. It’s based on GitHub Discussions. All comments live in the GitHub repo, no database needed, no third-party service.

Full Flow

User opens article page
 ↓
Loads giscus.app/client.js
 ↓
Giscus script reads data- attributes
 ↓
Uses mapping="pathname" to get current URL path
 ↓
Queries GitHub Discussions API for matching Discussion
 ↓
Found → renders comment box and existing comments
Not found → shows "leave a comment" input
 ↓
User writes comment → clicks submit
 ↓
Redirects to GitHub OAuth (first time only)
 ↓
Comment written to repo's Discussions via API
 ↓
Giscus WebSocket listens for changes → real-time updates

User never leaves the page. Entire flow is seamless.

Deploying This Blog: From Push to Live

Thu, 10 Apr 2025 15:44:00 +0000

Static files need a place to live, accessible from anywhere in the world.

Platform: Cloudflare Pages

Cloudflare Pages over other platforms, three reasons:

Global CDN: edge nodes worldwide, visitors load from nearest location
Zero-config HTTPS: automatic SSL certificate issuance and renewal
Free tier: enough bandwidth and build minutes for a personal blog

Setup is simple: create a project in Cloudflare Pages dashboard, link your GitHub repo. Build commands and output directory are controlled in GitHub Actions, no need to configure in the dashboard.

What I Did for Google SEO on This Blog

Tue, 25 Mar 2025 11:08:00 +0000

This article only covers Google SEO. No other search engines. Reason: Google has the traffic share, doing Google well is enough.

Structured Data

The most important part. Structured data lets Google show rich results in search — publish date, author, summary.

Every article gets JSON-LD injected at build time:

{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": {
 "@type": "Person",
 "name": "{{ .Site.Params.author }}"
 },
 "description": "{{ if .Description }}{{ .Description }}{{ else }}{{ .Summary | plainify }}{{ end }}",
 "url": "{{ .Permalink }}"
 {{ with .Params.tags }}
 ,"keywords": "{{ delimit . ", " }}"
 {{ end }}
}
</script>
{{ end }}

One thing to note: dates in JSON-LD must be ISO 8601 format (2025-03-17T10:43:00+08:00). If you only provide date without timezone, Google might not parse it correctly. Hugo’s .Date.Format outputs timezone by default, but if frontmatter doesn’t have timezone info, it assumes UTC — might not match your actual publish time.

How the Blog Build Pipeline Works

Wed, 05 Mar 2025 16:30:00 +0000

After writing articles, you don’t want to deploy them manually every time. The goal of automation is simple: push code and forget about it.

Two things: turn Markdown into static files and put them on the internet. Plus, automate the whole build process.

Gulp Tasks

Two Gulp tasks running in series:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

One line. Runs Hugo build, --buildFuture allows future-dated content, --minify handles HTML/CSS/JS compression at build time.

Customizing My Blog Theme

Sat, 15 Feb 2025 09:15:00 +0000

The theme is hugo-cactus-dark, a dark theme, clean and simple. Good enough for a blog.

But the original theme only had basic features. I needed bilingual switching, Giscus comments, page analytics, structured data — none of these were included. So I forked it and overrode the templates I needed in layouts/.

What Was Overridden

Templates in layouts/ have higher priority than the same files in the theme. I only overrode what I needed to change.

Going Multilingual: i18n for My Blog

Mon, 20 Jan 2025 14:21:00 +0000

Writing a tech blog has an awkward problem: Chinese content serves domestic readers, but there’s also considerable overseas traffic. So I went with both languages.

This blog is bilingual, Chinese and English. The same article has both versions, each with its own URL, independent of each other.

i18n has two parts: content internationalization (articles in both languages) and UI internationalization (buttons, menus, text switches with language).

Content Internationalization

Directory Structure

Using Hugo’s module.mounts for language mapping:

What My Blog Architecture Looks Like

Fri, 10 Jan 2025 10:00:00 +0000

Many people are curious about how this blog is built.

Looks simple, but there’s a lot behind it. Not a big project, but from an engineering perspective, I did quite a few things. Bilingual architecture, automated build pipeline, PWA, Google SEO, and so on.

So I’ll write a series to document the current setup. What I’m using, why I chose it, how the code is written, what performance considerations were made.

Automated Deployment of Hugo, Hexo Blog with Travis CI

Tue, 20 Nov 2018 16:14:25 +0000

What is Travis CI?

Travis CI is an online hosted CI service. Using Travis for continuous integration doesn’t require setting up your own server. Most importantly, it’s free for open source projects. If company uses gitlab, it also provides corresponding continuous integration services. Won’t elaborate here.

Travis CI Configuration File

Travis requires project root directory must have a .travis.yml file.

When your repository has commits, travis will automatically execute the behaviors you configured below.

Make Your Hugo Blog Support ECharts Charts

Mon, 19 Nov 2018 16:14:25 +0000

In previously hexo built blog, had used charts, but now after migrating to hugo, there’s no related plugin support.

So do it yourself, be self-sufficient.

In hugo there’s a feature called Shortcodes. Simply put it’s a small template that can pass parameters.

Create Shortcodes

Create ./layouts/Shortcodes/echarts.html file

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
 // Based on prepared dom, initialize echarts instance
 var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
 // Specify chart configuration items and data
 var option = JSON.parse({{ .Inner }})
 // Use just specified configuration items and data to display chart.
 myChart.setOption(option);
</script>

Usage

Insert echarts configuration data in Shortcodes, this way you can see a complete chart in the page

Hugo Blog Articles Not Displaying After Specified Time?

Sun, 18 Nov 2018 16:14:25 +0000

Since switching the blog to Hugo, encountered some pitfalls.

Articles correctly added, page time adjusted to today, or after today, but cannot display in article list.

The reason is that when Hugo templates loop through files, articles exceeding the current time won’t appear.

Timezone Issue

If your article time doesn’t specify a timezone.

Like this 2018-11-19 16:14:25, the article likely won’t display.

Hugo time is unified to Greenwich Mean Time, because China’s time is 8 hours earlier than Greenwich Mean Time. When Greenwich Mean Time hasn’t reached your configured time, articles won’t appear in the article list.

Hugo Platform Articles Not Displaying After Specified Time?

Sun, 18 Nov 2018 16:14:25 +0000

Since blog switched to Hugo, encountered some pitfalls.

Clearly correctly added articles, page time adjusted to today, or after today but cannot display in article list.

Reason is Hugo template when looping through files, articles exceeding current time won’t appear.

Timezone Issue

If your article time doesn’t specify timezone.

Like this 2018-11-19 16:14:25, article likely won’t display.

Hugo Blog Baidu SEO Ultimate Optimization, Baidu Xiongzhang Auto Push

Sat, 17 Nov 2018 16:14:25 +0000

After switching to Hugo platform, the headache is that many SEO plugins from Hexo can’t be used. Below I’ll share my SEO optimization solution.

Meta Tag Optimization

Description

meta description, considered the most useful meta tag, is the website’s introduction information. Content should be controlled within 100 characters.

<meta name='description' itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{substr .Summary 0 100}}{{ end }}{{ end }}">

Keywords

{{ if .Keywords }} 
<meta name="keywords" content="{{ delimit .Keywords ", " }}" >
{{else}}
<meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" >
{{ end }}

Baidu Xiongzhang Push

Speaking of SEO, Xiongzhang is essential, it can achieve indexing within 24 hours. So this must not be missed.

Basic Usage of Hugo Blog Building Tool

Thu, 15 Nov 2018 16:14:25 +0000

Finally migrated blog to Hugo, initially most worried was this theme didn’t exist on Hugo platform. But got excited, spent two or three days. This theme. Completely migrated to Hugo platform. Next I’ll introduce Hugo usage and pitfalls encountered, and solutions.

Hugo Performance

Precisely because hexo’s performance couldn’t satisfy, extremely unstable when generating static files. And time is relatively longer. With same page count, processing speed hugo is 20 times or more than hexo. This is why I switched to Hugo.