Skip to content
Switch branches/tags

Latest commit


Git stats


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

Origin : A Hugo theme

Origin is a single-column AMP theme for Hugo. Its ported from Origin theme for Wordpress.

The AMP specific parts where taken from gohugo-amp starter theme.


  • Google Analytics
  • Pagination
  • Social sharing (can be disabled by content)
  • Tags (optional)
  • Categories (optional)
  • Disqus
  • Schema

Theme assumptions

  • All blog posts are of the type post
  • Homepage displays a paginated list of content from the post section


Installing the theme

cd $website_root
mkdir themes
cd themes
git clone origin
rm -rf origin/.git // To avoid conflicting with the website's git configuration

Install HTML minifier

Read the styling section at GOHUGO AMP for more infos.

cd $website_root
npm i

Building the website

cd $website_root
npm run build:prod



Some configurations parameters where changed from the original Casper for Hugo theme.

languageCode = "en"
title = "My awesome blog"
baseURL = ""
theme = "origin"

    post = '/:year/:month/:slug/' # Wordpress style

# Define the default author
    name = "Jonn Doe"
    bio = "The most uninteresting man in the world."
    shortbio = ""
    location = "Normal, IL"
    website = ""
    twitter = ""
    github = ""
    linkedin = ""
    flipboard = ""

    description = "my tagline"
    logo = "/logos/logo.png"
    locale = "en_US"

    ampElements = ["amp-analytics","amp-iframe"] # AMP elements loaded on every page
    themeColor = "#ffffff" # Browser bar color
    googleanalytics = "UA-1341906-9"

    defaultSchema = "article"
    iframedomain = "" # for amp-iframe integration
    disqusShortname = ""

# Where can we share?
    twitter = true
    gplus = true
    pinterest = true
    facebook = true


Favicons parameters are defined under params.favicon in your site's config.toml

    manifest = "manifest.json"
    basename = "/logos/favicon"
    ms_tilecolor = "#FFFFFF"
    icon = [16, 32, 96, 192]
    apple_touch = [57, 60, 72, 76, 114, 120, 144, 152, 180]
    ms = [144]
    ms_config = "browserconfig.xml"

You files need to be put in /static/, using any subfolder you define in basename and need to be named according to the params:

  • favicon-<w>x<h>.png
  • favicon-manifest.json
  • favicon-browserconfig.xml

You can add favicon.ico to the static root for legacy browsers.


The theme assumes the existence of 2 taxonomies: Tags and Categories, they don't need to be used.

Multiples authors

Additionals authors can be defined in data/authors/author_key.toml

The author_key needs to be provided as the author in the Front Matter.


GivenName = 'Jane'
FamilyName = 'Doe'
DisplayName = 'Jane Doe'
Thumbnail = ""
Image = ""
ShortBio = "It's me"
LongBio = "It's really me"
    facebook    = ""
    github      = ""
    twitter     = ""
    googleplus  = ""


author = "jane"
title = "I am Jane"
slug = "i-am-jane"

Hi! My name is Jane

When the author_key can't be found, the default author is used.

Opengraph, Twitter Cards

Most existing data will be used, but some parameters can be added in config.toml and Front Matter to enhance the opengraph and twitter cards data


    locale = "en_US"
    facebook = 'authorfbpage' # Author's Facebook page
    twitter = 'Author Twitter handle'

When using multiple authors, the facebook or twitter attribute can be added to each author's data.

Front Matter

locale = "fr_CH"
images = ['a.jpg', 'b.jpg'] # If not provided, image will be used
audio = 'a.ogg'
videos = ['a.mp4', 'b.mp4']
series = ['first', 'another'] # You need to add Taxonomies.series to your site
description = 'Altername description for Facebook/Twitter' # If not provided, excerpt or summary are used

Google News

Front Matter

news_keywords = ['word1', 'word2']


    alternatePageName = 'Alternate name'
# Organization
    organizationName = ''
    socialProfiles = ''
    organizationLogo = ''
    organizationAddress = ''
# Breadcrumb
    breadcrumbOnPath = false
# Default schema type
    defaultSchema = 'article' # recipe, course are valid too

Front Matter

    type = 'article' # recipe, course are valid too
# For article
    src = ''
    # ...
# For course
    name = ''
    url = ''
# For recipes
    category = ''
    prepTime = ''
    # ...
    src = ''
    # ...
    value = ''
    # ...
    servingSize = ''
    # ...

Adding content

hugo new post/

Front Matter

To automatically populate the Front Matter with Hugo 0.19, you need to define the theme in use in config.toml.

draft = true
title = "Post title"
slug = "post-title"
tags = ["tag1","tag2"]
categories = ["cat1","cat2"]
image = ""
comments = true # set false to hide Disqus (Disqus is not implemented yet)
menu= ""        # set "main" to add this content to the main menu
author = "" # Use default or author_key from data/authors
noauthor = true # Hides the author on the post

    elements = ["amp-social-share"]
    # Adding amp-social-shares enables page sharing. Do not load amp-social-share to disable sharing.


To have your pages AMP valid, you need to write valid AMP content. To use an AMP element not loaded by default, you need to add it to your content page in the Front Matter

    elements = ["amp-image-lightbox", "amp-social-share"]

AMP elements can be inserted with shortcodes. Shortcodes for most of the AMP elements have been defined by the gohugo-amp project.

{{< amp-image-lightbox id="myimage" >}}
{{< amp-image
  alt="ALT text"
  srcset="/images/my-image-small.png 300w, /images/my-image-medium.png 730w, /images/my-image.png 1024w"

Modifying the theme


Styles need to be defined in the header of each page. The stylesheet is a partial in themes/campser/layouts/partials/styles/stylesheet.html with it's sources in themes/origin/layouts/partials/styles-src/styles.scss. To rebuild the stylesheet, you need to have a working nodeinstall and install the relevant dependencies.

cd themes/origin
npm i
npm run build

Read the styling section at GOHUGO AMP for more infos.


Hugo AMP Theme based on WP Theme Origin




No releases published


No packages published