Git Product home page Git Product logo

hexo-generator-amp's Introduction

hexo-generator-amp

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

DEMO: HTML | AMP HTML

Screenshot

Orverview

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

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.

  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.

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.