hexo-generator-amp

AMP ⚡ HTML (Accelerated Mobile Pages Project HTML) generator for Hexo.

DEMO:　HTML | AMP HTML

!Screenshot

Overview

You able to generate an AMP site with almost little effort.

- Automatically generates new AMP HTML pages
- Freely customize AMP HTML template
- Automatically validate AMP HTML pages
- Improve generation speed (Cache mode)
- Supports external services

Installation

`` bash
$ npm install hexo-generator-amp --save
`

If you occur ERROR Plugin load failed: error or DTraceProviderBindings.node error , please see below.

- ISSUE_TEMPLATE
- DTraceProviderBindings.node issue #1 (hexo-related-popular-posts)

To publish AMP HTML, please refer to the following simple procedure.

$3

You must add AMP HTML's link to non-AMP.

> Accelerated Mobile Pages Project - Prepare Your Page for Discovery and Distribution

First, add the following in your template files. For example , Please edit themes/(your-theme)/layout/_partial/head.ejs as following . For example , in hexo-theme-landscape you will edit themes/landscape/layout/_partial/head.ejs.

` ejs
<% if (is_post() && config.generator_amp){ %>

<% } %>
`

Please refer follow as about how to use this plugin with based other templates.

- Jade template
- Swig template (e.g. hexo-theme-next)

To change path of AMP HTML , please see wiki.

$3

Please set the following options. Please edit _config.yml.

` yaml


hexo-generator-amp

generator_amp:
templateDir: amp-template
assetDistDir: amp-dist
logo:
path: sample/sample-logo.png
width: 600
height: 60
substituteTitleImage:
path: sample/sample-substituteTitleImage.png
width: 1024
height: 800
warningLog: false # To display warning, please set true.
`

To set the detail option , please see wiki.

$3

Starts a local server. By default, this is at http://localhost:4000/.

` bash
$ hexo clean
$ hexo server
`

This plugin generated the AMP HTML. Please open http://localhost:4000/your-posts-parmalink/amp/ in browser.

If occured plugin error , Please refer #17 and other issue .

$3

This plugin generated the AMP HTML. Output file path is ./your-posts-parmalink/amp/. Next , you should validate AMP HTML with the following procedure.

1. Please open your AMP HTML page in Chrome DevTools.
2. The Chrome DevTools console can check for AMP HTML. please Append http://localhost:4000/your-posts-parmalink/amp/#development=1 to the URL. Please see below for the details.

> Accelerated Mobile Pages Project - Validate AMP Pages

> How to validate AMP - my blog (Japanese)


To validate automatically from commandline , please see wiki - Automatically Validate AMP HTML option.

$3

If no AMP HTML Validation error is displayed , verification is complete . Please deploy at the end.

` bash
$ hexo clean
$ hexo server
$ hexo generate
$ hexo deploy -g
``

When the deployment is completed , Please check the AMP report

Wiki

Please see the wiki for detailed usage.

- To customize template
- To change path of AMP HTML
- About more option

- Google Adsense Option
- Template Option
- Google Analytics Option
- Minify Option
- Log & Auto Validation Log Option
- Cache Option
- Automatically validate AMP HTML option
- Footer Option (authorDetail)
- Front-matter option

License

MIT

[Hexo]: http://hexo.io/