A clean, fully configurable personal browser start page. No build tools, no dependencies to install — just drop the content of the folder on a web server and open index.html in your browser.
![Screenshot placeholder — add your own once deployed]
- Live clock with configurable date format and 12/24-hour display
- Search bar with switchable search engines and a quick-launch AI tool button
- Shortcut groups — organise your bookmarks into tabbed panels with favicons or Font Awesome icons
- Productivity toolbar — quick-access icon links pinned to the top-right
- RSS news ticker — scrolling or rotating headlines from any RSS feed
- Daily wallpaper via Picsum, Unsplash, or Bing, or use your own image or solid colour
- Text colour toggles — flip label colours independently for readability over any background
- Local overrides — keep your personal settings out of version control with
config-local.json
- Download or clone this repository
- Open
index.htmldirectly in your browser
Note: RSS feeds will not load when opening the file directly (
file://) because browsers block cross-origin requests from local files. Everything else works fine. To get RSS working locally, use a simple local server (see below).
If you have Python installed:
# Python 3
python -m http.server 8080
# Then open: http://localhost:8080Or with Node.js:
npx serve .
# Then open the URL it prints- Chrome/Edge: Install the New Tab Redirect extension and point it at your hosted URL
- Firefox: Go to
about:preferences→ Home → set to your hosted URL - Hosting for free: GitHub Pages works perfectly — push this repo and enable Pages in the repository settings
├── index.html Main page — rarely needs editing
├── README.md This file
│
├── config/
│ ├── config.json ← Start here. Global settings.
│ ├── shortcuts.json ← Your bookmark groups and links
│ ├── productivity.json ← Top-right toolbar icon links (optional)
│ ├── feeds.json ← RSS ticker feeds and display settings (optional)
│ └── config-local.json ← Your personal overrides (optional, gitignored)
│
├── css/
│ └── homepage.css All styles — edit if you want to customise colours/layout
│
└── js/
└── homepage.js Application logic — no need to edit for normal use
The two required files are config.json and shortcuts.json. All others are optional — the page loads fine without them.
The main settings file.
"background": {
"mode": "wallpaper"
}mode |
Effect |
|---|---|
"color" |
Solid colour — set "color": "#1a1f2e" |
"image" |
Static image — set "image": "images/my-photo.jpg" (path relative to index.html) |
"wallpaper" |
Daily changing wallpaper from an online service |
Wallpaper services:
service |
Notes |
|---|---|
"picsum" |
Random nature/landscape photos — no account needed |
"unsplash" |
Set "unsplash_topics" to comma-separated keywords, e.g. "mountains,fog" |
"bing" |
Bing's daily photo |
"custom" |
Set "custom_url" to any direct image URL |
"overlay_opacity" controls a dark layer over the image (0 = none, 1 = fully black). Increase this if text is hard to read over bright wallpapers.
"clock": {
"enabled": true,
"show_seconds": true,
"format_24h": true,
"date_format": "iso"
}date_format options:
| Value | Example |
|---|---|
"long" |
Thursday, 26 February 2026 · Week 9 |
"short" |
Thu, 26 Feb 2026 · W9 |
"iso" |
Thu · 2026-02-26 · CW09 |
"compact" |
2026-02-26 · CW09 |
Tip: Click the clock on the page to toggle its text colour between light and dark.
"search": {
"default_engine": "google",
"engines": {
"google": { "label": "Google", "url": "https://www.google.com/search?q=", "icon_type": "favicon" }
},
"ai_tool": {
"label": "Claude",
"description": "Open Claude AI",
"url": "https://claude.ai",
"icon_type": "fontawesome",
"icon": "fa-solid fa-robot",
"icon_color": "#cc785c"
}
}- Add or remove engines from the
"engines"object. The key (e.g."google") must match"default_engine". icon_typecan be"favicon"(uses the site's own icon) or"fontawesome"(uses a Font Awesome icon — see fontawesome.com/icons for names).- To use a different AI tool, change
"url","label","description", and"icon".
The search bar also detects URLs — typing github.com or 192.168.1.1 will navigate directly rather than searching.
"text_defaults": {
"clock": "primary",
"ticker": "primary",
"group_bar": "primary",
"shortcut_labels": "primary"
}Set any value to "alt" to start that area in dark text mode — useful when using a light or solid-colour background. Each area can also be toggled at runtime by clicking the clock, the "Latest" badge, or the toggle buttons in the shortcuts bar.
Organise your links into named groups. Each group appears as a tab in the shortcuts bar.
{
"groups": [
{
"id": "work",
"label": "Work",
"icon": "fa-solid fa-briefcase",
"shortcuts": [
{
"label": "Jira",
"url": "https://yourcompany.atlassian.net",
"description": "Project issue tracker",
"icon_type": "favicon"
}
]
}
]
}Icon options:
{ "icon_type": "favicon" }Automatically fetches the site's own icon. Works for any public website.
{
"icon_type": "fontawesome",
"icon": "fa-brands fa-github",
"icon_color": "#ffffff"
}Use any Font Awesome 7 Free icon name. icon_color is any valid CSS colour.
Quick-access icon buttons pinned to the top-right of the page. Delete this file to hide the toolbar links entirely.
{
"enabled": true,
"links": [
{
"label": "Gmail",
"url": "https://mail.google.com",
"description": "Google Mail – your inbox",
"icon_type": "fontawesome",
"icon": "fa-solid fa-envelope",
"icon_color": "#EA4335"
}
]
}Displays a scrolling or rotating news ticker at the bottom of the page. Delete this file to disable the ticker entirely.
{
"enabled": true,
"display": {
"mode": "scroll",
"scroll_speed": 60,
"rotate_interval": 8000,
"rotate_transition": "fade",
"max_items_per_feed": 8,
"shuffle": true
},
"feeds": [
{ "label": "BBC News", "url": "https://feeds.bbci.co.uk/news/rss.xml", "enabled": true }
]
}mode |
Effect |
|---|---|
"scroll" |
Continuous horizontal ticker. scroll_speed: 40 = slow, 60 = medium, 90 = fast |
"rotate" |
One headline at a time. rotate_interval in milliseconds. rotate_transition: "fade" or "slide" |
Limitation: RSS feeds are fetched via the free rss2json.com proxy (~60 requests/hour for unauthenticated use). This is more than sufficient for a personal start page loaded a handful of times per day. Results are cached for 15 minutes in
sessionStorageto minimise requests. For private/intranet RSS feeds that rss2json cannot reach, set"enabled": falseon those feeds.
Hover to pause: In scroll mode, hovering over the ticker pauses it so you can read headlines.
This file is listed in .gitignore. Use it to store personal settings — private URLs, API keys, your specific wallpaper — without them appearing in your public repository.
Any key in config-local.json deep-merges over config.json at runtime. You only need to include the keys you want to override.
Example: you share config.json with mode: "wallpaper" as the default, but personally prefer a dark solid colour:
{
"background": {
"mode": "color",
"color": "#0d1117"
}
}All visual styling is in css/homepage.css. The key variables at the top of the file control the overall palette:
:root {
--bg-color: #1a1f2e; /* page background (solid colour mode) */
--accent: #5b8dee; /* highlight colour used on borders and active states */
--text-primary: #e8eaf0; /* main text colour */
--text-alt: #1a1f2e; /* alternate dark text (toggled for light backgrounds) */
--text-muted: #8892a4; /* secondary / label text */
}Tested in Chrome, Firefox, Edge, and Safari (desktop). Requires a browser released after 2020. Mobile layout is supported but the page is optimised for desktop use as a new-tab page.
Northstar is loosely inspired by the concept behind Best Homepage Ever — a polished commercial start page product. Northstar is an independent, ground-up implementation that shares the same general idea of a configurable personal start page but is entirely self-contained: no account required, no subscription, no sign-up, and no server-side component. It does not include any of the add-on enhanced features of that product.
- Font Awesome 7 — icons
- Google Fonts — Outfit — typeface
- rss2json.com — RSS proxy service
- Picsum Photos — default wallpaper service
- jQuery — DOM utilities