A reusable website template for academic research labs, built with Astro, Tailwind CSS, and content collections for team, research, publications, news, and recruiting.
- Team — Member profiles with photos, bios, social links, alumni tracking
- Research — Research area pages with linked members and publications
- Publications — Publication listings with BibTeX integration and detail pages
- News/Blog — News posts with tags, archives, and RSS feed
- Join/Recruiting — Open positions, application steps, FAQ, and "why join" section
- Search — Full-text search powered by Pagefind
- Dark mode — Light/dark theme with system preference detection
- Dynamic OG images — Auto-generated Open Graph images for social sharing
- Responsive — Mobile-first responsive design
- Accessible — Semantic HTML, ARIA labels, keyboard navigation
# Clone this template
git clone https://github.com/your-org/lab-website-template.git my-lab
cd my-lab
# Install dependencies
pnpm install# Start the dev server
pnpm dev
# Build for production
pnpm build
# Preview the production build
pnpm previewEdit src/config.ts to set:
- Site title, description, author name
- Domain URL
- Open Graph image
- Posts per page, language, timezone
Edit src/constants.ts to update:
- GitHub, X/Twitter, email links
- Share link configuration
Add YAML files in src/data/team/. See the example files
(jane-doe.yaml, john-smith.yaml) for the schema. Photos go in
src/assets/team/.
Add Markdown files in src/data/research/. Each file
becomes a research area page. See the example files for the schema.
- Add BibTeX entries to
src/data/publications.bib - Add Markdown files in
src/data/publications/for highlighted publications with detail pages
Add Markdown files in src/data/news/. Each file is a news
post with frontmatter for title, date, description, tags, and author.
- Edit role descriptions in
src/data/join/roles/ - Edit FAQ entries in
src/data/join/faq/ - Update
src/components/join/WhyLabSection.astrowith your lab's selling points
- Replace
public/astropaper-og.jpgwith your Open Graph image (and updateogImageinsrc/config.ts) - Add team photos to
src/assets/team/ - Add research images to
src/assets/research/ - Update
public/favicon.svgif desired
├── public/ # Static assets (favicon, OG image)
├── src/
│ ├── assets/ # Images (team, research) processed by Astro
│ ├── components/ # Astro components (cards, footer, join widgets)
│ ├── data/
│ │ ├── join/ # Recruiting roles and FAQ
│ │ ├── news/ # News/blog posts (Markdown)
│ │ ├── publications/ # Publication details (Markdown)
│ │ ├── research/ # Research areas (Markdown)
│ │ └── team/ # Team member profiles (YAML)
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route pages
│ ├── styles/ # Global styles
│ ├── utils/ # Utility functions
│ ├── config.ts # Site configuration
│ ├── constants.ts # Social links
│ └── content.config.ts # Content collection schemas
├── astro.config.ts # Astro configuration
├── tailwind.config.* # Tailwind config (if applicable)
└── package.json
This template works with any static host. The build output is in dist/.
The included netlify.toml configures the build automatically. Just connect
your repository on Netlify.
The included vercel.json configures the build. Deploy via
Vercel by importing the repository.
Set SITE.website in src/config.ts to your GitHub Pages URL, then use
the included GitHub Actions workflow (if present) or deploy dist/ manually.
See CONTRIBUTING.md for development guidelines.
This template is based on AstroPaper by Sat Naing. See LICENSE for details.