hexo-generator-amp
v3.2.0
Published
AMP ⚡ HTML (Accelerated Mobile Pages) generator for Hexo.
Downloads
42
Maintainers
Readme
hexo-generator-amp
AMP ⚡ HTML (Accelerated Mobile Pages Project HTML) generator for Hexo.
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.
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.
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.
- Please open your AMP HTML page in Chrome DevTools.
- 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.
License
MIT