Amperage

Amperage is a GoHugo theme that generates native AMP pages, a valid PWA, automatic structured data, and a service worker for asset caching, link prefetching, and offline navigation, built by asurbernardo.

What is Amperage?

Amperage is a theme for the GoHugo static site generator. It takes Markdown content and outputs HTML pages that are valid Accelerated Mobile Pages (AMP), along with a service worker for offline navigation and asset caching, structured data in JSON-LD, and a JSON search index. The theme is developed by asurbernardo and distributed via GitHub.

Key Features

• Native AMP generation — Every page is a valid AMP page; no separate AMP template is needed.
• PWA out of the box — Includes a service worker for asset caching, link prefetching, and offline navigation.
• Automatic structured data — Generates JSON-LD structured data for SEO, including organization, publisher, and article metadata.
• SEO-focused — Includes OGP and Twitter card tags, customizable Google Analytics via gtag, and a SearchIndex output format for JSON-based search.
• Multilanguage and i18n — Supports multiple languages with per-language content directories and configuration.
• Code highlighting at build time — Uses pygmentsUseClasses = true in Hugo config.
• Lightweight styles — Default styles weigh only 5KB, with an assets/custom.scss file to override and append edited styles.
• Basic AMP shortcodes — Includes shortcodes like amp-adsense and render hooks for ease of use.
• Header menu, table of contents, and related posts — Built-in navigation and content enhancements.
• Web-safe fonts by default — No external font requests by default.
• Automatic image cropping and srcset generation — Responsive images out of the box.
• Social share buttons — Easily add social sharing to posts.
• Configurable Adsense shortcode — Display ads with a simple shortcode.
• Comment system agnostic — Supports embedding comments via an iframe URL, with a Disqus example.

Who is it for?

• Hugo users who want to make their sites AMP-compliant without a separate AMP theme.
• Bloggers and content sites seeking better SEO and performance.
• Developers who want a PWA-ready theme with service worker and offline capabilities.
• Multilingual site owners who need i18n support.

What can you do with Amperage?

• Bloggers: Publish AMP-valid blog posts with automatic structured data and social sharing buttons.
• Site owners: Deploy a PWA with offline navigation and asset caching for better mobile experience.
• SEO specialists: Get automatic structured data, OGP tags, Twitter cards, and a JSON search index.
• Developers: Extend the theme with custom SCSS, shortcodes, and menu structures; integrate Google Analytics and Adsense.

How does Amperage work?

Installation is done by cloning the repository, copying the exampleSite into a new project, and moving the theme into themes/amperage. After configuring config.toml, run hugo serve to preview. The theme uses AMP components specified in ampElements and installs a service worker via static/install-sw.html.

FAQ

How do I install Amperage?

Clone the repository, copy the exampleSite content to a new site, move the theme folder into themes/amperage, then run hugo serve.

Does Amperage support multilingual sites?

Yes, it supports multiple languages via the [languages] configuration with per-language contentDir, languageName, and title.

How do I customize the theme's styles?

Add an assets/custom.scss file to your project; it will be transpiled, minified, and appended automatically to override the default 5KB styles.

Can I use Google Analytics with Amperage?

Yes, set a googleAnalytics ID in config.toml, and the theme will use gtag to load analytics.

How do I enable Adsense ads?

Add an adsensePublisher code to config.toml and use the amp-adsense shortcode with width, height, layout, and slot parameters.