🎓 Scholar-Lite

English | 简体中文

⚡ Create your site in 30 seconds

npm create astro@latest -- --template fjd2004711/scholar-lite

The Next-Generation Static Website Template for Academic Labs & Scholars. Blazing fast, zero-config BibTeX import, and multilingual search engine built-in.

---

🚀 Quick Start (No Coding Required)

1. Click the Deploy to Netlify or Deploy with Vercel button above.
2. Wait for the deployment to finish.
3. Go to your new GitHub repository and find citations.bib.
4. Upload your own BibTeX file to replace it.
5. Done! Your website updates automatically in 1 minute.

---

Live Preview

Repository

---

🚀 Why Scholar-Lite?

⚡ Unmatched Performance

• Zero JS by Default: Built on Astro v6, sending 0kb of JavaScript to the client for content pages.
• 100/100 Lighthouse: Optimized out-of-the-box for Performance, Accessibility, Best Practices, and SEO.
• Tailwind CSS v4: The latest utility-first CSS framework for rapid, modern styling.

🤖 Smart Automation

• One-Click BibTeX Import: Stop manually copying papers. Drop your citations.bib and run one command.
• Intelligent Parsing: Automatically extracts PDF links, Code repositories, Project Websites, Videos, and Cover images.
• Asset Management: Smart fallback system for missing publication covers.
• Auto-Badging: Automatically highlights "Best Paper", "Oral", or "Spotlight" awards based on BibTeX notes.

🌍 Global Reach

• Multilingual Search: Built-in Pagefind search engine supporting 8 languages (English, Chinese, Japanese, Korean, French, German, Spanish, Russian).
• i18n Ready: Native support for internationalization with type-safe translations.

---

🆚 Comparison: Scholar-Lite vs. Hugo Academic

Feature	🎓 Scholar-Lite	🐢 Hugo Academic (Wowchemy)
Tech Stack	Astro v6 + React + Tailwind v4 (Modern & Mainstream)	Hugo + Go Templates (Steep learning curve)
Performance	100/100 Lighthouse (Zero JS by default)	Good, but often bloated with heavy JS
BibTeX Import	Zero-Config (Drag & drop citations.bib)	Complex Python scripts / Manual entry
Customization	Component-based (Edit .astro / .tsx files directly)	Rigid Theme (Overriding internal templates is hard)
Multilingual	Native i18n + Pagefind (Search in 8 languages)	Partial support, search often breaks
Dev Experience	Hot Reload (HMR) in milliseconds	Slower rebuilds on large sites
Ecosystem	NPM / Node.js (Access to millions of packages)	Go Modules (Limited web-focused packages)

---

🛠️ Running Locally

Prerequisites

• Node.js v22.12.0 or higher

1. Clone the Repository

git clone https://github.com/LiuzLab/Liuzlab.github.io.git
cd Liuzlab.github.io

2. Install Dependencies

npm install

3. Start Development Server

Start the local server with hot module replacement:

npm run dev

Visit http://localhost:4321 in your browser to see the site.

4. Build for Production (Optional)

Generate the static site and search index:

npm run build

Note: The search index is generated at build time. Search functionality requires the build step.

---

👥 Adding Yourself to the Team Page

Follow these steps to add yourself as a team member:

Step 1: Fork the Repository

1. Go to https://github.com/LiuzLab/Liuzlab.github.io
2. Click the "Fork" button in the top-right corner
3. This creates a copy of the repository in your GitHub account

Step 2: Clone Your Fork

git clone https://github.com/YOUR-USERNAME/Liuzlab.github.io.git
cd Liuzlab.github.io
npm install

Step 3: Add Your Profile Picture

1. Prepare a square (1:1 aspect ratio) photo of yourself in .jpg, .png, or .webp format
2. Name it something descriptive (e.g., avatar-yourname.jpg)
3. Place it in the src/assets/ directory

Step 4: Create Your Team Member File

1. Create a new Markdown file in src/content/team/ directory
2. Name it descriptively (e.g., phd-jane-smith.md or postdoc-john-doe.md)
3. Use the following template:

