About me Blog

Static AMP website creation with Bulma and Jekyll

3 mins read time


Optimization is a big concern for everyone who wants to desing/host a website. Google has made some progress by implementing standard rules to use when designing one. In this post I’ll show you how I created a responsive and AMP compatible (as you can see below) website using jekyll static website generator.


The lighthing bolt on the website name means that is AMP compatible

Introduction

I have been using jekyll static website generator because it’s

  1. simple,
  2. the most popular static website generator,
  3. it’s works natively with github pages and
  4. it has a great community and themes.

I wanted to be have a website optimized for google search (SEO) then I started using the emping theme, which has been designed to be AMP compatible. It’s a good starting point to produce content with very fast results but it’s very difficult to make visual changes if you don’t master css and also building times might be considerable long because scss conversion and minification in jekyll it’s a little bit slow.

I recently meet bulma, a simple css framework that helps you build easily beautiful sites using defined classes. It’s based only on css rules (no javascript), it has very good documentation and it’s relatively light, 150kb for the minified version. In this post I’ll show you how i have adapted it to work with jekyll and obtain a fast amp website.

Components

AMP rules

AMP websites have the following restrictions:

  1. js: No external javascript is allowed, like: <script type="text/javascript" src="jquery-1.8.3.js"></script>. Meaning is not possible to use jquery, leaflet or other external js libraries. The only accepted js are the AMP js components that are “optimized” by google.
  2. css:
    • No external css loading like <link rel="stylesheet" type="text/css" href="mystyle.css"> is admitted.
    • The only excuse are the loading of external fonts.
    • Custom css must be included in the header, minified and it shouldn’t execedd 50kb.
  3. images: no <img> component. Use instead <amp-img>, which always includes width and height or at least a ratio between the two because helps render a website.

Building website with github pages

I host my website in github pages, which natively builds pages using jekyll. The little issue is that only a bunch of jekyll gems are allowed in the process (github-pages gems group), which makes difficult to optimize websites, since there is no js/css supported bundler/uglifier. This was one of the first reasons that I started looking for alternatives to optimize my website.

I got insipired from this post from like Michael Rose and this post form from Savaslabs to use npm libraries to externalise my website optimization.

How to include 150kb bulma css in AMP

Bulma includes too many classes in it’s css file so it’s mandatory to filter it’s file before using it. At the beginning I started filtering the sass version with the only the components that I used but this process is very tedious to do by hand and at the end my results were not enough to be below 50kb.

I finally found the purifycss plugin, that was used in this post to shrink bootstrap. In my case the resulting css file is around 45kb even if I use a lot of classes from bulma, as you can see in my website (go take a look).

my website AMP validation

I process my css as follows:

  1. I have a main.scss that reads my custom variables and loads bulma,
  2. the result is purified using the only the used classes in my html,
  3. concatenation with a syntax highlight css file that I use to highlight code
  4. and the final result is minified/inlined.

I also added a pipeline to create image form the same size using gulp-responsive package and then I optimize my images using gulp-image package.

The compilation of npm plugins are the following:

  • gulp-sass: compile sass/scss files
  • gulp-clean-css: minify and clean css
  • gulp-concat: concatenate css/js files
  • gulp-purifycss: remove not used classes from css
  • gulp-replace: replace a pattern in files
  • gulp-responsive: create different image sizes
  • gulp-image: optimize images

Conclusion

I am satisfied with the results that I get with my new process pipeline. I decreased build time of my website from 12 to 2 seconds. Even if AMP restrictions can be annoying, the results are good: good SEO referencing, fast loading times, predefined layout of your page so that components won’t move when loading.

On the other side, I am forced to commit more frequently my resulting css file if I change the used classes from bulma and I don’t think I’ll be able to use all bulma classes because I’ll be above the 50kb of css.


PS: I like to use emojis and I found the jemoji gems very interesting until I found out that is not very AMP friendly.

You may also like: