AMP Affiliately Jekyll Theme

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

Live Demo

AMP Affiliately Jekyll Theme

Features

AMP-ready
Responsive
Syntax Highlighting for code
Cover Images for homepage and blog posts
Social Sharing via AddThis (AMP)
Simple Navigation Menu
Page/Post Sidebar
Pagination
Multiple Authors
Featured Box/List
Category and Tag Archives
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
Can be easily installed using remote_theme
Easily Customisable
Support deploy to Github Pages via Github Action

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 different 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 own server or Github Pages (read Deploying to GitHub Pages with GitHub Actions ).

2. Set up as a remote theme and updating settings

Add gem "jekyll-remote-theme" to your Gemfile to add the theme as a dependancy.
run bundle install to install the plugin.
Add the following to your site's _config.yml file to activate the plugin
```
plugins:
   - jekyll-remote-theme
```
Add remote_theme: chriskyfung/amp-affiliately-jekyll-theme to your _config.yml file to set the site theme.
Set site-wide options in your site's_config.yml.

Note: You must update the jekyll-remote-theme plugin to v0.4.2 or higher if you use Jekyll 4.0+.

You may also optionally specify a branch, tag, or commit to use by appending an @ and the Git ref (e.g., chriskyfung/[email protected]). If you don't specify a Git ref, the master branch will be used.

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/jekyll.yml which uses helaili/[email protected]. It needs access to a JEKYLL_PAT secret set with a Personal Access Token (needs public_repo scope).

Configures

Enabling 3rd-party components

Google Analytics

Set up your Analytics Tracking ID in _config.yml.

Google Tag Manager

Set up your GTM AMP container ID in _config.yml.

Google Adsense

Set up your Adsense ID in _config.yml.

Google Custom Search Engine

Set up your gcse ID in _config.yml.

Disqus Comments

Deploy disqus-amp.html to another domain or subdoamin.
Copy the external URL link as the value of amp_disqus_url in _config.yml.

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

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" ="Welcome" ="text-center" %}

Options:

alt
caption (support HTML codes)
class (e.g. text-center)
layout (amp-img supported layouts: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay or responsive. default: intrinsic)
lightbox (default: true)
link (assign a URL for the HTML a tag that wraps the amp-img tag when the key is present)
source (assets, projects or raw)
- default - get image from the /images/posts/ directory
- assets - get image from the /assets/images/ directory
- projects - get image from the /images/projects/ directory
- raw - get image from the specified URL

YouTube Videos

You must 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" %}

id required
title optional

To embed a playlist, you must set it with 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" %}

Codes

To enable syntax highlighter, you must add the following to the post front matter.

css:
  syntax: true

Front Matters

Set Featured Image for a Page/Post

You can assign an image (with 730×431 pixels in size) as the featured image of a post in the front matter like this:

image:
   path: /assets/images/cover-image.png

Create thumbnail images for display in Featured Boxes/Lists

Make a copy of each featured image file in the same folder.
Rename the copies to have a filename in form of <filename>.thumb.<ext>, e.g. cover-image.thumb.png.
Rescale it to a heigth of 150px.

By default, the thumbnail of featured images is cropped at the center inside the cards of the Featured Boxes/Lists. A new variable for the thumbnail positioning was added to the theme on 2020-10-07. You can now change the image position to the left or right by appending a fit option to the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   fit: left

For images that do not have an aspect ratio of 16:9

If the image is not at 16:9 aspect ratio, you need to define it width and height under the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   width: 640
   height: 480

Hide Featured Image on a Page/Post

If you do not want to render the featured image on the post page, append a hide option to the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   hide: true

Remove Box Shadow from a Featured Image

If you want to remove the shadow of the featured image on the post page, append the following class to the image variable, e.g.

image:
   path: /assets/images/cover-image.png
   class: shadow-none

Pin to Featured Boxes/Lists

featured: true

Set Last Modified Date

last_modified_at: 2020-06-20 23:36 +0000`

Add Custom Codes to HTML Head to a Page/Post

In the front matter, you can add your codes to the HTML header using the variable custom_header. For example, include the script for the amp-accordion component:

custom_head: >-
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Add Custom CSS Styles to Header to a Page/Post

In the front matter, you can add your custom CSS styles to the end of the <style amp-custom> tag inside the HTML header.

css:
   custom: >
      .ml-2 { margin-left: 2rem }
      table { width: 100%; max-width: 400px; margin-bottom: 1.5rem; }

Display Download Buttons in a Post's sidebar

When you use this theme for the Github Pages of a Github project repository, it is available to show a download button or links to the repository in the sidebar of a Post.

To display the button to the project repository, declare the repository name in your _config.yml.

repository: <USERNAME>/<PROJECT>

Also, appending the download variable to the post front matter.

download: true

If a release exists in the repository, an additional button that links to the latest release will be shown.

Note: Authentication is required to get your repository data in order to show the release button. Please follow the docs of jekyll /github-metadata to set up your personal access token.

You can also override the latest release button by defining a URL under the download variable, e.g.:

downlod:
  url: //.../filename.zip

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 page with AMP

AMP provides built-in validator to validate your pages so that they can rendered quickly.

You can access this validator by opening the Developer Console in your browser and adding #development=1 to any url of your site.

Example - http://localhost:4000/#development=1

If you have errors on your page, AMP will list those for you in the console. If you do not have any errors, you'll get a message "AMP Validation Successful" on your console.

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.

Thanks

Affiliately is based on Affiliates jekyll theme. Thank You.

License

The theme is available as open-source under the terms of the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
.github		.github
Screenshots		Screenshots
_includes		_includes
_layouts		_layouts
_plugins		_plugins
_posts		_posts
_sass		_sass
assets		assets
.gitignore		.gitignore
.post-template		.post-template
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
index.html		index.html
search.html		search.html

License

mrmikeceo/amp-affiliately-jekyll-theme

Folders and files

Latest commit

History

Repository files navigation

AMP Affiliately Jekyll Theme

Live Demo