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 ¹ I looked around at the options.

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

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 .

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³

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⁴, 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⁵. Tick, tick and tick. They use a Universal SSL to secure the connection between your users and CloudFlare⁶. Giving your website a https address.

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

Footnotes