The AMP Minimal Theme
Fork the project
Download the Zip and create your own repository.
Clone the Project
git clone firstname.lastname@example.org:lafronzt/AMP-Minimal.git
Than use this theme just like any other Jekyll theme.
Examples of Use
- Running with some custom CSS
Minimal will respect the following variables, if set in your site's
title: [The title of your site] description: [A short description of your site's purpose]
Additionally, you may choose to set the following optional variables:
show_downloads: ["true" or "false" to indicate whether to provide a download URL] google_analytics: [Your Google Analytics tracking ID]
If you'd like to customize the styling:
- Open the file
- Ensure that the following code is located at the top:
- Add any custom CSS (or Sass, including imports) you'd like immediately after the
If you'd like to change the theme's HTML layout:
- Open and edit the file called
/_layouts/default.htmlin your site
- Customize the layout as you'd like
Keep in mind: AMP does not allow inline styling, or JS files.
Google AMP sets many strict limits on what you can include in your web pages. A few of these are worth talking about:
Limitation: All CSS must be inline which is automaticly generated from the
Because of this, the main css file for this site is in
instead of in the normal
css/ Jekyll folder. This css file is inlined
into the header of every page via the special
scssify filter in
Limitation: Size all resources statically
Every image you include in your page must have a height and width. This also applies to other things like embedding videos or other resources. Check below for more details.
Writing Posts with Google AMP
Writing posts works just like it does normally in Jekyll except when you want to include extra resources likes pictures, videos, embedded Twitter posts, etc.
Google AMP has it's own set of special html tags for including content. You should use these instead of normal Markdown or HTML tags.
The one you are most likely to need is
Images in your posts
<amp-img width="600" height="300" layout="responsive" src="/assets/images/your_picture.jpg"></amp-img>
Embedding other types of content
The AMP Project provides helpers for many other types of content like audio, ads, Google Analytics, etc.
Built-in AMP tags:
Extended AMP tags:
Validating your page with Google AMP
Google AMP adds built-in validation logic to make sure your pages follow all the rules so they render as fast as possible.
To check your page, just add
#development=1 to any url on your site and then
You will either see a success message:
Powered by AMP ⚡ HTML – Version 1457112743399 AMP validation successful.
Or you will see a list of errors to fix:
Powered by AMP ⚡ HTML – Version 1457112743399 AMP validation had errors: The attribute 'style' may not appear in tag 'span' The attribute 'style' may not appear in tag 'div'