Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


AMP starter theme for gohugo


This Hugo theme is supposed to be a starter theme to make it easy to adapt to Google's AMP-Project. Included in the theme are 40+ shortcodes and partials and automatic Structured Data making it a pleasure to embed AMP-Elements within your content files or your template.


Go to the directory where you have your Hugo site and run:

$ mkdir themes
$ cd themes
$ git clone
$ rm -rf gohugo-amp/.git

An extended theme documentation at For more information about the theme installation read the official setup guide of Hugo.


After installing the theme successfully, we recommend you to take a look at the Kitchen Sink. You find extensive documentation and a demonstration of all shortcodes and partials there.

For some features, you need to add configuration to your base config.toml params section:

    amp = true # enables amp features
    # define which amp-elements you are using globally, these elements will be included in every page
    ampElements = ["amp-accordion","amp-ad","amp-analytics","amp-carousel","amp-iframe","amp-app-banner","amp-dynamic-css-classes","amp-form","amp-fx-flying-carpet","amp-image-lightbox","amp-lightbox","amp-sidebar","amp-social-share","amp-sticky-ad","amp-user-notification"]

    themeColor = "#112233" # define a theme color (this will colorize the android address-bar)

    adsensePublisher = "ca-pub-123456789" # required if you want to include google adsense
    googleAnalytics = "UA-123456-78" # required if you want to use google analytics
    appleItunesApp = "app-id=123456789, app-argument=app-name://link/to/app-content" # required if you want to add an app banner with iOS app
    ampManifest = "/amp-manifest.json" # required if you want to add the app-banner feature
    alternatePageName = "HUGO AMP" # alternative name for website structured data
    organisationLogo = "" # set organisation logo for structured data
    organisationName = "" # set organisation name
    organisationAddress = "Some Street 123, 12345 City" # set organisation address

    socialProfiles = ["","","",""]  # for sameAs in organisation's structured data
    publisherName = "" # publisher used in article schema
    publisherLogo = "" #
    publisherLogoWidth = 600 # logo width
    publisherLogoHeight = 60 # logo height

    stylesheetRegular = ["/base-styling.css"] # these styles are used when amp is disabled for a specific page
    javascriptRegular = ["/script.js"] # these scripts are used when amp is disabled for a specific page

Sources for AMP references are managed in the data/amp-modules.json-File.


AMP does not allow you to include CSS styles with the regular link rel='stylesheet'-tag we need to embed the CSS in the header section.

For this case add a file in your regular layouts/partials/-folder called stylesheet.html. In this file you can write pure CSS (no <styles>-Tags required)

Since its not a cool idea have to write your stylesheets in an HTML-File we provide an automated process rendering your Sass output directly in this file. You can read more in our Guide about Styling in the documentation.

Google Analytics

Beside of adding the googleAnalytics in your base config.toml you also need to define triggers. Simply add a file in your base data section /data/analytics/triggers.json. For example:

  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  "trackEvent" : {
    "selector": "body",
    "on": "click",
    "request": "event",
    "vars": {
      "eventCategory": "body-click",
      "eventAction": "click"

Further information about AMP Analytics you will find in the official documentation of the amp-project.


App-Banners are very popular and help you to win your regular website's visitor downloading your app. Simply add a file in your base data section /data/app/banner.json for the configuration to display it in a mobile browser:

  "id" : "app-banner-id",
  "src" : "",
  "name" : "My Apps Name",
  "description" : "Short app description. Really short.",
  "openText" : "get the app"

Further information about AMP App-Banners you will find in the official documentation of the amp-project.

Demo and Example

A demonstration of the theme can be found at and an example integration you will find here: wildhaber/


Have you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Alternatively, make a pull request directly.


gohugo-amp released under the MIT License.


Thanks to Steve Francia for creating Hugo and the awesome community around the project.