Slate

Slate is a single-page speed dial theme for the Hugo static site generator that renders a grid of tiled bookmarks, each tile displaying either an image logo or URL text.

What is Slate?

Slate is a Hugo theme that turns a YAML data file into a single-page speed dial dashboard, similar to the New Tab page of a browser but hosted on your own site. It takes a list of links defined in data/links.yml and renders them as tiles with names, URLs, optional images, and color styling. The theme runs entirely on Hugo, requires no database or server-side logic, and outputs static HTML that can be deployed anywhere Hugo sites are hosted. It is developed by gesquive and published on GitHub.

Key Features

Slate offers a set of features that cover the core needs of a speed dial page: multiple tile display modes, background rotation, and tag filtering. Highlights include:

• Image or text tiles — Each tile can display an image logo via the img attribute or fall back to the link's URL text when no image is provided.
• Rotating image background — Configure a list of backgrounds in the BackgroundImages site parameter and the theme rotates through them.
• Tag-based navigation and filtering — A left sidebar with font-awesome icons filters tiles by tags defined in the config file, so you can quickly jump to favorites, search, music, or other groups.
• Per-tile styling — Each tile supports optional txt_color and bg_color CSS attributes; if omitted, a random text color is chosen.
• Configurable behavior — The OpenLinksInNewWindow site parameter controls whether tile links open in a new tab, and a Favicon parameter sets the site favicon.
• Custom background style — When no background images are set, a BackgroundStyle CSS value (default is a radial gradient) controls the page background.
• Data-driven link management — All links live in data/links.yml, so adding or editing a tile requires no code changes.

Who is it for?

Slate is aimed at individuals and teams who want a self-hosted, static link page without relying on third-party bookmark services. It fits these roles:

• Self-hosters — People who like to control their browser homepage and want a fast, static speed dial without third-party services.
• Developers — Those comfortable editing YAML and Hugo config files who want a customizable start page they can version-control and deploy with their static site.
• Teams or organizations — Anyone who needs an internal link portal listing shared resources like tools, documentation, or services, with tag filtering for quick access.

What can you do with Slate?

Slate can be used to create personal start pages, team link directories, and self-hosted speed dials. For example:

• Personal start page — Set your browser's new-tab page to a built Slate site with your most-used bookmarks, each with a recognizable logo tile.
• Team link directory — Maintain a shared page of internal links, using tags like favorites or search to let colleagues filter the most relevant resources.
• Self-hosted alternative to paid speed dials — Replace proprietary bookmark services with a static page you own; because it's Hugo-based, there are no monthly fees or account requirements.

How does Slate work?

Slate is installed by cloning the theme into your Hugo themes directory and enabling it by setting the theme parameter to slate in config.toml. Links are defined in the data/links.yml file with attributes like name, url, tags and optional img; navigation filters are added under params.nav with a display name, tag, and font-awesome icon. Running hugo server -t slate builds the site locally, and because Hugo is a static generator, the output is pure HTML, CSS, and JavaScript with no backend.

FAQ

How do I add a new tile to Slate?

Open data/links.yml and add a new entry with a name, url, and optional img, tags, and color attributes. The theme picks it up automatically on the next Hugo build.

Can I use Slate without image logos?

Yes — if a tile has no img attribute, Slate displays the URL text instead. You can also mix image and text tiles on the same page.

Does Slate work with Hugo's standard deployment?

Yes, since it produces static files, you can deploy the output to any static host such as GitHub Pages, Netlify, or your own web server.

What are the configuration options?

The available site params are BackgroundImages, BackgroundStyle, OpenLinksInNewWindow, and Favicon. Link-level options include name, url, tags, img, txt_color, and bg_color.