LaTeX to HTML Converter with Automated Deployment

A specialized web application that converts LaTeX resume documents to clean, professional HTML and deploys them to GitHub Pages. The system automatically processes your LaTeX resume and creates a beautiful, responsive web version with proper styling and typography.

Features

• Automated LaTeX Resume Conversion: Converts .tex resume files to professional HTML with proper formatting
• Resume-Specific Styling: Clean, professional presentation optimized for resume content
• CI/CD Pipeline: GitHub Actions workflow that validates and deploys automatically
• Fail-Safe Deployment: Blocks deployment if any LaTeX file fails to convert
• Document Browser: Browse all converted documents in a clean, responsive interface
• MathJax Integration: Proper rendering of mathematical formulas

Project Structure

resume/
├── latex/                  # Store your LaTeX resume files here
│   └── resume.tex          # Main LaTeX resume document
├── scripts/
│   └── convert-latex.mjs   # LaTeX to HTML conversion script
├── src/
│   ├── App.tsx             # Main application
│   ├── main.tsx           # React entry point
│   └── index.css          # Global styles
├── public/
│   ├── converted-docs/     # Generated HTML files (created during build)
│   └── documents-manifest.json  # Document metadata (created during build)
├── dist/                   # Production build output
└── .github/
    └── workflows/
        └── deploy.yml      # CI/CD pipeline configuration

Getting Started

1. Add Your LaTeX Documents

Place your .tex files in the latex/ directory. The converter will automatically process all files with a .tex extension.

Example structure:

latex/
├── my-research-paper.tex
├── math-notes.tex
└── thesis.tex

2. Test Locally

Convert and build the project:

pnpm install
pnpm run convert  # Convert LaTeX files only
pnpm run build    # Convert + build entire project

3. Set Up GitHub Pages

1. Go to your GitHub repository settings
2. Navigate to Pages section
3. Under Source, select "GitHub Actions"

4. Configure Environment Variables

Add your credentials as repository variables for GitHub Actions:

1. Go to Settings > Variables > Variables tab
2. Click New repository variable
3. Add the following variables:
   • VITE_GOOGLE_DRIVE_RESUME_LINK: Your Google Drive share link for the resume (optional)

5. Push to Deploy

git add .
git commit -m "Add LaTeX documents"
git push origin main

The GitHub Actions workflow will:

1. Install dependencies
2. Convert all LaTeX files
3. Validate conversion success
4. Build the React application
5. Deploy to GitHub Pages (only if all conversions succeed)

How It Works

Conversion Process

1. LaTeX Parsing: Uses @unified-latex to parse LaTeX source
2. HTML Generation: Converts LaTeX AST to HTML with proper structure
3. MathJax Integration: Mathematical formulas are rendered client-side
4. Styling: Applies arXiv-inspired CSS for clean academic presentation
5. Manifest Creation: Generates a JSON file with document metadata

CI/CD Pipeline

The GitHub Actions workflow (.github/workflows/deploy.yml) ensures:

• All LaTeX files convert successfully before deployment
• Build fails if any conversion errors occur
• Only successfully built sites are deployed to GitHub Pages
• Environment variables are properly injected during build

Database Tracking

The Supabase database stores:

• Documents Table: Metadata about each LaTeX file (title, author, date)
• Conversion Logs: History of conversion attempts and errors

Available Scripts

• pnpm run dev - Start development server
• pnpm run convert - Convert LaTeX files to HTML
• pnpm run build - Convert LaTeX + build production bundle
• pnpm run preview - Preview production build locally
• pnpm run lint - Run ESLint

Customization

Changing Base Path

If your repository name is different, update vite.config.ts:

base: process.env.GITHUB_PAGES === 'true' ? '/your-repo-name/' : '/',

Styling

Modify the CSS in scripts/convert-latex.mjs to customize the HTML output appearance.

Document Metadata

The converter extracts metadata from LaTeX commands:

• \title{...} - Document title
• \author{...} - Author names
• \date{...} - Publication date

Deployment

Your site will be available at:

https://<username>.github.io/<repository-name>/

Troubleshooting

Conversion Fails

Check the GitHub Actions logs to see which LaTeX file failed and why. Common issues:

• Unsupported LaTeX packages
• Syntax errors in LaTeX source
• Missing closing braces

Deployment Blocked

If deployment is blocked, the CI/CD pipeline detected conversion failures. Fix the LaTeX files and push again.

Local Testing

Run the conversion locally to debug issues:

pnpm run convert

Check the generated files in public/converted-docs/ and review public/documents-manifest.json.

Technologies Used

• React + TypeScript: Frontend framework
• Vite: Build tool and dev server
• @unified-latex: LaTeX parsing and conversion
• MathJax: Mathematical notation rendering
• Supabase: Database for tracking conversions
• GitHub Actions: CI/CD automation
• GitHub Pages: Static site hosting
• Source Sans Pro: Typography

License

This project is licensed under the MIT License - see the LICENSE file for details.