🎨 AMP Affiliately Jekyll Theme

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

👀 Live Demo

🌈 Features

AMP-ready
Easily installable using remote_theme
Easily Customisable
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)
Social Sharing via AddThis (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 Action

✨ New Features in v2.x

Support building Jekyll with ⚡ AMP Optimizer using Gulp
Support minifying HTML and inline CSS using Gulp 🗜
Improve accessibility 👩‍🦽
Improve the support for IE11
Support installing Jekyll-Scholar Plugin to format bibliographies
Set the sorting of post's tags and categories in _config.yml
New block for including Table of Contents to a page/post
New post-processing for adding anchor links next to H2, H3, and H4 headings inside post content
New post-processing for inserting rel and target attributes to outbound links without plugins or dependencies
Support on-page sidebar options
Allow configuring Resources Widget globally in _config.yml
Support creating multiple download buttons in the sidebar widget
Allow fully customizing copyright notice in _config.yml

What is AMP ⚡

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.

Installation 🧰

There are various ways to install the theme:

1. Cloning the repository and updating settings

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

2. 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
Google Adsense
Google Custom Search Engine
Google Tag Manager

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

Sidebar Widgets 🧙‍♂️

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 with 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" %}

OPTIONS

DEMOS - Image in AMP

📹 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="<YOUTUBE_VIDEO_UID>" 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="<YOUTUBE_VIDEO_UID>" \
   playlist="<YOUTUBE_PLAYLIST_UID>" title="Welcome to Watch this Video" %}

DEMOS - YouTube Embeds

💻 Codes

This theme supports syntax highlighting based on Rouge, which is the default highlighter in Jekyll 3 and above. All CSS styles for syntax highlighting stores 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 light-weight 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 feature

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.

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. If you are going to deploy it to your Github Pages, you need to deploy it via Github Action. The Action workflow is configured in the /.github/workflows/deploy-jekyll.yml, which uses helaili/jekyll-action@v2 to build the Jekyll site, run AMP Optimizer and HTML minifier using Gulp, and deploy the optimized build to your gh-pages branch.

🤝 Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/chriskyfung/amp-affiliately-jekyll-theme/. 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.

🙏 Thanks

AMP Affiliately is developed based on MIT-licensed Affiliates Jekyll theme designed by Sal, WowThemes.net.

⚖ License

This theme is available as open-source under the terms of the MIT License under the same upstream license.

braveh4rt/amp-affiliately-jekyll-theme