hexo-generator-amp

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

DEMO:　HTML | AMP HTML

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

$ 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.

1. Edit your theme

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.

<% if (is_post() && config.generator_amp){ %>
  <link rel="amphtml" href="<%= config.url %><%= config.root %><%= page.path %>/amp/index.html">
<% } %>

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.

2. Set the quick option

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

# hexo-generator-amp
# The following settings is the quick start options.

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. Run server

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

$ 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 .

4. Validate AMP HTML

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.

5. Deploy

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

$ 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