Project Overview: haozhengwan.github.io

This is a personal academic website for Haozheng Wan (PhD student at HKU), built with Jekyll and deployed via GitHub Pages. It is based on the Academic Pages template, which is a specialized fork of the Minimal Mistakes Jekyll theme.

Architecture and Structure

The site is organized using Jekyll collections and data files:

• Collections (Content):
  • _pages/: Contains standalone pages such as About, Publications, CV, and Accomplishments.
  • _gallery/: A custom collection for travel/photo gallery albums. Each Markdown file represents an album.
  • _publications/, _teaching/, _portfolio/: Standard academic collections (may be partially implemented).
• Data (_data/):
  • navigation.yml: Defines the top navigation bar links.
  • authors.yml: Author profile data.
  • ui-text.yml: Localization and UI strings.
• Layouts and Partials:
  • _layouts/: Page templates (e.g., default.html, single.html, gallery-album.html).
  • _includes/: Reusable Liquid components (e.g., masthead.html, author-profile.html, sidebar.html).
• Styling (_sass/ and assets/css/):
  • Uses Sass for styling, with assets/css/main.scss as the entry point.
  • Organized by component in _sass/ (e.g., _sidebar.scss, _masthead.scss).
• Assets:
  • assets/js/: JavaScript source and minified files.
  • images/: Site-wide images, including profile.png (avatar).

Building and Running

The project requires Ruby and Bundler.

Key Commands

# Install Ruby dependencies
bundle install

# Run locally with live reload and development configuration
bundle exec jekyll serve -l -H localhost

# Minify JavaScript (rarely needed)
npm run build:js

• Local Development: Use _config.dev.yml (automatically loaded by some scripts or can be passed via --config _config.yml,_config.dev.yml) to override production settings for local testing.
• Deployment: Auto-deployed by GitHub Pages upon pushing to the main branch.

Development Conventions

• Content Creation: New pages should be added to _pages/ and albums to _gallery/. Each file requires YAML front matter to specify its layout, title, and other metadata.
• Navigation: To add or change links in the header, modify _data/navigation.yml.
• Styling: Prefer modifying variables in _sass/_variables.scss or adding component-specific styles in _sass/.
• Configuration: Site-wide settings (social links, analytics, author info) are managed in _config.yml.

Important Files

• _config.yml: The primary configuration file for the site.
• CLAUDE.md: Additional developer-specific guidance for AI assistants.
• Gemfile: Ruby dependency definitions.
• package.json: Node.js scripts for asset management.