About me

Static AMP website creation with Bulma and Jekyll

3 mins read time ❤️ Views

Optimization is a big concern for everyone who wants to design/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 lightning bolt on the website name means that is AMP compatible


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.


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

Here is the link to my gulpfile. A simple npm run build will build a minified css that I put the _includes folder and then I insert in the header of my page. When I developing I usually do an npm run watch to include new bulma styles in my css that I would use.


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.

In relation with 🏷️ jekyll, amphtml, bulma, gulp:

Search posts functionality in AMP static website make with Jekyll

Good web reference is related with how fast your web page loads. Google works in a web format called AMP, which makes loading pages faster but also imposes some restrictions, like no external javascript. It's not simple to add API calls in AMP so this post shows how to implement a search fonctionality in a static page.

Algolia search engine in Jekyll static pages

This article shows how to implementent Algolia searching engine in a static website and update the entries using Github Actions.

Writing notes with Vimwiki and Hugo static generator

Vim is a simple and ubiquitous text editor that I use daily. In this article I show how to use Vim to take and publish diary notes using Vimwiki and Hugo.

Muse: Mopidy web client with Snapcast support

Services like Mopidy and Snapcast are ideal to create a multiroom streaming audio player using devices like the RaspberryPi or android telephones. This posts presents a web interface that uses the state of the art web technologies and integrates nicely with Mopidy and Snapcast.

Subscribe to my newsletter 📰

and share it with your friends: