The Gulp, Jekyll, Github Pages & Cloudflare Mixture
Simple, fast, flexible, secure & https. Total cost, $15AUD for domain registration.
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 ianteda.com 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 Windows[3]
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 redirects[4], 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 plan[5]. Tick, tick and tick. They use a Universal SSL to secure the connection between your users and CloudFlare[6]. Giving your website a https address.
I used the linked guide for setting up my Jekyll / GitHub website with Clodflare[7].