Static Startpage

A static browser startpage for the things you actually open every day.

---

What It Is

Static Startpage is a personal dashboard that lives in a folder on your machine and opens directly in your browser — no server, no build step, no dependencies. It's a single HTML file and a handful of CSS and JS files.

It has two kinds of services: the ones that are always there (your homeserver apps, tools you open every day), and the ones you load on demand from a JSON file (current projects, temporary links). Both show up as cards with a live online/offline/local status indicator.

You can switch between three colour palettes (warm, cool, neutral) and toggle dark and light mode. Both preferences are remembered between sessions.

---

Getting Started

1. Clone or download the repository

   git clone https://github.com/sidisinsane/static-startpage.git

2. Copy the example services file and edit it with your own links

   cp default-services.example.js default-services.js

3. Open index.html in your browser

4. Set index.html as your browser's homepage — in most browsers this is under Settings → On startup or Homepage

That's it.

---

Your Permanent Services

Edit default-services.js to define the services that are always visible. Each entry looks like this:

const defaultServices = [
  {
    name: "My App",
    url: "https://myapp.local",
    description: "A short description shown on the card"
  }
];

Linking to Local Apps

Cards aren't limited to web URLs. Any app that registers a URI scheme on your system can be linked to directly.

VS Code — open a project folder (file is part of the URI, not the path):

vscode://file/Absolute/path/to/workspace

Obsidian — open a vault:

obsidian://open?vault=MyVault

Your browser will ask for confirmation the first time you follow one of these links. After that it's a single click.

---

Loading Additional Services

The Add services button lets you load additional cards from a JSON file without editing any code. The file picker has access to your entire filesystem, so these files can live anywhere — your Documents folder, a project directory, a synced cloud folder. The idea is that you can maintain several of them for different contexts (one for active projects, one for a client, one for a homelab experiment) and load whichever is relevant at the time, one at a time.

The file should be an array of objects with the same shape as your permanent services:

[
  {
    "name": "Project X",
    "url": "vscode://file/Absolute/path/to/workspace",
    "description": "Current sprint work"
  }
]

An example file is included in the repository as services.example.json to get you started.

Loaded services are merged with your permanent ones — duplicates (matched by URL) are ignored. The Reset button brings you back to your permanent services only.

---

Browser Permissions

Because the page runs from a local file, your browser may prompt you when it tries to reach local network addresses or hand off a link to an app like VS Code. These are standard browser security measures and the prompts are generally a one-time thing.

If services on your local network show as offline when they shouldn't be, or if URI scheme links don't work as expected, the following pages explain how to adjust local file access settings in your browser:

• Brave — Allow local file access
• Chrome — Allow access to file URLs
• Firefox — Local file privacy restrictions

---

Attributions

Phosphor Icons. "Phosphor Icons." Accessed May 5, 2026. https://phosphoricons.com. MIT License.