Amperage is a theme for static site generator GoHugo. This theme provides the following features:
Generates AMP pages.
Valid PWA out of the box.
Automatic structured data.
Service worker for asset caching, link prefetching and offline navigation.
Multilanguage and i18n support.
Code highlighting on build time.
Super fast and lightweight.
Minimal and easily overridable styles.
Basic AMP shortcodes for ease of use.
Header menu, table of contents and related posts.
Uses web safe fonts by default.
Automatic image croping and srcset generation.
Social share buttons and OGP/Twitter card tags.
Google analytics with gtag.
Configurable Adsense shortcode.
Comment system agnostic.
Lighthouse v5 theme results:
You can use the exampleSite provided to bootstrap your new project:
git clone https://github.com/asurbernardo/amperage.git
mkdir -p new-site/themes/amperage
mv amperage/exampleSite/* new-site
mv amperage/* new-site/themes/amperage
❯ Kitchen sink
You can check out all the components of this theme here and a fully functional website using this theme here.
# Default language if you have a multi-language setupDefaultContentLanguage = "en"baseURL = "https://example.com"theme = "amperage"pygmentsUseClasses = true# Number of posts shown per pagepaginate = 2# Language sections
contentDir = "content"languageName = "English"languageCode = "en"title = "Amperage theme ⚡"description = "This is an example page for the Amperage theme!"weight = 1
contentDir = "content/spanish"languageName = "Español"languageCode = "es"title = "Tema Amperage ⚡"description = "Esta es una página de ejemplo para el tema Amperage!"weight = 2# Menu elements
identifier = "hugo"name = "Hugo"url = "https://gohugo.io"weight = 10
identifier = "github"name = "GitHub"url = "https://github.com/asurbernardo/amperage"weight = 10# Enable only tags taxonomy
tag = "tags"
copyright = "Amperage"# Name shown on footer copyrightthemeColor = "#333"# Theme color displayed on mobile browsers# Default AMP components for the whole siteampElements = ["amp-analytics", "amp-social-share", "amp-install-serviceworker", "amp-iframe"]
# Google Analytics codegoogleAnalytics = "UA-128498798-1"# Adsense publisher codeadsensePublisher = "ca-pub-123456789"# Comments Iframe URLcommentsEmbedUrl = "https://comments.example.com"# Social sites for metatagsfacebookSite = "example"twitterSite = "@example"# Structured data elementssocialProfiles = ["https://twitter.com/example","https://www.linkedin.com/in/example/","https://github.com/example"]
alternatePageName = "Amperage example"organizationLogo = "/logo.png"organizationName = "Asur"publisherName = "amperage"publisherLogo = "/logo-amp-article.png"publisherLogoWidth = 600publisherLogoHeight = 60
❯ Customize logo
To override the default logo add the svg markup on the partial layouts/partials/header/logo.html.
❯ Customize styles
To override default styles just add the file assets/custom.scss to your project and it will be transpiled, minified and appended automatically. Default styles only weight 5KB (including code highlighting), that leaves you with 45KB to further customize the theme.
❯ Enable cross-domain service worker installation
To enable cross-domain service worker you need to override the file static/install-sw.html:
Due to AMP requirements the comments need to be hosted in a domain different from the original. Amperage is ready to receive a URL to embed comments at the end of every post. This is to achieve a degree of agnosticy for the comment system.
Remember that to resize the iframe containing the comment box you need to send a message to the amp sentinel with the new height: