Ultimate Unit Converters

This project is a fully functional, production-ready static website featuring over 250 reversible unit converters. It is built with HTML, TailwindCSS, and vanilla JavaScript, and is optimized for SEO, AdSense, and fast loading speeds.

Features

• 270+ Reversible Converters: A comprehensive collection of unit converters across various categories.
• Static Site: No backend, no database. Works perfectly on any static hosting provider.
• Automated Page Generation: Individual, SEO-friendly pages for each converter are generated by a script.
• Search and Filter: Easily find any converter from the homepage.
• Dark Mode: User-toggleable dark mode for comfortable viewing.
• SEO Optimized: Auto-generated meta titles, descriptions, sitemap.xml, and robots.txt.
• Monetization Ready: Placeholders for Google AdSense and Google Analytics 4 are integrated.
• Blog System: A simple, expandable blog system.

Tech Stack

• HTML
• TailwindCSS (via CDN)
• Vanilla JavaScript

Project Structure

.
├── assets/
│   ├── css/
│   │   └── style.css       # Custom CSS
│   └── js/
│       ├── conversions.js  # Core converter data and formulas
│       └── main.js         # Homepage logic (search, filter, etc.)
├── blog/
│   ├── index.html          # Blog listing page
│   └── ... (post files)
├── converters/
│   └── ... (270+ generated converter pages)
├── about.html
├── contact.html
├── index.html              # Homepage
├── privacy.html
├── terms.html
├── converter-template.html # Template for generating converter pages
├── generate_pages.sh       # Script to generate converter pages
├── sitemap.xml
└── robots.txt

How to Add or Modify Converters

The entire converter system is managed from a single file.

1. Open assets/js/conversions.js: This file contains the array of all converter objects.
2. Add or Edit an Entry: To add a new converter, add a new object to the converters array. To edit, modify an existing one. The format is:

   {
       category: "Category Name",
       from: "Unit A",
       to: "Unit B",
       formula: (x) => /* formula to convert A to B */,
       reverse: (x) => /* formula to convert B to A */
   }

3. Important: After adding or modifying converters in conversions.js, you must re-run the page generation script to create or update the individual converter pages.

Re-generating Converter Pages

A bash script is provided to automatically generate all the individual converter pages based on the data in conversions.js and the converter-template.html.

1. Make sure you are in a Bash environment (like Linux, macOS, or WSL on Windows).
2. Run the script:

   bash generate_pages.sh

   Note: The script in this repository is configured to run in batches to avoid overwhelming some systems. You may need to run it multiple times with different ranges if you add a very large number of new converters.

Deployment

This is a standard static website. You can deploy it to any static hosting provider. Here are instructions for popular services:

Vercel / Netlify / Cloudflare Pages

These platforms offer seamless deployment by connecting directly to your Git repository.

1. Connect your Git repository: Connect your GitHub, GitLab, or Bitbucket account where this project is hosted.
2. Configure the build settings:
   • Build Command: Leave this empty. There is no build step required.
   • Output Directory / Publish Directory: Set this to the root of the project (/ or leave empty, as all files are in the root).
3. Deploy: That's it! The platform will serve the static files.

Hostinger / Traditional Hosting (cPanel)

For hosting providers that use a file manager like Hostinger, the process involves uploading the files manually.

1. Prepare the files: Make sure all files for the website are in a single folder on your computer.
2. Compress the files: Create a .zip archive of the entire project folder.
3. Log in to your hosting panel: Access your Hostinger hPanel or cPanel.
4. Open the File Manager: Navigate to the File Manager tool.
5. Go to public_html: This is the root directory for your website.
6. Upload the .zip file: Use the upload functionality in the File Manager.
7. Extract the archive: Once uploaded, right-click the .zip file and select "Extract". You can extract the files directly into public_html.

Your website will now be live.

Monetization & Analytics

• Google AdSense: Ad slots are included as placeholder <div> elements in the HTML files (e.g., id="adsense-header"). To enable ads, replace these placeholders with your AdSense ad code.
• Google Analytics: The Google Analytics 4 placeholder script is included in the <head> of all pages. To enable analytics, replace G-XXXXXXXXXX with your own Google Analytics Measurement ID.