Deployment Guide for Quarto Portfolio

This guide will help you deploy your Quarto portfolio to various hosting platforms.

Prerequisites

1. Build the site locally first:

   ./build.sh
   # or manually:
   quarto render

2. Verify the build output:

   • Check that the _site/ directory contains all your HTML files
   • Ensure profile.jpeg and resume.pdf are copied to _site/

Deployment Options

1. GitHub Pages (Recommended for Free Hosting)

Option A: Deploy from _site directory

1. Create a new repository on GitHub (e.g., username.github.io)

2. Clone the repository locally

3. Copy contents of _site/ to the repository

4. Push to GitHub:

   git add .
   git commit -m "Deploy portfolio site"
   git push origin main

5. Go to repository Settings → Pages

6. Set source to “Deploy from a branch” and select main

7. Your site will be available at https://username.github.io

Option B: Deploy using GitHub Actions (Automated)

1. Create .github/workflows/deploy.yml:

   name: Deploy Quarto Site
   on:
     push:
       branches: [ main ]
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - uses: quarto-dev/setup-quarto@v2
         - name: Render site
           run: quarto render
         - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v3
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./_site

2. Netlify (Free Tier Available)

1. Drag & Drop Method:
   • Go to netlify.com
   • Sign up/Login
   • Drag the _site folder to the deploy area
   • Your site will be live instantly
2. Git Integration:
   • Connect your GitHub repository
   • Set build command: quarto render
   • Set publish directory: _site
   • Deploy automatically on every push

3. Vercel (Free Tier Available)

1. Go to vercel.com
2. Import your GitHub repository
3. Set build command: quarto render
4. Set output directory: _site
5. Deploy

4. Any Static Hosting Service

The _site directory contains pure HTML/CSS/JS files that can be uploaded to: - AWS S3 + CloudFront - DigitalOcean Spaces - Firebase Hosting - Any web server

Post-Deployment

1. Update Links

• Ensure all internal links work correctly
• Update any hardcoded localhost URLs

2. Test Functionality

• Check that all pages load correctly
• Verify images and PDFs are accessible
• Test responsive design on mobile devices

3. Set Up Custom Domain (Optional)

• Purchase a domain (e.g., from Namecheap, GoDaddy)
• Configure DNS settings to point to your hosting service
• Set up SSL certificate (usually automatic on modern platforms)

Maintenance

Adding New Content

1. Edit the appropriate .qmd file
2. Rebuild: quarto render
3. Deploy the updated _site directory

Updating Dependencies

• Quarto updates: Follow official guide
• CSS changes: Edit styles.css and rebuild

Backup

• Keep your source .qmd files in version control
• The _site directory can be regenerated anytime

Troubleshooting

Common Issues

1. Images not loading:
   • Ensure profile.jpeg is in the root directory
   • Check file paths in CSS and HTML
2. Math not rendering:
   • Verify MathJax is properly configured in _quarto.yml
   • Check browser console for JavaScript errors
3. Styling issues:
   • Ensure styles.css is copied to _site
   • Check for CSS conflicts
4. Navigation broken:
   • Verify all .qmd files are listed in _quarto.yml
   • Check that partial files (_navbar.qmd, _footer.qmd) exist

Performance Tips

1. Optimize images: Compress profile.jpeg if it’s too large
2. Minimize CSS: Consider using a CSS minifier for production
3. Enable compression: Most hosting platforms support gzip compression

Support

• Quarto Documentation: quarto.org/docs
• GitHub Issues: Check existing issues or create new ones
• Community: Join Quarto discussions on GitHub or Discord

---

This deployment guide is specific to your Quarto portfolio setup. Adjust paths and commands as needed for your specific configuration.