Special Changes - aav7fl/website GitHub Wiki

Special changes made to the website

Here are some special or unusual changes made to the website to satisfy certain needs, such as faster delivery, better search engine optimization, or special webpage implementation.

Cloudflare

My website is currently set up to run through Cloudflare, which allows me a fast webpage delivery, secure connection over HTTPS, minimized/gzip content, and other small web improvements. These improvements allow me to score highly on Google's PageSpeed Tool

A setup guide can be found on Cloudflare's blog.

AMP

I implement AMP (Accelerated Mobile Pages) into the website blog pages using amp-jekyll to make the website more mobile friendly. It also requires a special layout, and special CSS to make everything fit within the official guidelines.

Video include/amp-check include

I've implemented two special includes to handle situations that would interfere with the AMP layout.

Videos

The first is handling videos in blog posts. This was a quick and dirty method that I created to handle my use cases.

AMP has a special way to embed videos as opposed to a normal HTML5 implementation. In order to insert a video into a blog post, it must be correctly generated for both website layouts.

Implementation can be viewed under Advanced Post Features.

Regular AMP Checks

_includes/amp-check.html was intended to be a file that handled other minor needs for the AMP layout. Currently, it handles an issue with Jekyll SEO Tag. The <title> tag is already used in the amp.html layout, or used in a different way in other places on the website, so this removes the duplicate title tag found in the generated SEO Tag.

i.e. Adding the page number with paginator onto the title tag, the SEO Tag will create a duplicate <title> tag that not desired.

This include will remove the <title> tag (or any specified tag inside of this file) listed inside of the generated SEO Tag.

CSS Preload/script

Someday, <link rel="preload"> might be used to call the noncritical.css stylesheet in all web browsers. For now, not enough browsers support it. So there is a JavaScript implementation in the footer to load it asynchronously as a fallback.

⚠️ **GitHub.com Fallback** ⚠️