SmartToolsy — free online tools site
20 browser-based tools, 3 guide articles, and every page Google AdSense reviewers look for
(About, Contact, Privacy Policy, Terms, Disclaimer, sitemap, robots.txt).
Plain static HTML/CSS/JS — no database, no server, free to host on Vercel.
Folder layout
| Path | What it is |
|---|
src/build.py | Build script. Edit the CONFIG block at the top (site name, domain, email, AdSense ID). |
src/tools_a.py, src/tools_b.py | Each tool's form and its article content (how-to, formula, FAQ). |
src/articles.py | Blog/guide articles. Add new ones here. |
static/assets/ | CSS, shared JS, all tool logic (tools.js) and the built-in QR encoder (qr.js). |
docs/ | The finished website, served by GitHub Pages. Always rebuild and commit it after changes. |
Rebuild after any change:
python3 src/build.py
Hosting (Vercel, connected to this GitHub repo)
- Vercel project
smarttoolsy deploys every push to main. vercel.json tells it to serve the prebuilt docs/ folder.
- Domain
smarttoolsy.tech is registered in Vercel, so no DNS records are needed:
Vercel → smarttoolsy project → Settings → Domains → add smarttoolsy.tech (and www.smarttoolsy.tech redirecting to it).
- Do not also enable GitHub Pages or add GitHub A records; one host only.
- Create the email inbox you set as
CONTACT_EMAIL (Zoho Mail free plan, or Google Workspace).
After any change: python3 src/build.py, then commit and push (including docs/).
Google Search Console (do this on day 1)
- Add the domain in https://search.google.com/search-console and verify via DNS.
- Submit
https://YOURDOMAIN/sitemap.xml.
- Use "URL Inspection → Request indexing" for the homepage and a few tools.
AdSense approval checklist
Growing traffic (what actually moves AdSense earnings)
- Earnings depend on visitors from high-paying countries (US, UK, Canada, Australia).
- Each new tool = a new page that can rank. Pick tools people search for with low competition
(check Google autocomplete, "People also ask", and Search Console queries).
- Write one guide per tool explaining a real problem it solves, and link the two together.
- Share tools where people ask for them (Reddit answers, Quora, Pinterest pins for calculators).
Tool icons
Every tool needs an icon. Add its slug to TOOL_ICON in src/icons.py and copy the matching SVG into src/icons/ (the build stops with a message if one is missing). Icons are Material Design Icons by Pictogrammers; see src/icons/LICENSE. Each category has its own colour, set in static/assets/app.css under "Category colours".
Share images
Every tool and guide has its own 1200 × 630 share image in static/og/ (used for og:image and the X card). After adding a tool or guide, run python3 src/og.py to create the missing images (--all redraws every one), then build. Pages without their own image use static/og/default.jpg.