A simple, config-driven academic website template that generates HTML from JSON configuration.

📢 Important Update (v1.1.0): If you've already forked this template, please check the CHANGELOG.md for migration instructions. This update reorganizes file structure and adds new configuration options.

• Single config file controls all content (no HTML editing needed)
• Automatic generation via GitHub Actions
• Clean academic design with responsive layout
• Blog system with Markdown support
• Publication management with automatic formatting
• Easy maintenance - just edit JSON and push

1. Go to this repository
2. Click the "Fork" button in the top right
3. Choose your GitHub account as the destination

1. In your forked repository, go to Settings
2. Scroll down to "Repository name"
3. Change it to yourusername.github.io (replace with your actual GitHub username)
4. Click "Rename"

1. Still in Settings, scroll down to "Pages"
2. Under "Source", select "Deploy from a branch"
3. Choose "master" branch and "/ (root)" folder
4. Click "Save"

Your website will be available at https://yourusername.github.io

You need to clone the repository to your local computer so you can edit the config.json file and add your content. If you prefer, you can also edit files directly on GitHub, but using a local editor is more convenient.

git clone https://github.com/yourusername/yourusername.github.io.git
cd yourusername.github.io

⚠️ IMPORTANT: Open config.json and update the following sections:

Update the seo section with your information:

"seo": {
  "website_url": "https://yourusername.github.io",  // ← Change to your URL
  "github_pages_url": "https://yourusername.github.io",  // ← Change to your URL
  "website_name": "Your Name - Academic Homepage",  // ← Change to your name
  "website_description": "Your research description",  // ← Change to your description
  "keywords": ["your", "research", "keywords"],  // ← Update keywords
  "author": {
    "name": "Your Name",  // ← Change to your name
    "email": "your.email@university.edu",  // ← Change to your email
    "google_scholar_id": "YOUR_SCHOLAR_ID",  // ← Change to your Scholar ID
    "github": "yourusername",  // ← Change to your GitHub username
    "twitter": "yourusername"  // ← Change to your Twitter (or remove)
  },
  "organization": {
    "name": "Your University",  // ← Change to your affiliation
    "url": "https://yourusername.github.io"  // ← Change to your URL
  }
}

Update the visitor_map section:

"visitor_map": {
  "enabled": true,  // Set to false if you don't want visitor map
  "provider": "clustrmaps",
  "domain_id": "YOUR_CLUSTRMAPS_ID",  // ← Get your own ID from clustrmaps.com
  "color": "ffffff",
  "width": "a"
}

Note:

• If you don't want a visitor map, set "enabled": false
• To get your own ClustrMaps ID: visit clustrmaps.com, sign up, create a map, and copy the domain_id from the embed code

Update the personal section:

"personal": {
  "name": "Your Name",  // ← Change
  "email": "your.email@university.edu",  // ← Change
  "cv_link": "files/your-cv.pdf",  // ← Change to your CV file
  "profile_image": "images/your-photo.jpg",  // ← Change to your photo
  "links": [
    // ← Update all your social links
  ]
}

You need to replace the favicon files with your own logo. Here are the methods:

If you have a logo image at images/pagelogo_round.png:

python scripts/generate_favicons.py

This will automatically generate all required favicon files:

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png

1. Favicon.io (https://favicon.io/)

   • Upload your logo image
   • Download the generated favicon package
   • Extract and place files in the root directory

2. RealFaviconGenerator (https://realfavicongenerator.net/)

   • More comprehensive favicon generation
   • Handles all device types and sizes

If you have image editing software:

1. favicon-32x32.png: Resize your logo to 32x32 pixels, save as PNG
2. favicon-16x16.png: Resize your logo to 16x16 pixels, save as PNG
3. apple-touch-icon.png: Resize your logo to 180x180 pixels, save as PNG
4. favicon.ico: Convert your 32x32 PNG to ICO format using an online converter

Required Files:

• favicon.ico (32x32px, ICO format)
• favicon-16x16.png (16x16px, PNG)
• favicon-32x32.png (32x32px, PNG)
• apple-touch-icon.png (180x180px, PNG)

All files should be placed in the root directory of your website.

Add your papers in the publications section:

"publications": {
  "2024": [
    {
      "title": "Your Paper Title",
      "authors": ["Your Name", "Collaborator 1", "Collaborator 2"],
      "venue": "CVPR 2024",
      "venue_type": "conference",
      "image": "teaser/your-paper.jpg",
      "featured": true,
      "links": [
        {"name": "Paper", "url": "https://arxiv.org/abs/...", "icon": "ai ai-arxiv"},
        {"name": "Code", "url": "https://github.com/...", "icon": "fab fa-github"}
      ]
    }
  ]
}

Add recent news:

"news": [
  {
    "date": "Dec 2024",
    "content": "Paper accepted to <strong>CVPR 2024</strong>!",
    "category": "papers"
  }
]

Update your background:

"experience": [
  {
    "position": "Research Intern",
    "company": "Company Name",
    "period": "Summer 2024",
    "description": "Brief description...",
    "logo": "images/company-logo.jpg"
  }
],
"education": [
  {
    "degree": "PhD in Computer Science",
    "institution": "Your University",
    "period": "2024 - Present",
    "details": "Focus: Computer Vision and AI"
  }
]

1. Profile photo: Add your photo as images/your-photo.jpg
2. Paper teasers: Add teaser images to teaser/ directory
3. Company logos: Add logos to images/ directory
4. CV: Add your CV to files/ directory

git add config.json
git add images/  # if you added new images
git add favicon* apple-touch-icon.png  # if you added favicons
git commit -m "Update personal information and configuration"
git push

That's it! GitHub Actions will automatically build and deploy your site in 1-2 minutes.

Create .md files in blog/ directory:

---
title: "Your Blog Post Title"
date: "2024-01-01"
description: "Brief description"
tags: ["Research", "AI"]
image: "teaser/preprint.jpg"
---

# Your Blog Post

Write your content here in Markdown...

Push the file to GitHub - the blog will update automatically.

To preview changes locally before pushing:

# Build website locally
python scripts/build_local.py

# Start local server
python scripts/local_server.py

# Visit http://localhost:8000

• "papers": For publication news
• "career": For job/position updates
• "projects": For project announcements

• "conference": Blue badge (published papers)
• "under-review": Gray badge (under review)
• "preprint": Orange badge (preprints)

For Publications:

For Social Links:

Example:

"links": [
  {
    "name": "Paper",
    "url": "https://arxiv.org/abs/2204.01018",
    "icon": "ai ai-arxiv"
  },
  {
    "name": "Scholar",
    "url": "https://scholar.google.com/citations?user=YOUR_ID",
    "icon": "fas fa-graduation-cap",
    "color": "#4285f4"
  },
]

• Make sure you pushed changes to config.json
• Check GitHub Actions tab for build errors
• Wait 1-2 minutes for deployment

• Ensure image files are committed and pushed
• Check file paths in config.json
• Use relative paths from website root

• Validate JSON syntax in config.json
• Check GitHub Actions logs for specific errors
• Ensure all required fields are present

• Check that visitor_map.enabled is set to true
• Verify your ClustrMaps domain_id is correct
• Make sure you've signed up at clustrmaps.com and created a map

• Colors: Edit CSS variables in assets/css/styles.css
• Fonts: Change Google Fonts link in build scripts
• Layout: Modify scripts in .github/scripts/

• Check Issues
• Review example config.json for reference
• Check GitHub Actions logs for build errors

MIT License - free to use and modify!

Created by Sixun Dong - Independent Researcher

This template is designed to be simple and practical. Start with the basics and customize as needed.