The Gulp, Jekyll, Github Pages & Cloudflare Mixture

Simple, fast, flexible, secure & https. Total cost, $15AUD for domain registration.

The Gulp, Jekyll, Github Pages & Cloudflare Mixture

Flexible, simple, fast, secure & https. Total cost, $15AUD for domain registration.

Ian Teda

Web technologies for development hosting and security are vast. With proponents singing their own praises. At the start of my project 1 I looked around at the options.

Wordpress serves up over 26%2 of the internet. Been there done that, so I crossed it off the list. No Good .

I almost settled on Ghost. The idea of playing around with Node.js tickled my fancy. But I balked at the hosting options, which cost money and are few. Hosting with DigitalOcean almost swayed me. Self hosting Ghost was a cheaper option, but both would require what time I have keeping the server up and current instead of creating content. So I cross Ghost off the list. No Good .

In the end, the technology stack I chose for my quiver includes Gulp for development, Jekyll as the web platform, Github Pages for the hosting, and Cloudfare for CDN and HTTPS. Total cost, $15AUD for domain registration. Tick .

Gulp (Development)

Jekyll comes with tooling out of the box to help with development, such as server reload on file change and SASS transpiling. But I wanted more flexibility (options) with my development workflow, so I piped in Gulp (did you see what I did there, Gulp joke). Using Gulp opened up my workflow to the Gulp ecosystem and 2,251 plugins in it.

Below is a list of the plugins in alphabetical order that I use:

  • autoprefixer: Write cleaner CSS by adding vender prefixes postCSS
  • Browsersync: Live reload CSS and keep multiple browsers & devices in sync
  • Concat: Join multiple files into one CSS & JavaScript
  • css-mqpacker: Pack the same CSS media query rules into one media query rule postCSS
  • csswring: Delete unneed characters in my CSS file with source maps postCSS
  • eslint: Lint my JavaScript
  • eslint-config-google: Lint my JavaScript using the Google style guide
  • gh-pages: Publish the website build to Github Pages
  • Gzip: Compress the deployed files to reduce load time – i.e. html and JavaScript
  • htmlmin: Delete unneeded characters in my html
  • Imagemin: Minify my PNG, JPEG, GIF and SVG images. I have some problems with this one.
  • Inject: Inject dynamic CSS and JavaScript file references into the html header and footer
  • postCSS: Transform CSS styles with JavaScript plugins
  • SASS: Transpile SASS into CSS

Jekyll (Website)

I decided to use Jekyll when it dawned on me that to have a fast content management system (CMS) it needs a cache system. And what is a cache system? A static webpage generator - aka Jekyll. Since I don’t need access for multiple authors – which could still be done with Jekyll and Github, but would require more technical knowledge from the author – lets skip the whole database thing and go straight to generating the webpages on my local machine and uploading the build.

By removing the database I reduced my cyber attack profile – no database calls – and simplifies hosting requirements. Opening up cheaper hosting options.

Jekyll is easy to setup on Mac and Linux machines but is a little bit more work on Windows3

Github Pages (Hosting)

Jekyll was written by Tom Preston-Werner, the co-founder of Github. So it isn’t surprising that Github supports hosting of Jekyll websites – known as Github Pages, which removes the need to generate webpages locally. However, Github Pages only allows a few Jekyll Gems (plugins) to run on their server. So I decided to develop locally and upload the build to GitHub Pages. I can do what ever I like now, it is my machine.

GitHub Pages also offers CDN and domain redirects4, meaning speed and your own domain name. On top of all that the price is right, free.

Cloudfare (HTTPS/CDN)

Cloudfare makes your website faster and safer by offering DOS protection, shared SSL and CDN cache. They believe so deeply about a secure internet, they have a free tier plan5. Tick, tick and tick. They use a Universal SSL to secure the connection between your users and CloudFlare6. Giving your website a https address.

I used the linked guide for setting up my Jekyll / GitHub website with Clodflare7.

Keep up date with the latest happenings: