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 = truein Hugo config. - Lightweight styles — Default styles weigh only 5KB, with an
assets/custom.scssfile to override and append edited styles. - Basic AMP shortcodes — Includes shortcodes like
amp-adsenseand 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.
