AMP Affiliately

AMP Affiliately offers an AMP-ready Jekyll theme for your blogs and websites.

AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices.

Features

AMP-ready
Easily installable using remote_theme
Easily Customisable
Responsive Web Design
Sticky Navigation Menu with Submenu on Hover
Left/Right Sidebar
Pagination
Category and Tag Archives
Featured Box/List
Set Cover/Featured Image on Post Pages
Syntax Highlighting for Code
Multiple Authors
Include <amp-img> with <figure> and <figcaption> wrapper
Support WebP Image Format
Lightbox (AMP)
Include YouTube (AMP) with GA video tracking
Disqus Comments in AMP
Site Search via Google Custom Search Engine
Auto-Suggestion Search Bar
Tracking with Google Analytics and Google Tag Manager (AMP)
Monetize via Google Adsense and Buy Me A Coffee
Support deploying to Github Pages via Github Actions

Installation

There are various ways to install the theme:

Cloning the repository

Fork this repository and clone the forked repository.
Update the _config.yml file as per your requirements.
Add your posts to the _posts directory.
Deploy to your server or Github Pages (read Deploying to GitHub Pages with GitHub Actions).

Set up as a remote theme and updating settings

Read the procedures in the Config Guide.

Configurations

Enabling Third-Party Components

Read Google Services in the Config Guide. For the following:
- Google Analytics 4
- Google Adsense
- Google Tag Manager
- Google Custom Search Engine

Disqus Comments in AMP

Download this HTML file and deploy it to another domain or subdomain.
Copy the external URL link as the value of amp_disqus_url in _config.yml.
Use amp_disqus_height to configure the height of <amp-iframe> if needed (default is 140).

Enabling Pagination for Blog Posts

Make a new folder named blog in your root directory.
Create an empty HTML file in the new folder and name it index.html.
Copy the following front matter to the HTML file:

---
layout: blog-pagination
---

Enabling Lists of Categories and Tags

In your root directory, create a folder named category and tag, respectively.
New a file and name it to index.html in your category and/or tag folder(s).
Copy the following front matters to the corresponding index.html:

For category/index.html,

---
layout: category-list
title: List of Categories
---

For tag/index.html

---
layout: tag-list
title: List of Tags
---

Writing Posts

You can write posts just as you would in Jekyll, the only difference being that AMP has some strict guidelines on including external content.

You cannot use Markdown format or normal HTML tags. AMP provides its own custom tags for images, videos, etc. For examples,

Images

Use the picture.html template to insert an image in the AMP format for automatically serving the image in the WebP format. The template also wraps the image with a <figure> tag with an optional caption element.

{% include picture.html img="welcome.jpg" height="400" width="800" %}

YouTube Videos

You need to include the following front-matter variable to enable YouTube embeds.

amp:
   youtube: true

To embed a single video, use the following tag to include the youtube.html template.

{% include youtube.html id="&lt;YOUTUBE_VIDEO_UID&gt;" title="Welcome to Watch this Video" }

To embed a playlist, you need to set both the playlist ID and the ID of the first video within the playlist.

{% include youtube.html id="&lt;YOUTUBE_VIDEO_UID&gt;" playlist="&lt;YOUTUBE_PLAYLIST_UID&gt;" title="Welcome to Watch this Video" %}

Code

This theme supports syntax highlighting based on Rouge, which is the default highlighter in Jekyll 3 and above. All CSS styles for syntax highlighting are located in the amp-syntax-highlight.css under the _includes/css/ directory.

By default, this theme excludes the CSS styles for syntax highlighting. The AMP framework limits the total CSS styles up to 75,000 bytes per AMP page. This keeps lightweight and rendering fast.

To include the stylesheet on-demand, you need to add the following to your post’s front matter:

css:
  syntax: true

DEMOS - Code Block

Callout beta

A shortcode for creating a colored box, e.g. tips/memo.

{% capture label %}
   PUT YOUR MARKDOWN CONTENT HERE...
{% endcapture %}

{% include callout.html content=label %}

Front Matters

Using AMP Components

Some AMP components require you to specify external scripts before using them. You can specify these scripts in the head.html file in the includes directory after the already imported scripts and then use these components in any post.

See Full AMP Documentation to learn more.

Validating Your AMP Pages

AMP provides a built-in validator to validate your pages. You can access this validator by opening the Developer Console in your browser and appending #development=1 to the end of any URL of your site, e.g. http://localhost:4000/#development=1.

If you have errors on your page, AMP will list those for you in the console. If no errors are on your page, you’ll get a message “AMP Validation Successful” on the DevTools console.

Using Gulp to Run and Optimize Jekyll Build

Run the following command to install Gulp, AMP Optimizer, and other node packages in the root directory of your project:

npm install

Build Jekyll locally and run the Gulp pipeline with the following command:

npm run build

Deploying to GitHub Pages with GitHub Actions

This theme includes Jekyll plugins that are not in the whitelist of Github Pages. Therefore, to deploy it to your Github Pages, you need to use a custom Github Actions workflow to publish your site. The Action workflow is configured in the /.github/workflows/jekyll-build.yml. The workflow is triggered on pushes to the master branch and leverages GitHub Actions to:

Build the Jekyll Site: Installs Ruby and Jekyll to build the site.
Optimize AMP and Minify HTML: Runs AMP Optimizer and HTML minifier with gulp.js.
Deploy to GitHub Pages: Publishs the built site to GitHub Pages.

Contributing

Bug reports and pull requests are welcome on GitHub This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

To submit a pull request:

Fork/clone the repository.
Develop.
Create a new branch from the master branch.
Open a pull request on Github describing what was fixed or added.

Support Me

Would you like to buy me a coffee? I would really appreciate it if you could support me for the theme development.

Credits

This project is developed based on the MIT-licensed Affiliates Jekyll theme designed by Sal, WowThemes.net.

AMP Affiliately v. 3.4.0