---
name: "Your Full Name"
role: "Your Role"
title: ["Your Title"]
avatar: "../../assets/avatar-yourname.jpg"
bio: "Brief one-line description of your research interests."
email: "your.email@institution.edu"
website: "https://your-website.com"
linkedin: "https://linkedin.com/in/yourprofile"
github: "https://github.com/yourusername"
twitter: "https://twitter.com/yourhandle"
googleScholar: "https://scholar.google.com/citations?user=YOUR_ID"
weight: 50
---

Write a longer bio here (optional). This appears on your detailed profile page.
Include information about your research, background, education, and interests.

Required Fields:

• name: Your full name
• role: Must be one of: Principal Investigator, Professor, Associate Professor, Assistant Professor, Postdoc, Research Assistant, PhD Student, Master Student, Undergraduate, Alumni
• avatar: Path to your image in src/assets/ (use format: ../../assets/your-image.jpg)

Optional Fields:

• title: Array of additional titles (e.g., ["PhD Student", "Research Fellow"])
• bio: Short description for your card
• email, website, linkedin, github, twitter, googleScholar: Your social/academic links
• weight: Controls display order (lower numbers appear first, default is 100)

Example:

---
name: "Jane Smith"
role: "PhD Student"
title: ["PhD Student"]
avatar: "../../assets/avatar-jane.jpg"
bio: "Researching deep learning applications in computational biology."
email: "jane.smith@bcm.edu"
github: "https://github.com/janesmith"
googleScholar: "https://scholar.google.com/citations?user=EXAMPLE"
weight: 25
---

Jane is a third-year PhD student in the Liu Lab working on developing 
machine learning models for disease gene prioritization. She holds a 
B.S. in Computer Science from MIT.

Step 5: Test Your Changes Locally

npm run dev

Visit http://localhost:4321/team to verify your profile appears correctly.

Step 6: Commit and Push Your Changes

git add src/content/team/your-file.md
git add src/assets/avatar-yourname.jpg
git commit -m "Add [Your Name] to team page"
git push origin main

Step 7: Create a Pull Request

1. Go to your fork on GitHub: https://github.com/YOUR-USERNAME/Liuzlab.github.io
2. Click "Contribute" → "Open pull request"
3. Add a title: "Add [Your Name] to team page"
4. Add a description explaining your changes
5. Click "Create pull request"

Step 8: Done!

Once your pull request is reviewed and merged, your profile will appear on the team page!

---

🛠️ Quick Start (Alternative: Template Usage)

Prerequisites

• Node.js v22.12.0 or higher

1. Installation

git clone https://github.com/your-repo/scholar-lite.git
cd scholar-lite
npm install

2. Development

Start the local server with hot module replacement:

npm run dev

Visit http://localhost:4321.

3. Production Build

Generate the static site and search index:

npm run build

Note: The search index is generated at build time. Search functionality requires the build step.

---

📚 Smart Publication & Book Management

Scholar-Lite features a powerful BibTeX Import Engine located in scripts/import-bibtex.js, supporting both Papers and Books.

How to Import

1. Export BibTeX: Export your bibliography as citations.bib from Zotero, Mendeley, or Google Scholar.
2. Place File: Save citations.bib in the project root.
3. Run Import:

   npm run import-bibtex

4. Auto-Classification: The system automatically classifies entries based on BibTeX type:
   • @article, @inproceedings, etc. -> Imported to Publications (src/content/publications)
   • @book -> Imported to Books (src/content/books)

Advanced BibTeX Features

The importer maps BibTeX fields to website elements intelligently:

BibTeX Field	Website Element	Smart Behavior
cover/image	Cover Image	Auto-detects local images in src/assets/. Highly recommended for books.
publisher	Publisher	For books, publisher is automatically displayed as the venue.
pdf/url/file	PDF Button	Cleans Zotero path formats (e.g., files/mypaper.pdf).
code/github	Code Button	Generates a GitHub/Code link button.
website/project	Project Page	Generates a Globe icon link to the project homepage.
demo	Live Demo	Generates a "Demo" button (Web App / HuggingFace / Video).
video/recording	Video	Generates a Video link button.
slides/ppt	Slides	Generates a Slides download button.
award/note	Badges	Auto-generates Gold/Blue/Red badges for "Best Paper", "Oral", etc.

