The lzwjava.github.io repository implements a personal knowledge base and blog hosted on GitHub Pages. The site organizes content into five major domains with quantified importance scores:
| Domain | Importance | Key Topics |
|---|---|---|
| Educational Content | 144.03 | Hong Kong education system, cross-border students, university admissions (JUPAS/Non-JUPAS), educational resource lists |
| Opinion & Commentary | 140.50 | Relationship opinions, technical critiques (networking switches, Java IO), business ethics |
| Learning & Growth | 134.92 | Active learning philosophy, personal experiments (vision restoration, English immersion), influential teachers (Yin Wang, Paul Graham, Isaac Newton) |
| Technical Documentation | 115-121 | Computer networking (OSI/TCP-IP), cryptography (GPG), digital electronics, AI/LLMs |
| Lifestyle & Practical Guides | 105-119 | Cooking guides (air fryer), travel guides (Guangzhou, Hunan), vision health |
System Architecture:
_site/ directory by Jekyll v3.10.0.github/workflows/static.yml (4-step GitHub Actions workflow)*-en.html and *-zh.htmlassets/js/dark-mode.js, audio.js, pdf.jsContent Creation Strategy:
x-ai/grok-4.1-fast)The live site is accessible at https://lzwjava.github.io.
Sources: High-level architecture diagrams (Diagram 1: Overall Site Domain Architecture), README.md1-10 _site/list-en.html35
The site organizes content through a topic-based navigation system at /list-en.html and /list-zh.html with 13+ categories:
Content Discovery System:
Content Types and Attribution:
| Content Type | File Pattern | Attribution Pattern | Examples |
|---|---|---|---|
| Original Content | *-en.html / *-zh.html | "Original" / "原创，AI翻译" | list-en.html:117 ("List | Original") |
| AI-Generated | *-en.html / *-zh.html | "Generated by AI" / "AI生成和翻译" | unpopular-relationship-opinions-en.html:117 |
| Dated Notes | notes/YYYY-MM-DD-*-en.html | "Generated by AI" | notes/2025-12-06-unpopular-relationship-opinions-en.html:116 |
| Reference Aggregation | yin-wang-zh.html, blogs-zh.html | "原创，AI翻译" | yin-wang-zh.html:117 |
AI-generated content includes footer attribution: <p class="model">x-ai/grok-4.1-fast</p> _site/unpopular-relationship-opinions-en.html232 or <p class="model">x-ai/grok-4-fast</p> _site/unexplored-experience-map-en.html216
Sources: _site/list-en.html202-216 _site/unpopular-relationship-opinions-en.html116-232 _site/yin-wang-zh.html117 High-level architecture diagrams (Diagram 1)
The repository implements a static site generation pipeline with fully automated deployment. When code is pushed to the main branch .github/workflows/static.yml7 the GitHub Actions workflow .github/workflows/static.yml1-44 executes four steps to deploy pre-built HTML from the _site/ directory .github/workflows/static.yml40 to GitHub Pages.
Build and Deployment Pipeline: Workflow Steps and Code Entities
The _site/.nojekyll file _site/.nojekyll1 is an empty marker that instructs GitHub Pages to serve content directly without re-processing it through Jekyll. The workflow includes concurrency control .github/workflows/static.yml20-22 to prevent multiple simultaneous deployments.
Sources: .github/workflows/static.yml1-44 _site/.nojekyll1 README.md3
The system architecture separates build-time generation, deployment automation, and runtime client-side enhancements. The deployment workflow .github/workflows/static.yml1-44 operates on the pre-built _site/ directory .github/workflows/static.yml40
Component Architecture: File Paths and Script Loading
Each HTML file _site/01.ai-yi-fall-en.html1-274 loads three JavaScript modules with the defer attribute _site/01.ai-yi-fall-en.html259-261: dark-mode.js for theme toggling, audio.js for text-to-speech, and pdf.js (usually commented out). External libraries include MathJax v2.7.7 _site/01.ai-yi-fall-en.html98-99 for mathematical equations and Marked.js _site/01.ai-yi-fall-en.html101 for client-side Markdown parsing.
Sources: _site/01.ai-yi-fall-en.html1-274 _site/10yo-en.html1-303 .github/workflows/static.yml40
Content is organized using a parallel bilingual structure where each article exists as two separate pre-generated HTML files:
| Component | English Version | Chinese Version | Purpose |
|---|---|---|---|
| Blog posts | *-en.html | *-zh.html | Technical essays and analysis |
| Information pages | *-en.html | *-zh.html | Practical guides and resources |
| Navigation | /donate-en | /donate-zh | Donation links |
| Metadata | og:locale="en" | og:locale="zh" | SEO language signals |
The language selector component uses JavaScript to redirect between parallel versions via window.location.href. For details on the multilingual implementation, see Multilingual System.
Sources: Content organization diagram, parallel content strategy
Every page follows a standardized HTML5 template with consistent DOM elements, IDs, and CSS classes. The structure bridges from semantic HTML to interactive JavaScript components.
HTML Document Structure and Code Entities:
Key Interactive Elements (ID-to-Function Mapping):
| Element ID | DOM Selector | JavaScript Handler | File Reference |
|---|---|---|---|
themeTogglePost | getElementById('themeTogglePost') | dark-mode.js theme toggle | _site/list-en.html155 |
sunIcon | getElementById('sunIcon') | Display toggle on theme change | _site/list-en.html157-168 |
moonIcon | getElementById('moonIcon') | Display toggle on theme change | _site/list-en.html170-173 |
languageSelect | getElementById('languageSelect') | addEventListener('change') redirect | _site/list-en.html186-242 |
audioPlayer | getElementById('audioPlayer') | audio.js playback control | _site/list-en.html194 |
audioSource | getElementById('audioSource') | Dynamic source loading | _site/list-en.html195 |
Language Selector Implementation:
Sources: _site/list-en.html1-247 _site/unpopular-relationship-opinions-en.html1-256 High-level architecture diagrams (Diagram 3: User Interaction and Navigation System)
Static Site Generation and Hosting Infrastructure:
Technology Matrix:
| Component | Version/Identifier | Code Reference | Purpose |
|---|---|---|---|
| Jekyll | v3.10.0 | <meta name="generator" content="Jekyll v3.10.0" /> _site/list-en.html31 | Static site generation |
| Jekyll SEO Tag | v2.8.0 | <!-- Begin Jekyll SEO tag v2.8.0 --> _site/list-en.html29 | Automated metadata |
| MathJax | 2.7.7 | cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML _site/list-en.html98-99 | Math rendering |
| Marked.js | latest | cdn.jsdelivr.net/npm/marked/marked.min.js _site/list-en.html101 | Client-side Markdown |
| Cloudflare Insights | beacon.min.js | data-cf-beacon='{"token": "70fc8c466cc1445098b3fc6f209c22c2"}' _site/list-en.html14-16 | Analytics |
| style.css | ad7bf04eb0... | ?v=ad7bf04eb0456d71bfe036980439dadf18a20d21 _site/list-en.html80 | Stylesheet (cache-busted) |
| dark-mode.js | N/A | <script src="/assets/js/dark-mode.js"> _site/list-en.html233 | Theme toggle |
| audio.js | N/A | <script src="/assets/js/audio.js" defer> _site/list-en.html234 | Audio player |
| pdf.js | N/A | <script src="/assets/js/pdf.js" defer> _site/list-en.html235 | PDF export |
AI Content Generation:
x-ai/grok-4.1-fast _site/unpopular-relationship-opinions-en.html232x-ai/grok-4-fast _site/unexplored-experience-map-en.html216<p class="model">x-ai/grok-4.1-fast</p>Sources: _site/list-en.html14-235 _site/unpopular-relationship-opinions-en.html232 High-level architecture diagrams (Diagram 5: Technical Infrastructure)
The deployment process executes automatically when code is pushed to the main branch .github/workflows/static.yml7 The workflow .github/workflows/static.yml1-44 runs on ubuntu-latest .github/workflows/static.yml30 with specific GITHUB_TOKEN permissions .github/workflows/static.yml13-16
Deployment Sequence: Workflow Execution Flow
The workflow implements concurrency control with group: "pages" and cancel-in-progress: true .github/workflows/static.yml20-22 to prevent conflicting deployments. The deployment target is the github-pages environment .github/workflows/static.yml27-29
Sources: .github/workflows/static.yml1-44 README.md3
The site implements a parallel file structure where every content page exists as two separate pre-generated HTML files with symmetric URLs and synchronized content structure.
Parallel Content Structure:
URL Pattern Mapping:
| Content Type | English URL | Chinese URL | Metadata Difference |
|---|---|---|---|
| Topic Lists | /list-en | /list-zh | og:locale="en" vs og:locale="zh" |
| Reference Aggregation | /yin-wang-en | /yin-wang-zh | English vs Chinese title/description |
| Opinion Articles | /unpopular-relationship-opinions-en | /unpopular-relationship-opinions-zh | Translated content, same structure |
| Dated Notes | /notes/YYYY-MM-DD-slug-en | /notes/YYYY-MM-DD-slug-zh | Parallel directory structure |
Language Selector Implementation:
The languageSelect dropdown _site/list-en.html186-189 contains parallel URLs:
JavaScript event listener handles redirection _site/list-en.html236-242:
Localization Strategy:
og:title, og:description, og:locale for SEOSources: _site/list-en.html186-242 _site/list-zh.html186-189 _site/yin-wang-en.html184-187 _site/yin-wang-zh.html184-187 High-level architecture diagrams (Diagram 2: Content Generation and Publication System)
The site generates comprehensive metadata via Jekyll SEO Tag v2.8.0 _site/01.ai-yi-fall-en.html29 to optimize discoverability across search engines, social media platforms, and feed readers.
Metadata Generation: Jekyll SEO Tag Output
All pages use the same social preview image at /assets/images/og/og4.jpg _site/01.ai-yi-fall-en.html68 with dimensions 1200x630. The Twitter handle @lzwjava _site/01.ai-yi-fall-en.html44-45 identifies the author across social platforms. JSON-LD structured data _site/01.ai-yi-fall-en.html46-47 enables rich search results with article metadata, publication dates, and author information.
Sources: _site/01.ai-yi-fall-en.html29-78 _site/01.ai-yi-fall-en.html46-47
The repository organizes pre-built static content, deployment automation, and external CDN references:
lzwjava.github.io/
├── .github/
│ └── workflows/
│ └── static.yml # GitHub Actions workflow (4 steps)
│
├── _site/ # Deployed directory (uploaded to Pages)
│ ├── .nojekyll # Marker: skip Jekyll re-processing
│ ├── index.html # Homepage
│ │
│ ├── *-en.html # English root pages
│ │ ├── list-en.html # Topic directory (13+ categories)
│ │ ├── yin-wang-en.html # Yin Wang complete works aggregation
│ │ ├── unpopular-relationship-opinions-en.html
│ │ └── ...
│ │
│ ├── *-zh.html # Chinese root pages (parallel structure)
│ │ ├── list-zh.html
│ │ ├── yin-wang-zh.html
│ │ ├── blogs-zh.html # External blog directory (36+ links)
│ │ └── ...
│ │
│ ├── notes/ # Dated content subdirectory
│ │ ├── 2025-12-06-unpopular-relationship-opinions-en.html
│ │ ├── 2025-12-06-unpopular-relationship-opinions-zh.html
│ │ ├── 2025-10-30-unexplored-experience-map-en.html
│ │ └── ...
│ │
│ ├── assets/
│ │ ├── css/
│ │ │ └── style.css?v=ad7bf04eb0456d71bfe036980439dadf18a20d21
│ │ ├── images/
│ │ │ └── og/
│ │ │ └── og4.jpg # Social preview (1200x630px)
│ │ └── js/
│ │ ├── dark-mode.js # Theme toggle (localStorage persistence)
│ │ ├── audio.js # Audio player (audioPlayer element)
│ │ └── pdf.js # PDF export (often commented out)
│ │
│ ├── favicon/
│ │ ├── favicon-32x32.png
│ │ ├── favicon-16x16.png
│ │ └── site.webmanifest
│ │
│ └── feeds/
│ └── feed.xml # RSS feed (Atom format)
│
└── README.md # Repository documentation with badge
File Naming Conventions:
[slug]-[lang].html (e.g., list-en.html, yin-wang-zh.html)notes/YYYY-MM-DD-[slug]-[lang].html?v=<git-hash>Special Files:
.nojekyll: Empty marker file preventing GitHub Pages Jekyll re-processingfeed.xml: RSS feed in Atom format for content syndicationsite.webmanifest: PWA manifest for favicon configurationSources: Repository structure analysis, _site/list-en.html1 _site/notes/2025-12-06-unpopular-relationship-opinions-en.html1 _site/yin-wang-zh.html1
The repository README includes a build status badge linking to workflow execution history:
The badge README.md3 displays the current status of the most recent deployment (passing/failing) and links to the GitHub Actions workflow runs page for detailed execution logs and artifact inspection.
Sources: README.md3
The architecture embodies several design principles:
These principles guide implementation decisions throughout the codebase. For specific implementations, refer to the subsystem documentation pages.
Sources: High-level architecture diagrams, system design analysis
Refresh this wiki
This wiki was recently refreshed. Please wait 7 days to refresh again.