This page introduces the home.github.io repository: a static personal homepage with automated background rotation and coding activity tracking. The system uses a JAMstack architecture where GitHub Actions workflows generate static JavaScript data files on a schedule, which are then consumed by a zero-build static frontend.
For detailed setup instructions, see Getting Started. For deep dives into individual subsystems, see Automated Bing Image System and WakaTime Integration System.
home.github.io is a static personal homepage deployed via GitHub Pages. The system requires no build step—any HTTP server pointed at the repository root can serve it. The entry point is index.html, which loads CSS and JavaScript assets from the dmego-home-page npm package via the unpkg.com CDN.
The site displays dynamic content (rotating Bing wallpapers, WakaTime coding statistics, and AI-generated commentary) without requiring server-side rendering. This is achieved through a specific architectural pattern: GitHub Actions workflows fetch external data on a schedule, generate JavaScript files containing global variables, and commit them to the repository. The browser then loads these files as static assets and accesses the exposed global objects.
The live site is available at i.dmego.cn (configured via CNAME).
Sources: index.html1-133 README.md1-108
The repository has two distinct layers that interact at the assets/json/ boundary:
| Layer | Location | Responsibility |
|---|---|---|
| Automation | .github/workflows/, .github/scripts/, assets/js/bing.js | Fetch external API data, generate JavaScript data files, commit to repository |
| Static Frontend | index.html, assets/js/main.js, assets/js/theme-loader.js | Load generated data files, render UI, handle user interactions |
The automation layer writes to assets/json/. The static frontend reads from assets/json/. No server-side rendering or build pipeline is involved.
Sources: index.html1-133 README.md56-61
Pipeline 1: Bing Image Rotation (see Automated Bing Image System)
| Component | Implementation |
|---|---|
| Workflow File | .github/workflows/auto-bing.yml (scheduled daily at 01:00 UTC) |
| Script | assets/js/bing.js |
| External API | Bing HPImageArchive API (cn.bing.com) |
| Output File | assets/json/images.js |
| Exposed Global | window.BING_IMAGES (array of 8 wallpaper URLs) |
| Frontend Consumer | assets/js/main.js (cycles through wallpapers on each page load) |
Pipeline 2: WakaTime Integration (see WakaTime Integration System)
| Component | Implementation |
|---|---|
| Workflow File | .github/workflows/daily-theme-update.yml (scheduled daily at 00:07 UTC) |
| Script | .github/scripts/update-wakatime.js |
| External APIs | WakaTime Summaries API, GitHub Models API (optional) |
| Output Files | assets/json/config.js, assets/json/weekly.js |
| Exposed Globals | window.WAKATIME_CONFIG (daily theme), window.WAKATIME_WEEKLY (7-day stats + AI commentary) |
| Frontend Consumer | assets/js/theme-loader.js (applies CSS theme, populates weekly modal) |
Sources: README.md56-61 index.html130-131 assets/json/config.js1-7 assets/json/weekly.js1-56
Diagram: Data Flow from External APIs to Global Variables
This diagram shows how external API data flows through GitHub Actions scripts into committed JavaScript files that expose global variables, which are then consumed by frontend modules loaded by index.html.
Sources: index.html130-131 README.md48-61 assets/json/config.js1-7 assets/json/weekly.js1-56
Diagram: File Dependencies and Global Variable Flow
This diagram maps repository files to specific code entities (global variables, script execution paths, and module dependencies). Solid arrows represent explicit dependencies; dashed arrows represent runtime global variable access.
Sources: index.html13-19 index.html130-131 assets/json/config.js1-7 assets/json/weekly.js1-56
The browser loads resources from two sources: the unpkg CDN (for static assets published in the dmego-home-page npm package) and the repository itself (for generated data files).
Diagram: Runtime Resource Loading
| Resource | Source | Purpose | Exposed Global/API |
|---|---|---|---|
assets/css/vno.css | unpkg CDN | Layout, animations, base styles | N/A |
assets/css/iconfont.css | unpkg CDN | Icon fonts for social media links | CSS classes .iconfont, .icon-* |
assets/css/wakatime-theme.css | unpkg CDN | Theme-specific CSS custom properties | CSS variables --theme-* |
assets/css/onlinewebfonts.css | unpkg CDN | Engravers' Old English BT web font | @font-face declaration |
assets/js/main.js | unpkg CDN | Background rotation, Hitokoto fetching, UI animations | Reads window.BING_IMAGES |
assets/js/theme-loader.js | unpkg CDN | Theme application, weekly stats modal | Reads window.WAKATIME_CONFIG, window.WAKATIME_WEEKLY |
assets/json/images.js | Same-origin | Bing wallpaper URLs (8-item array) | window.BING_IMAGES |
assets/json/config.js | Same-origin | Daily theme configuration | window.WAKATIME_CONFIG |
assets/json/weekly.js | Same-origin | Weekly coding stats + AI commentary | window.WAKATIME_WEEKLY |
| Hitokoto API | v1.hitokoto.cn | Random quote fetched at page load | Fetched via fetch() in main.js |
Sources: index.html13-19 index.html130-131 assets/json/config.js1-7 assets/json/weekly.js1-56 README.md48-54
To enable the automation pipelines, three secrets must be configured in the repository's Actions settings:
| Secret | Required | Purpose |
|---|---|---|
GH_TOKEN | Yes | Authenticates CI commits to the repo; also used for GitHub Models API calls |
WAKATIME_TOKEN | For WakaTime pipeline | Authenticates requests to WakaTime summaries API |
MODEL_NAME | No | Overrides the default model (openai/gpt-4.1) for AI commentary |
MODEL_DEBUG | No | Set to 1 to enable debug logging in update-wakatime.js |
For step-by-step configuration, see Getting Started and WakaTime Setup and Configuration.
Sources: README.md63-74