BibTeX Entry Examples

1. Paper

@article{gpt4,
  title={GPT-4 Technical Report},
  author={OpenAI},
  year={2024},
  journal={ArXiv},
  url={https://arxiv.org/pdf/2303.08774.pdf},
  code={https://github.com/openai/evals},
  cover={../../assets/gpt4-cover.jpg},
  note={Tech Report}
}

2. Book

Simply set the entry type to @book, and the system will automatically place it in the "Books" section.

@book{deeplearning,
  title={Deep Learning},
  author={Goodfellow, Ian and Bengio, Yoshua and Courville, Aaron},
  publisher={MIT Press},
  year={2016},
  url={http://www.deeplearningbook.org},
  cover={../../assets/book-deep-learning.jpg}
}

---

🌟 Best Practices

📁 Directory Structure

• Images: Store website assets in src/assets/images/. Use .webp or optimized .jpg for better performance.
• Team Photos: Place headshots in src/assets/team/. Square aspect ratio (1:1) is recommended.
• Content: All editable content (News, Team, Research info) lives in src/content/.

📝 Content Management

• News: Add new Markdown files in src/content/news/. The filename doesn't matter, but sorting is based on the date field.
• Team: Add members in src/content/team/. Use weight to control display order (lower numbers appear first).
• Research Fields: Add Markdown files in src/content/research/. Use order field to control display order.
• Translations: Edit src/i18n/ui.ts to modify UI text (e.g., navigation menu, buttons) for all supported languages.

🎓 More Academic Achievements

Beyond papers and books, the system supports managing other academic achievements. Simply create Markdown files in the corresponding folders.

1. Software

• Location: src/content/softwares/
• Example:

  ---
  title: "Intelligent Image Processing System V1.0"
  developers: ["John Doe", "Jane Smith"]
  link: "https://example.com/image-processing-system"
  date: 2023-06-15
  description: "An automated image processing platform based on deep learning."
  ---

2. Grants/Funds

• Location: src/content/grants/
• Example:

  ---
  title: "A Method for Image Recognition Based on Attention Mechanism"
  pis: ["John Doe", "Bob Johnson"]
  number: "CN102345678B"
  startDate: 2024-01-20
  endDate: 2025-01-20
  status: "Granted" # Options: Granted, Pending, Filed
  ---

3. Group Honors

• Location: src/content/honors/
• Example:

  ---
  title: "18th Challenge Cup National College Student Extracurricular Academic Science and Technology Works Competition"
  award: "Grand Prize"
  date: 2023-10-30
  year: "2023"
  type: "Challenge Cup"  # Options: Challenge Cup, Internet+, Other
  level: "Special"       # Options: Special, First, Second, Third
  ---

🖼️ Image Optimization

Scholar-Lite automatically optimizes images imported from src/assets/.

• Avoid: Putting large images in public/.
• Prefer: Importing images in Markdown or Astro components to leverage automatic compression and lazy loading.

---

🚢 Deployment

Scholar-Lite is a static site that can be deployed anywhere.

Recommended Platforms

Platform	Global Speed	Ease of Use	Cost
Cloudflare Pages	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Free
Vercel	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Free
Netlify	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Free
GitHub Pages	⭐⭐⭐	⭐⭐⭐⭐	Free

Cloudflare Pages / Vercel / Netlify

1. Connect your GitHub/GitLab repository.
2. Build Command: npm run build
3. Output Directory: dist
4. Deploy!

GitHub Pages / GitLab Pages

This template includes CI/CD configurations (.github/workflows and .gitlab-ci.yml) to automatically build and deploy to GitHub/GitLab Pages on push.

---

Scholar-Lite Team
Empowering academic research with modern web technology.