Sanjay Nair - Personal Website

Overview

This project is my personal website/blog built using modern web development tools and practices:

• Static Site Generator: 11ty (Eleventy) for fast and flexible static site generation
• Styling: Tailwind CSS for utility-first styling
• Build Tools: PostCSS, cssnano, and autoprefixer for CSS optimization
• Hosting: GitHub Pages with custom domain configuration
• Latest Reads: Integration with Raindrop.io API to display recently read articles
• AI Assistance: Developed with the help of AI tools including:
  • GitHub Copilot for code completion and pair programming
  • Claude 3.5 Sonnet for development assistance and content generation

Setup

1. Prerequisites

   • Node.js (v22 or higher recommended)
   • npm (comes with Node.js)

2. Install dependencies

   npm install

Development

• Start development server

  npm run dev

  This will:

  • Build the initial CSS
  • Start the 11ty development server
  • Watch for CSS changes
  • Enable hot reloading

• Build for production

  npm run build

  This creates the production build in the _site directory.

• Other available commands:

  • npm run start - Start 11ty server only
  • npm run build:css - Build CSS only
  • npm run watch:css - Watch for CSS changes
  • npm run check-links - Check for dead links in the built site

Integrations

Raindrop.io Latest Reads

The site automatically fetches and displays my latest read articles from Raindrop.io:

1. Setup required environment variables and secrets:

   • RAINDROP_TEST_TOKEN (GitHub Secret): Your Raindrop.io API test token.
   • RAINDROP_SEARCH_TAG (GitHub Variable): The tag to filter articles by (e.g., "to-share").

2. How it works:

   • GitHub Actions runs daily to fetch the 5 latest articles tagged with RAINDROP_SEARCH_TAG.
   • Articles are stored in src/_data/raindrop.json
   • Latest reads are displayed on the homepage.
   • The fetch can also be triggered manually via GitHub Actions.
   • The script scripts/fetch-raindrop.js handles the fetching.
   • The workflow is defined in .github/workflows/update-raindrop.reads.yml.

Dead Link Checker

The site includes automated dead link checking to maintain link integrity:

1. Automated Weekly Checks:

   • GitHub Actions runs every Sunday at 2:00 AM UTC to check all links in the published site
   • Dead links are automatically reported as GitHub issues with details about the broken links
   • Workflow can also be triggered manually via GitHub Actions
   • Maximum of 5 issues created per run to prevent spam

2. Local Link Checking:

   • Run npm run check-links to check for dead links locally
   • Requires the site to be built first (npm run build)
   • Automatically installs the Lychee link checker if not present
   • Generates a report of any dead links found

3. Configuration:

   • .lycheeignore file contains patterns for URLs to skip (localhost, example domains, etc.)
   • Workflow defined in .github/workflows/check-dead-links.yml
   • Local script in scripts/check-links.js

4. Issue Labels:

   • Dead link issues are automatically labeled with dead-link and automated
   • Summary issues also include the summary label

Project Structure

• /src - Source files
  • /_includes - Layout templates
  • /assets - CSS and images
  • /blog - Markdown blog posts
• /_site - Generated static site (not committed)
• /postcss.config.js - PostCSS configuration
• /tailwind.config.js - Tailwind CSS configuration