hexo-generator-amp

hexo-generator-amp

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

Orverview

This plugin automatically generates AMP HTML pages. Output file path is ./your-parmalink/amp/. Also, You can freely choose the template(.ejs) and style(.css).

Update Notice v1.0.3

Added cache option. This option improves the generation speed. Old articles will not be generated AMP HTML again. Old articles will use cache.

DEMO

First of all, please see the examples. The following is my hexo blog.

• HTML page
• AMP HTML page (generated by this plugin)

Installation

$ npm install hexo-generator-amp --save

Usage

1. Edit your theme

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

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

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

• jade
• swig

2. Add your config file

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

# 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   # If you want to validate, please set true.

3. Run server

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

$ hexo server

4. Validate AMP Pages

This plugin generated the AMP HTML. Output file path is ./your-parmalink/amp/.

Now validate your AMP pages. Open your AMP page in your browser. Open the Chrome DevTools console and check for validation errors. Please Append http://localhost:4000/your-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

Options

This plugin can set the following options. Please edit _config.yml.

# Advanced Settings of hexo-amp-generator
generator_amp:
  
  # 1. Google Adsense option
  substituteGoogle_adsense:                   #(optional)
    data_ad_client: ca-pub-123456789876543    #(optional)
    data_ad_slot:   0123456789                #(optional)
    width:  336                               #(optional)
    height: 280                               #(optional)
  
  # 2. Template Option
  templateDir:  amp-template
  assetDistDir: amp-dist
  logo:
    path:   sample/sample-logo.png
    width:  600 # width <= 600px
    height: 60  # width <= 60px
  logo_topImage:                              #(optional)
    path:   sample/sample-yoursite-logo.png   #(optional)
    width:  1024                              #(optional)
    height: 400                               #(optional)
  substituteTitleImage: 
    path:   sample/sample-substituteTitleImage.png
    width:  1024 # width >= 696px
    height: 800
  cssFilePath:      sample/sample-amp.css     #(optional)
  templateFilePath: sample/sample-amp.ejs     #(optional)
  
  # 3. Google Analytics Option
  google_analytics: UA-123456789-1            #(optional)
  
  # 4. Minify Option
  html_minifier:                              #(optional)
  
  # 5. Log Option
  warningLog: true                            #(optional)
  
  # 6. Cache Option
  cache: hexo-generator-amp-cached.json       #(optional)
  # onlyForDeploy: false                      #(optional) #Deprecated <= v1.0.3

# 7. Footer Option (authorDetail)
authorDetail:
  authorReading: Your name description        #(optional)
  avatar:                                     #(optional)
    path:   sample/sample-avator.png          #(optional)
    width:  150                               #(optional)
    height: 150                               #(optional)
  description: Self introduction              #(optional)
copyright_notice: The footer copyright notice #(optional)

A description of the options

Option can use as follows.

1. Google Adsense Option

If an advertisement is found in an article, it will be converted to AMP specification.

Adout Google Adsense , please see Create an AMP ad unit for the details.

option	description
data_ad_client	substitute data_ad_client id
data_ad_slot	substitute data_ad_slot id
width	substitute ad width
height	substitute ad height

2. Template Option

templateDir & assetDistDir

option	description
templateDir	File path of a your AMP template files.
assetDistDir	File path of a your public AMP Assets.

logo

option	description
path	File path of a your logo (schema.org logo for AMP) image.
width	Width of a your logo (schema.org logo for AMP) image. (width <= 600px)
height	Height of a your logo (schema.org logo for AMP) image. (height <= 60px)

logo_topImage

option	description
path	File path of a your site logo image.
width	Width of a your site logo image.
height	Height of a your site logo image.

substituteTitleImage

option	description
path	File path of a your substitute title image. (Use this when the image is not in the markdown)
width	Width of a your substitute title image. (width >= 696px)
height	Height of a your substitute title image.

cssFilePath & templateFilePath

option	description
cssFilePath	File path of a your css file for AMP. (e.g. ./sample-amp.css) It is a validation error if the author stylesheet is larger than 50,000 bytes.
templateFilePath	File path of a your template file for AMP. (e.g. ./sample-amp.ejs)

3. Google Analytics Option

option	description
google_analytics	Your google analytics tracking ID.

4. Minify Option

option	description
html_minifier	Enabled html_minifier. Please see kangax/html-minifier for the details.

5. Log Option

option	description
warningLog	Enabled warnings.

6. Cache Option

option	description
cache	This option improves the generation speed. Old articles will not be generated AMP HTML again. Old articles will use cache.

7. Footer Option (authorDetail)

authorReading

option	description
authorReading	Your name description.

avatar

option	description
path	File path of a your avator image.
width	Width of a your avator image.
height	Height of a your avator image.

description

option	description
description	Self introduction.

copyright_notice

option	description
copyright_notice	The footer copyright notice.

Front-matter option.

ampSettings.titleImage.path (optional)

You can choose path of schema.org image on a per post. If your post is not contain this option , this plugin search image from content.

For example : hello-world.md , Please set the following options.

---
title: Hello World
ampSettings: 
 titleImage:
   path: titleImage-on-the-local-folder.png
---

Welcome to [Hexo](https://hexo.io/)! This is your very first post. 
...

If image on the external , Please set the width and height options.

---
title: Hello World
ampSettings: 
 titleImage:
   path: http://titleImage-on-the-external.png
   width: 1024
   height: 800
---

Welcome to [Hexo](https://hexo.io/)! This is your very first post. 
...

Supports external services

Supports the following external services.

• Youtube
• Vimeo
• Instagram

License

MIT