Skip to content HtmlpressStatic site generator HtmlpressStatic site generator

Change theme

Keyboard shortcuts

Site Metadata

Updated

A few top-level keys in htmlpress.yaml describe your site to browsers, search engines, and social cards.

Fields

site: https://example.com
title: My Docs
description: Everything you need to build things.
logo: /logo.svg
favicon: /favicon.ico
banner: 'v2 is out · <a href="/blog/v2/">Read the release notes</a>'
head:
  meta:
    - name: twitter:site
      content: "@me"
Key Default Where it surfaces
site none Canonical origin used by the sitemap, <link rel="canonical">, og:url and absolute og:image URLs
title the folder name Every tab title (after the page's own, the home page's alone), og:site_name, the header site title
description none <meta name="description"> and og:description for pages without their own, and the line under the brand title
logo none Image shown before the site title in the header (and as favicon default)
favicon the logo Browser tab icon
banner none Announcement bar above the header on every page
head none Extra meta, links and scripts in every page's <head>

Sitemap and site

If site is set, every build writes a sitemap.xml of every page at the root of the output, using site (and base) as the absolute origin for every URL, and robots.txt points at it. Without site, the sitemap is skipped: it lists absolute URLs only. A project file named sitemap.xml or robots.txt wins over the generated one.

Logo and favicon

  • logo and favicon accept any URL or root-relative path (/logo.svg). Any file in the project is copied to the output at the same path, so logo.svg at the root works as /logo.svg.
  • If favicon is omitted, htmlpress falls back to logo; with neither, the htmlpress icon, which .htmlpress/favicon.svg can replace.
  • The logo is an <img> before the site title and its description in <htmlpress-brand>, which links home.

Keep the logo file small (an SVG is ideal). Every page loads it in the header.

banner shows a full-width bar above the header on every page. The value is HTML, written into <htmlpress-banner> as it is, so a link or any inline markup needs no custom component: 

banner: 'Htmlpress is in technical preview · <a href="https://github.com/datisthq/htmlpress/discussions">Share feedback</a>'
  • Root-relative links get your base prefix.
  • For different markup or styling, escape components/banner/banner.css, or replace the element with components/banner/banner.html (Overriding/Escaping).

Per-page tags

Every page overrides the site defaults with its own <title> (followed by · site title), description, og:title and og:description; og:type is website. With site set, it also gets og:url and a <link rel="canonical">. A page's <meta name="image"> becomes its og:image, made absolute with site (a local image is left out without it), and switches twitter:card from summary to summary_large_image.

Extra head tags

head adds tags to every page, after the defaults and the theme: lists of attribute maps. A script's children is its inline source, and a meta entry with the same name or property as a default replaces it: 

head:
  meta:
    - name: twitter:card
      content: summary_large_image
    - name: google-site-verification
      content: abc123
  links:
    - rel: me
      href: https://mastodon.social/@me
  scripts:
    - src: https://example.com/analytics.js
      defer: ""
    - children: console.log("hello")

A page's own <link>, <style> or <script> in its <head> comes after these, for that page only.

See also

Created with ❤ and Htmlpress

Actions

Edit on GitHubView as Markdown

Contents