103 lines
4.8 KiB
Markdown
103 lines
4.8 KiB
Markdown
+++
|
|
date = "2016-12-07"
|
|
tags = ["pc"]
|
|
title = "amp"
|
|
slug = "amp"
|
|
+++
|
|
|
|
hugoでampに対応したthemeが公開されています。私のサイトはhugoで構築されていますので、hugoのcontentをそのままビルドできるので便利です。
|
|
|
|
https://github.com/wildhaber/gohugo-amp
|
|
|
|
```bash
|
|
$ 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.ai/"
|
|
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.ai/favicon.png" # set organisation logo for structured data
|
|
organisationName = "syui.ai" # 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.ai" # publisher used in article schema
|
|
publisherLogo = "https://amp.syui.ai/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/](https://cdn.ampproject.org/)/v0 以下にjsがあります。
|
|
|
|
|
|
`cloudflare.com`で`CNAME amp syui.ai`を設定。`https://syui.gitlab.io/amp`、つまり、`gitlab.com/$user/$project`にテンプレートをアップロードします。
|
|
|
|
もしcloudflareなどを使わずにカスタムドメインを設定していなければアドレスは`syui.gitlab.io/amp/`以下になります。
|
|
|
|
```.gitlab-ci.yml
|
|
image: publysher/hugo
|
|
|
|
pages:
|
|
script:
|
|
- hugo
|
|
artifacts:
|
|
paths:
|
|
- public
|
|
only:
|
|
- master
|
|
```
|
|
|
|
`content/post`はまるごとコピーしておきましょう。
|
|
|
|
これで`amp.syui.ai`がampのコンテンツアドレスになります。したがって、[https://syui.ai/2016/10/26/web-app/](https://syui.ai/2016/10/26/web-app/) = [https://amp.syui.ai/2016/10/26/web-app/](https://amp.syui.ai/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/](https://validator.ampproject.org/)です。
|
|
|
|
|
|
```bash
|
|
$ amphtml-validator https://amp.syui.ai
|
|
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
|
|
```
|
|
|
|
どうやら``などの記述では問題がでるようです。
|