amp

2016-12-07 / @syui

hugoでampに対応したthemeが公開されています。私のサイトはhugoで構築されていますので、hugoのcontentをそのままビルドできるので便利です。

$ mkdir themes
$ cd themes
$ git clone https://github.com/wildhaber/gohugo-amp.git
$ rm -rf gohugo-amp/.git
$ mv gohugo-amp/exampleSite/ .

config.toml

baseurl = "https://amp.syui.cf/"
languageCode = "en-us"
title = "MBA-HACK3 AMP"
theme = "gohugo-amp"
enableRobotsTXT = true

[params]
    amp = true # enables amp features
    ampCdnRoot = "https://cdn.ampproject.org/" # defined base cdn root of the amp projects files
    ampRelease = "v0" # define amp release you want to use
    ampElementsVersion = "0.1" # define amp-elements version you want to use
    
    # define which amp-elements you are using globally, these elements will be included in every page
    ampElements = ["amp-accordion","amp-ad","amp-carousel","amp-iframe","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"]
    #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 = "https://amp.syui.cf/favicon.png" # set organisation logo for structured data
    organisationName = "syui.cf" # set organisation name
    organisationAddress = "Some Street 123, 12345 City" # set organisation address

    socialProfiles = ["http://www.facebook.com/your-profile","http://instagram.com/yourProfile","http://www.linkedin.com/in/yourprofile","http://plus.google.com/your_profile"]  # for sameAs in organisation's structured data
    
    publisherName = "syui.cf" # publisher used in article schema
    publisherLogo = "https://amp.syui.cf/favicon.png" # https://developers.google.com/search/docs/data-types/articles#logo-guidelines
    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

[permalinks]
    post = "/:year/:month/:day/:slug"

https://cdn.ampproject.org//v0 以下にjsがあります。

cloudflare.comでCNAME amp syui.cfを設定。https://syui.gitlab.io/amp、つまり、gitlab.com/$user/$projectにテンプレートをアップロードします。

もしcloudflareなどを使わずにカスタムドメインを設定していなければアドレスはsyui.gitlab.io/amp/以下になります。

image: publysher/hugo

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

content/postはまるごとコピーしておきましょう。

これでamp.syui.cfがampのコンテンツアドレスになります。したがって、https://syui.cf/2016/10/26/web-app/ = https://amp.syui.cf/2016/10/26/web-app/です。

post = "/:year/:month/:day/:slug"は2つのconfig.tomlで一致させます。本来ならpost = "/post/:slug"などのpermlinkを設定したかったのですが、コメントシステムの対応が面倒だったので、日付を入れることにしました。

あと、ちょっと気になったのはAnalyticsを設定してないと文字が表示されてしまうことでした。したがって、themes/gohugo-amp/layouts/partials/amp/google-analytics.htmlを編集。

検証はnpm i amphtml-validator -gで行います。または、https://validator.ampproject.org/です。

$ amphtml-validator https://amp.syui.cf
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

どうやら![](/favicon.png)などの記述では問題がでるようです。